Picker 选择器 APP

该方法或组件支持移动端小程序调用

PC

该方法或组件支持桌面端小程序调用

<template>
  <List>
    <span slot="header">星期选择</span>
    <Item arrow="horizontal" @onClick="getStart">
      <div slot="title">开始</div>
      <div slot="content">{{start}}</div>
    </Item>
  </List>

  <Picker
    :visible.sync = "startPickerShow"
    :columns="startCol"
    ref="picker"
    :title="titleText"
    @confirm="startConfirm"
  ></Picker>
</template>
<script>
export default {
  data () {
    return {
      startPickerShow: false,
      start: '',
      dayColumns: [
        {
          values: [
            '星期一',
            '星期二',
            '星期三',
            '星期四',
            '星期五',
            '星期六',
            '星期日'
          ],
          defaultIndex: 0
        },
        {
          values: [
            '上午',
            '下午'
          ],
          defaultIndex: 0
        }
      ]
    }
  },
  methods: {
    getStart () {
      this.startPickerShow = true
    },
    startConfirm (picker) {
      this.startDate = picker.getValues().toString()
    }
  }
}
</script>

<template>
  <List>
    <span slot="header">地址选择器：默认</span>
    <Item class="test-style" arrow="horizontal" @onClick="handleClick">
      <div slot="title">地址</div>
      <div slot="content">{{ pickedAddress }}</div>
    </Item>
  </List>
  <Picker
    ref="addressPicker"
    title="省份-城市-区域选择器"
    :visible.sync = "addressPickerShow"
    :columns="addressColumns"
    @confirm="addressConfirm"
    @change="onAddressChange"
  />
</template>
<script>
const provinces = ['广东省'];

// 获取某一省下的市
const getCities = (province) => {
  let cities = [];
  switch (province) {
    case '广东省':
      cities = ['广州市', '深圳市'];
      break;
    default:
      break;
  }
  return cities;
}

// 获取某一市下的区/县
function getAreas (province, city) {
  let areas = []
  if (province === '广东省') {
    switch(city) {
      case '广州市':
        areas = ['荔湾区', '越秀区', '海珠区', '天河区', '白云区', '黄埔区', '番禺区', '花都区', '南沙区', '从化区', '增城区']
        break;
      case '深圳市':
        areas = ['罗湖区', '福田区', '南山区', '宝安区', '龙岗区', '盐田区', '龙华区', '坪山区', '光明区'];
      break;
    }
  }
  return areas;
}

export default {
  data () {
    return {
      addressPickerShow: false,
      titleText: 'titleText',
      addressColumns: [
        {
          values: provinces
        },
        {
          values: getCities('广东省')
        },
        {
          values: getAreas('广东省', '广州市')
        }
      ],
    }
  },
  methods: {
    handleClick () {
      this.addressPickerShow = true
    },
    addressConfirm (picker) {
      this.pickTime = picker.getValues().toString()
    },
    onAddressChange (picker, addressValues, slotIndex) {
      if (slotIndex === 0) {
        const cities = getCities(addressValues[0])
        picker.setColumnValues(1, cities)
        picker.setColumnValues(2, getAreas(addressValues[0], cities[0]))
      } else if (slotIndex === 1) {
        picker.setColumnValues(2, getAreas(addressValues[0], addressValues[1]))
      }
    }
  }
}
</script>