NutUI拾取器Picker

最新推荐文章于 2024-05-22 10:11:06 发布

熙冰

最新推荐文章于 2024-05-22 10:11:06 发布

阅读量2.4k

点赞数 1

分类专栏： UI组件库

本文链接：https://blog.csdn.net/melodystars/article/details/106929138

版权

UI组件库专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了NutUI框架中的Picker组件，包括其用法、功能特性和实际应用场景，帮助开发者更好地理解和使用这一组件来提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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官网