Popup 组件使用教程
优质
小牛编辑
137浏览
2023-12-01
安装
import { Popup } from 'vux'
export default {
components: {
Popup
}
}// 在入口文件全局引入
import Vue from 'vue'
import { Popup } from 'vux'
Vue.component('popup', Popup)
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| 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 | -- |