Picker 选择器

使用指南

Picker组件也就是选择器，可以用于实现单列或多列选项的选择

TIP

此组件基于h3-popup-modal组件实现 , 属于Popup家族组件，查看这篇blogPopup家族, 了解更多

代码演示

查看代码

<template>
  <div class="list">
    <p>picker 组件</p>
    <h3-button @click="pickervisible = true" type="primary">
      show picker
    </h3-button>

    <h3-picker v-model="pickervisible" :data="list" maskClosable />
  </div>
</template>

<script>
import H3Picker from '@/components/h3-picker/';
import H3Button from '@/components/h3-button/';
export default {
  name: 'PickerDemo',
  components: {
    H3Picker,
    H3Button,
  },
  data () {
    return {
      pickervisible: false,
      list: [
        ['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'],
        ['小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7'],
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

旧版picker是一个单纯的选择器，新组件是一个上滑的弹窗选择器

1. 弃用的props：

2. 替换的props：

   • limit => colLimit

3. 新增的props：colFixed

API

Prop

属性	说明	类型	默认值
visible	是否显示，v-model绑定值	Boolean	false
maskClosable	点击蒙层是否可触发关闭	Boolean	false
maskCls	mask蒙层自定义class	string	无
wrapCls	wrap弹窗内容区域的自定义class	string	无
round	是否圆角	boolean	false
getRenderContainer	把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector查找	Function=> Node / String	document.body
title	标题	string	-
cancelText	第一个按钮文本	string	'取消'
clearText	第二个按钮文本	string	'清空'
extraText	第三个按钮文本	string	-
confirmText	第四个按钮文本	string	'确定'
data	要显示的数据，二维数组，内容如下data子配置项所示	array<array>	[]
alias	data中数据别名, 默认{value: 'value', label: 'label'}	object	{}
value	选中的数据	array	[]
itemTitle	数据列标题，数量应和data一致	array	[]
colLimit	显示的数据列数	number	-
colFixed	当colLimit有值生效，是否当数据列数少于colLimit进行空白占位	boolean	false
watch	是否监听data或value变化触发数据变化	boolean	true

• data 子配置项

属性	说明	类型	默认值
value	id	string|number	-
label	name	string|number|boolean	-

const data = [
  [{
    value: 1,
    label: '1',
  }],
];

也可以不是对象，为 string|number|boolean，会在内部转换成value和label相同的对象

const data = [
  [1],
];

Event

事件名	说明	参数
toggle	切换显示时触发，v-model绑定事件	value
show	显示时回调	-
hide	关闭时回调	-
select	当点击确认按钮或清空按钮时的回调	(selected, selectedLabel, selectedIndex)
cancel	当点击取消按钮及蒙层回调	-
extra	点击第三个按钮回调	-