Picker 选择器

使用指南

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

TIP

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

代码演示

查看代码

<template>
  <div class="list">
    <p>picker 组件</p>
    <h3-button @click="pickervisible = true; pickerTitle = '标题'; pickerSubTitle = '二级描述二级描述二级描述'"  type="primary">
      show picker
    </h3-button> 

    <p>隐藏选择器标题</p>
    <h3-button @click="pickervisible = true; pickerTitle = ''; pickerSubTitle = ''" type="primary">
      隐藏选择器标题
    </h3-button>

    <p>自定义header Picker</p>
    <h3-button @click="pickervisible1 = true" type="primary">
      自定义header选择器
    </h3-button>

    <p>列表选择器示例请参考PopupModal 模态弹出框示例</p>

    

    <h3-picker 
      v-model="pickervisible" 
      :data="list" maskClosable 
      clearText=""
      :subTitle="pickerSubTitle"
      :title="pickerTitle"
      @change="handlePickerChange" 
    />

    <h3-picker 
      v-model="pickervisible1" 
      :data="list" 
      clearText=""
      title="标题"
      extraText="操作"
      maskClosable 
      @change="handlePickerChange" 
    >
      <template #pickerHeader>
        <div class="picker-header">
          <h3-tab v-if="pickervisible1" class="picker-header-tab" type="scroll" >
            <h3-tab-item>分段一</h3-tab-item>
            <h3-tab-item>条件关系</h3-tab-item>
            <h3-tab-item>条件值</h3-tab-item>
          </h3-tab>
        </div>
      </template>
    </h3-picker>
  </div>
</template>

<script>
import H3Picker from '@/components/h3-picker/';
import H3Button from '@/components/h3-button/';
import { H3Tab, H3TabItem } from '@/components/h3-tab/';
export default {
  name: 'PickerDemo',
  components: {
    H3Picker,
    H3Button,
    H3Tab, 
    H3TabItem,
  },
  data () {
    return {
      pickervisible: false,
      list: [
        ['选项一', '选项二', '选项三', '选项四', '选项五', '选项六', '选项七', '选项八', '选项九', '选项十'],
        ['选项1-1', '选项1-2', '选项1-3', '选项1-4', '选项1-5', '选项1-6', '选项1-7'],
        ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
      ],
      list1: [
        ['选项一', '选项二', '选项三', '选项四', '选项五', '选项六', '选项七', '选项八', '选项九', '选项十'],
      ],
      pickervisible1: false,
      pickerTitle: '',
      pickerSubTitle: '',
    };
  },
  methods: {
    handlePickerChange (selected, itemIndex, selectedIndex) {
      // console.log('**********handlePickerChange********');
    }
  }
};
</script>

<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
.picker-header {
  height: 48px;
  background: #F5F6F9;
  &-tab {
    height: 100%;
    background-color: transparent;
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

按照新的选择器Picker组件规范修改相关样式

若要做迁移请参考

1. 弃用的props：itemTitle
2. 新增的slot: pickerHeader
3. 新增 change 事件说明

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	[]
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	点击第三个按钮回调	-
change	监听选择器选择回调	(selected, selectedLabel, selectedIndex)

Slots

参数	说明
pickerHeader	选择器自定义头部区域