PopupPicker

PopupPicker

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

popup-picker - 图1

二维码

popup-picker - 图2

Install

安装

局部注册

全局注册

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

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

其他选项与picker一致

API

属性

名字类型默认值说明版本要求
valuearray表单值,使用v-model绑定
titlestring标题
cancel-textstring弹窗的取消文字
confirm-textstring弹窗的确认文字
placeholderstring提示文字
show-namebooleanfalse是否显示文字值而不是key
inline-descstringCell的描述文字
showboolean显示 (支持.sync修饰 next)
value-text-alignstringrightvalue 对齐方式(text-align)v2.1.0-rc.3
display-formatfunction自定义在cell上的显示格式,参数为当前 value,使用该属性时,show-name 属性将失效v2.1.1-rc.7
popup-styleobject弹窗样式,可以用于强制指定 z-indexv2.5.2
popup-titlestring弹窗标题v2.7.0
disabledbooleanfalse是否禁用选择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

Issues

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 69,贡献人数 4
unclayairyland万刚wg

Changelog

发布日志

  • v2.9.0 [feature] 支持属性 disabled #2594
  • v2.7.7 [fix] 去除第一个子元素的上边线 #2371
  • v2.7.0 [feature] 增加属性 popup-title(使用 popup-header 组件) #1866
  • v2.5.10 [feature] 值文字颜色受控于 @cell-value-color #1874
  • v2.5.8 [fix] popup显示时阻止背景滚动 #1830
  • v2.5.7 [fix] 修复修改值后第二次打开默认选中项渲染不正确的问题 #1793
  • v2.5.6 [feature] 支持在滑动 picker 时触发事件 on-shadow-change #1778
  • v2.5.3 [fix] 修复在 x-textarea 后引入 popup-picker label 宽度被覆盖 #1696
  • v2.5.2 [feature] 支持弹窗样式设置 prop:popup-style #1656
  • v2.4.1 [fix] popup-picker头部区域屏蔽滑动事件 #1596
  • v2.3.8 [fix] 修复 iOS 低版本下 placeholder 无法显示的问题 #1293
  • v2.3.7 [feature] 添加 slot:title
  • v2.2.1-rc.7 [fix] 修复 popup-picker 上个版本转换值的问题
  • v2.2.1-rc.6 [enhance] display-format 支持 names 作为第二个参数
  • v2.2.1-rc.1 [fix] 修复错误的弹窗关闭类型 #1209
  • v2.1.1-rc.13 [enhance] 取消文字使用灰色
  • v2.1.1-rc.11 [enhance] 修复 Safari 下遮罩层渲染慢的问题 #1083 @sixiakun
  • v2.1.1-rc.11 [enhance] 默认开启 transfer-dom,解决非 Safari 也会出现的 z-index 问题
  • v2.1.1-rc.8 [enhance] 更新头部样式并新增 less 变量
  • v2.1.1-rc.7 [enhance] 支持 PC 上鼠标选择 #1039 @michael829
  • v2.1.1-rc.7 [enhance] 支持根据值自定义显示格式
  • v2.1.1-rc.1 [fix] 修复 label 未正确设置 labelMarginRight #977 @wg5945
  • v2.1.0-rc.50 [fix] 修复on-change事件没有触发 #934 @howyhuang