NutUI拾取器Picker

<template>
  <div>
    <nut-cell @click-cell="clickEvent('isVisible')" title="选择" :desc="selectValue?selectValue:'请选择'" :show-icon="true"></nut-cell>
    <nut-picker
      :is-visible="isVisible"
      :list-data="listValueData"
      title="请选择"
      :default-value-data="selectValue?[selectValue]:null"
      @close="switchPicker('isVisible')"
      @confirm="setChooseValue">
    </nut-picker>
  </div>
</template>

<script>
export default {
  name: 'picker',
  data () {
    return {
      isVisible: false,
      selectValue: '',
      listValueData: [],
      listData: []
    }
  },
  created () {
    this.listData = [{
      label: '选项一',
      value: 1
    }, {
      label: '选项二',
      value: 2
    }, {
      label: '选项三',
      value: 3
    }]
    let list = []
    this.listData.map(item => {
      list.push(item.label)
    })
    this.listValueData = [list]
  },
  methods: {
    clickEvent (param) {
      this[`${param}`] = !this[`${param}`]
    },
    setChooseValue (value) {
      this.selectValue = value[0]
      let num = this.listData.find(item => {
        return item.label === value[0]
      }).value
      this.$toast.text('选择的value:' + num)
    },
    switchPicker (param) {
      this[`${param}`] = !this[`${param}`]
    }
  }
}
</script>

参考：NutUI官网