Picker 选择器

QR

扫二维码查看演示效果

在一组预设数据中进行选择，e.g. 省市区选择。

规则

• 尽量使用 Picker 来帮助用户完成输入，避免用户通过键盘直接输入。
• DatePicker 是 Picker 的特定模式。

Code Example

<template>
  <div>
    <List>
      <Picker
        v-model="value"
        title="Areas"
        :data="district"
        :onOk="onOk"
        :onDismiss="onDismiss"
        :mask="false"
        :onChange="onChange">
        <template slot-scope="props" slot="list-item">
          <ListItem arrow="horizontal" :extra="props.extra" :onClick="props.onClick">Multiple & cascade</ListItem>
        </template>
      </Picker>

      <Picker
        title="选择季节"
        v-model="sValue"
        :data="seasons"
        :onOk="(value) => {sValue = value}"
        :cascade="false"
        :onChange="onChange">
        <template slot-scope="props" slot="list-item">
          <ListItem arrow="horizontal" :extra="props.extra" :onClick="props.onClick">Multiple</ListItem>
        </template>
      </Picker>

      <Picker
        title="选择地区"
        :data="provinces"
        v-model="province"
        :cascade="false"
        :onChange="onChange">
        <template slot-scope="props" slot="list-item">
          <ListItem arrow="horizontal" :extra="props.extra" :onClick="props.onClick">Single</ListItem>
        </template>
      </Picker>

      <Picker
        title="选择地区"
        :data="data"
        :cols="col"
        v-model="asyncValue"
        :onPickerChange="onPickerChange"
        :onOk="onOk">
        <template slot-scope="props" slot="list-item">
          <ListItem arrow="horizontal" :extra="props.extra" :onClick="props.onClick">Multiple & async</ListItem>
        </template>
      </Picker>
    </List>
    <Picker
      title="选择地区"
      :data="district"
      v-model="pickerValue"
      :onChange="onChange">
      <template slot-scope="props" slot="list-item">
        <div style="background-color: #fff; padding-left: 15px;" @click="props.onClick">
          <div class="test">
            <div style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Customized children</div>
            <div style="text-align: right; color: #888; margin-right: 15px;">{{props.extra}}</div>
          </div>
        </div>
      </template>
    </Picker>
  </div>
</template>

<script>
  import Picker from '@/components/picker'
  import List from '@/components/list'
  import ListItem from '@/components/list-item'
  import cityData from '@/components/picker/city-data.js'
  const provinces = cityData.map((item) => {
    return {
      value: item.value,
      label: item.label
    }
  })

  export default {
    components: {
      Picker,
      List,
      ListItem
    },
    data () {
      return {
        value: ['05', '05-1', '05-1-3'],
        province: ['00'],
        district: cityData,
        provinces: [{value: '00', label: '请选择'}, ...provinces],
        extra: '请选择',
        sValue: ['2013', '夏'],
        col: 1,
        asyncValue: [],
        pickerValue: [],
        seasons: [
          [
            {
              label: '2013',
              value: '2013'
            },
            {
              label: '2014',
              value: '2014'
            }
          ],
          [
            {
              label: '春',
              value: '春'
            },
            {
              label: '夏',
              value: '夏'
            }
          ]
        ],
        data: [
          {
            value: 'bj',
            label: '北京市'
          },
          {
            value: 'zj',
            label: '浙江省'
          },
          {
            value: 'gd',
            label: '广东省'
          },
          {
            value: 'hn',
            label: '海南省'
          },
          {
            value: 'cq',
            label: '重庆市'
          },
          {
            value: 'sc',
            label: '四川省'
          }
        ]
      }
    },
    methods: {
      onOk (value) {
        console.log('ok', value)
      },
      onDismiss () {
        console.log('dismiss')
      },
      getSel (value) {
        this.extra = value
      },
      onChange (value) {
        this.value = value
        console.log(value)
      },
      onPickerChange (val) {
        console.log(val)
        let colNum = 1
        const d = this.data
        const asyncValue = val
        if (val[0] === 'zj') {
          d.forEach((i) => {
            if (i.value === 'zj') {
              colNum = 2
              if (!i.children) {
                i.children = [{
                  value: 'zj-nb',
                  label: '宁波'
                }, {
                  value: 'zj-hz',
                  label: '杭州'
                }]
                asyncValue.push('zj-nb')
              } else if (val[1] === 'zj-hz') {
                i.children.forEach((j) => {
                  if (j.value === 'zj-hz') {
                    j.children = [{
                      value: 'zj-hz-xh',
                      label: '西湖区'
                    }]
                    asyncValue.push('zj-hz-xh')
                  }
                })
                colNum = 3
              }
            }
          })
          // 数组没有响应式的改变
          this.data = []
          setTimeout(() => {
            this.data = d
          }, 0)
        } else {
          colNum = 1
        }
        this.col = colNum
        this.asyncValue = asyncValue
      },
      change () {
        console.log('change事件', this.value)
      },
      visibleChange (val1, val2) {
        console.log(val2)
      }
    },
    mounted () {
    }
  }
</script>

<style>
.test {
  position: relative;
  border-bottom: 0;
  display: flex;
  height: 45px;
  line-height: 45px;
}
.test:after {
  content: '';
  position: absolute;
  background-color: #ddd;
  display: block;
  z-index: 1;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transform-origin: 50% 100%;
  transform: scaleY(0.5);
}
</style>

props

属性	说明	类型	默认值
data	数据源	Array<{value, label, children: Array}>	-
value	选中的值，可用v-model双向绑定，格式是[value1, value2, value3]，对应数据源相应级层value	Array	-
format	格式化选中值的函数	Function (labels: string[]): any	(labels) => { return labels.join(','); }
cols	列数	Number	3
onChange	选中后的回调函数	Function (val): void	-
onPickerChange	每列数据选择变化后的回调函数	Function (val): void	-
onVisibleChange	弹出层状态变化后的回调函数	Function (visible: bool): void	-
itemStyle	picker-item的样式	Object	-
indicatorStyle	indicator的样式	Object	-
okText	选中按钮的文字	String	确定
dismissText	取消按钮的文字	String	取消
onOk	点击选中时执行的回调	Function (val): void	-
onDismiss	点击取消时执行的回调	Function	-
title	大标题	String	-
disabled	是否禁用	Boolean	false
cascade	是否级联	Boolean	true
locale	国际化, 可以覆盖全局LocaleProvider的配置	Object	-

插槽

名字	说明	作用域参数
list-item	通常是 ListItem	extra='props.extra' onClick='props.onClick'

events

事件名	说明	返回值
change	选中的值发生变化时触发的事件	value 当前选中的值
ok	点击确认按钮触发的事件	value 当前选中的值
dismiss	点击取消按钮触发的事件	-
visible-change	显隐状态变化触发的事件	value, visible(当前选中的值，显隐状态)
picker-change	每列数据变化触发的事件	value 当前选中的值

https://ladybirddev.github.io/ui-nuclear-mobile-demo/#/picker