弹窗提示 - popup - 《VUX 2.x 组件文档》

安装

局部注册

全局注册

import { Popup } from 'vux'
export default {
  components: {
    Popup
  }
}

// 在入口文件全局引入
import Vue from 'vue'
import { Popup } from 'vux'
Vue.component('popup', Popup)

API

属性

名字	类型	默认值	说明	版本要求
value	boolean		是否关闭，使用`v-model`绑定	—
height	string	auto	高度，设置`100%`为整屏高度。当 position 为 top 或者 bottom 时有效。	—
hide-on-blur	boolean	true	点击遮罩时是否自动关闭	—
is-transparent	boolean	false	是否为透明背景	v2.1.1-rc.9
width	string	auto	设置 100% 宽度必须使用该属性。在 position 为 left 或者 right 时有效。	v2.2.1-rc.6
position	string	bottom	位置，可取值 ['left', 'right', 'top', 'bottom']	v2.2.1-rc.6
show-mask	boolean	true	是否显示遮罩	v2.2.1-rc.6
popup-style	object		弹窗样式，可以用于强制指定 z-index	v2.5.2
hide-on-deactivated	boolean	true	是否在 deactived 事件触发时自动关闭，避免在路由切换时依然显示弹窗	v2.5.5
should-rerender-on-show	boolean	false	是否在显示时重新渲染内容区域(以及滚动到顶部)，适用于每次显示弹窗需要重新获取数据初始化的场景	v2.9.0
should-scroll-top-on-show	boolean	false	是否在显示时自动滚动到顶部，当你自定义滚动容器时需要手动为该容器加上类名 vux-scrollable	v2.9.0

事件

名字	参数	说明	版本要求
@on-hide	—	关闭时触发	—
@on-show	—	显示时触发	—
@on-first-show	—	第一次显示时触发，可以在该事件回调里初始化数据或者界面	—

插槽

名字	说明	版本要求
默认插槽	弹窗主体内容	—

## 样式变量

名字	默认值	说明	继承自变量
@popup-picker-header-text-color	#04BE02	—	@theme-color
@popup-picker-header-bg-color	#fbf9fe	—
@popup-picker-header-font-size	16px	—
@popup-picker-header-cancel-text-color	#828282	—
@popup-background-color	#eee	—
@popup-header-height	44px	—
@popup-header-bg-color	#fbf9fe	—
@popup-header-font-size	16px	—
@popup-header-left-text-color	#828282	—
@popup-header-right-text-color	#04BE02	—	@theme-color
@popup-header-title-text-color	#222	—
@popup-header-left-text-padding	15px	—
@popup-header-right-text-padding	15px	—

Issues

发布日志

v2.9.1 [fix] 修正弹出框右边有黑边 #2651
v2.9.0 [feature] 支持 should-rerender-on-show 实现每次打开重新渲染 #2598
v2.9.0 [feature] 支持自动滚动到顶部 #2598
v2.5.12 [fix] 在 beforeDestroy 和 deactivated 事件中清除设置于 body 上的 vux-modal-open 类名 #1921
v2.5.11 [fix] 仅在全局配置 $layout = VIEW_BOX 时用 fixed body 的形式阻止页面滚动 #1893
v2.5.10 [fix] 修复 class 工具函数拼写错误 #1893
v2.5.9 [feature] 修复当body没有设置100%宽度时出现的布局错乱问题 #1867
v2.5.5 [feature] 在 deactived 事件触发时自动关闭，避免在路由切换时依然显示弹窗，可以使用 prop:hide-on-deactivated 进行禁用 #1774
v2.5.2 [feature] 支持弹窗样式设置 prop:popup-style #1656
v2.3.7 [fix] 修复默认值为 true 时遮罩没有显示的问题 #1555
v2.3.3 [enhance] 默认 max-height 设为 100%，避免不设置高度时内容过长无法滚动
v2.3.3 [feature] 支持 prop:max-height
v2.3.3 [fix] 禁止遮罩层在手机上滚动 #1475 @xiaobinhong1
v2.2.2 [fix] 修复在某些情况下遮罩被错误关闭的问题 #1312
v2.2.1-rc.6 [fix] 修复 popup 类名丢失问题
v2.2.1-rc.6 [feature] 支持 prop:show-mask 隐藏遮罩
v2.2.1-rc.6 [feature] 支持 prop:position 设定位置
v2.2.1-rc.6 [feature] 支持 prop:width 设定左右位置时的宽度
v2.1.1-rc.11 [fix] 修复遮罩禁用点击时错误设置 overflowScrolling 的问题
v2.1.1-rc.9 [enhance] 更流畅的遮罩层动画
v2.1.1-rc.9 [feature] 支持透明背景
v2.1.1-rc.9 [feature] 支持背影颜色变量 @popup-background-color
v2.1.1-rc.6 [fix] 修复 Safari 上关闭第二个popup导致的问题 #1015 @think2011
v2.1.1-rc.1 [fix] 修复 overflow-scrolling 设置逻辑遗漏问题 #311 @linhaobin

popup

安装

属性

事件

插槽

相关 issue

贡献者

发布日志