PopupPicker 组件使用教程
优质
小牛编辑
136浏览
2023-12-01
安装
import { PopupPicker } from 'vux'
export default {
components: {
PopupPicker
}
}// 在入口文件全局引入
import Vue from 'vue'
import { PopupPicker } from 'vux'
Vue.component('popup-picker', PopupPicker)
其他选项与picker一致
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| value | array | 表单值，使用v-model绑定 | -- | |
| title | string | 标题 | -- | |
| cancel-text | string | 弹窗的取消文字 | -- | |
| confirm-text | string | 弹窗的确认文字 | -- | |
| placeholder | string | 提示文字 | -- | |
| show-name | boolean | false | 是否显示文字值而不是key | -- |
| inline-desc | string | Cell的描述文字 | -- | |
| show | boolean | 显示 (支持.sync修饰 next) | -- | |
| value-text-align | string | right | value 对齐方式(text-align) | v2.1.0-rc.3 |
| display-format | function | 自定义在cell上的显示格式，参数为当前 value，使用该属性时，show-name 属性将失效 | v2.1.1-rc.7 | |
| popup-style | object | 弹窗样式，可以用于强制指定 z-index | v2.5.2 | |
| popup-title | string | 弹窗标题 | v2.7.0 | |
| disabled | boolean | false | 是否禁用选择 | v2.9.0 |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-change | (value) | 值变化时触发 | -- |
| @on-show | -- | 弹窗出现时触发 | -- |
| @on-hide | (closeType) true表示confirm(选择确认), false表示其他情况的关闭 | 弹窗关闭时触发 | -- |
| @on-shadow-change | (Array ids, Array names) | picker 值变化时触发，即滑动 picker 时触发 | v2.5.6 |
插槽
| 名字 | 说明 | 版本要求 |
| title | 标题插槽，使用 scope.labelClass 和 scope.labelStyle 继承原有样式(实现样式受控于 group label 设置) | v2.3.7 |
重要提示及已知问题
- QiPhone 上弹窗显示时遮罩层闪烁
未找到解决方式。在 iOS11 之前会出现，在 iOS11 后似乎已经不能重现，可能要归结于系统浏览器原因。 相关 issue: #2239