Popup

Popup

demo 原始链接demo 源码编辑文档组件源码

popup - 图1

二维码

popup - 图2

Install

安装

局部注册

全局注册

  1. import { Popup } from 'vux'
  2. export default {
  3. components: {
  4. Popup
  5. }
  6. }

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

API

属性

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

事件

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

插槽

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

Variables

## 样式变量


名字默认值说明继承自变量
@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

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 53,贡献人数 5
airylandKwanClay万刚Lin Sen

Changelog

发布日志

  • 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