Picker 拾取器

提供多个选项集合供用户选择其中一项。

基本样式

  1. <nut-cell 
  2.   :show-icon="true" 
  3.   title="请选择城市" 
  4.   :desc="option" 
  5.   @click.native="openSwitch('isVisible')">
  6. </nut-cell>
  7. <nut-picker
  8.   :is-visible="isVisible"
  9.   :list-data="listData"
  10.   :default-value-data="defaultValueData"
  11.   @close="closeSwitch('isVisible')"
  12.   @confirm="confirm"
  13. ></nut-picker>
  1. export default {
  2.   data() {
  3.     return {
  4.       option: '请选择',
  5.       isVisible: false,
  6.       listData: [
  7.         [
  8.           {
  9.             label: 1,
  10.             value: '南京市',
  11.           },
  12.           {
  13.             label: 2,
  14.             value: '无锡市',
  15.           },
  16.           {
  17.             label: 3,
  18.             value: '海北藏族自治区',
  19.           },
  20.           {
  21.             label: 4,
  22.             value: '北京市',
  23.           },
  24.           {
  25.             label: 5,
  26.             value: '连云港市',
  27.           },
  28.           {
  29.             label: 6,
  30.             value: '浙江市',
  31.           },
  32.           {
  33.             label: 7,
  34.             value: '江苏市',
  35.           },
  36.           {
  37.             label: 8,
  38.             value: '大庆市',
  39.           },
  40.           {
  41.             label: 9,
  42.             value: '绥化市',
  43.           },
  44.           {
  45.             label: 10,
  46.             value: '潍坊市',
  47.           },
  48.           {
  49.             label: 11,
  50.             value: '请按市',
  51.           },
  52.           {
  53.             label: 12,
  54.             value: '乌鲁木齐市',
  55.           },
  56.         ],
  57.       ]
  58.       defaultValueData: null
  59.     }
  60.   },
  61.   mounted() {
  62.     this.defaultValueData = [this.listData[0][3]];
  63.   },
  64.   methods: {
  65.     openSwitch(param) {
  66.       this[`${param}`] = true;
  67.     },
  69.     closeSwitch(param) {
  70.       this[`${param}`] = false;
  71.     },
  73.     confirm(chooseData) {
  74.       this.option = `${chooseData[0].value}`;
  75.     }
  76.   }
  77. };

多列样式

  1. <nut-cell 
  2.   :show-icon="true" 
  3.   title="请选择时间" 
  4.   :desc="option1" 
  5.   @click.native="openSwitch('isVisible1')">
  6. </nut-cell>
  7. <nut-picker
  8.   :is-visible="isVisible1"
  9.   :list-data="listData1"
  10.   :default-value-data="defaultValueData1"
  11.   @close="closeSwitch('isVisible1')"
  12.   @confirm="confirm1"
  13. ></nut-picker>
  1. export default {
  2.   data() {
  3.     return {
  4.       option1: '请选择',
  5.       isVisible1: false,
  6.       listData1: [
  7.         ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  8.         ['上午', '下午', '晚上']
  9.       ],
  10.       defaultValueData1: null
  11.     }
  12.   },
  13.   mounted() {
  14.     this.defaultValueData1 = ['周四', '下午'];
  15.   },
  16.   methods: {
  17.     openSwitch(param) {
  18.       this[`${param}`] = true;
  19.     },
  21.     closeSwitch(param) {
  22.       this[`${param}`] = false;
  23.     },
  25.     confirm1(chooseData) {
  26.       this.option1 = `${chooseData[0]} ${chooseData[1]}`;
  27.     }
  28.   }
  29. };

多级联动

  1. <nut-cell 
  2.   :show-icon="true" 
  3.   title="请选择城市" 
  4.   :desc="cityCustmer" 
  5.   @click.native="openSwitch('isVisible2')">
  6. </nut-cell>
  7. <nut-picker
  8.   :is-visible="isVisible2"
  9.   :default-value-data="defaultValueData"
  10.   :list-data="custmerCityData"
  11.   @close="closeSwitch('isVisible2')"
  12.   @confirm="setChooseValueCustmer"
  13.   @choose="updateChooseValueCustmer"
  14.   @close-update="closeUpdateChooseValueCustmer"
  15. ></nut-picker>
  1. const APIData = [
  2.   {
  3.     label: 1,
  4.     array: [
  5.       {
  6.         label: 1,
  7.         value: '朝阳区'
  8.       },
  9.       {
  10.         label: 2,
  11.         value: '海淀区'
  12.       },
  13.       {
  14.         label: 3,
  15.         value: '大兴区'
  16.       },
  17.       {
  18.         label: 4,
  19.         value: '东城区'
  20.       },
  21.       {
  22.         label: 5,
  23.         value: '西城区'
  24.       },
  25.       {
  26.         label: 6,
  27.         value: '丰台区'
  28.       }
  29.     ]
  30.   },
  31.   {
  32.     label: 2,
  33.     array: [
  34.       {
  35.         label: 1,
  36.         value: '黄浦区'
  37.       },
  38.       {
  39.         label: 2,
  40.         value: '长宁区'
  41.       },
  42.       {
  43.         label: 3,
  44.         value: '普陀区'
  45.       },
  46.       {
  47.         label: 4,
  48.         value: '杨浦区'
  49.       },
  50.       {
  51.         label: 5,
  52.         value: '浦东新区'
  53.       }
  54.     ]
  55.   }
  56. ];
  57. export default {
  58.   data() {
  59.     return {
  60.       option: '请选择',
  61.       isVisible: false,
  62.       listData: [
  63.         [
  64.           {
  65.             label: 1,
  66.             value: '南京市',
  67.           },
  68.           {
  69.             label: 2,
  70.             value: '无锡市',
  71.           },
  72.           {
  73.             label: 3,
  74.             value: '海北藏族自治区',
  75.           },
  76.           {
  77.             label: 4,
  78.             value: '北京市',
  79.           },
  80.           {
  81.             label: 5,
  82.             value: '连云港市',
  83.           },
  84.           {
  85.             label: 6,
  86.             value: '浙江市',
  87.           },
  88.           {
  89.             label: 7,
  90.             value: '江苏市',
  91.           },
  92.           {
  93.             label: 8,
  94.             value: '大庆市',
  95.           },
  96.           {
  97.             label: 9,
  98.             value: '绥化市',
  99.           },
  100.           {
  101.             label: 10,
  102.             value: '潍坊市',
  103.           },
  104.           {
  105.             label: 11,
  106.             value: '请按市',
  107.           },
  108.           {
  109.             label: 12,
  110.             value: '乌鲁木齐市',
  111.           },
  112.         ],
  113.       ]
  114.       defaultValueData: null,
  115.       option1: '请选择',
  116.       isVisible1: false,
  117.       listData1: [
  118.         ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  119.         ['上午', '下午', '晚上']
  120.       ],
  121.       defaultValueData1: null,
  122.       option3: '请选择',
  123.       isVisible3: false,
  124.       cityCustmer: '请选择',
  125.       isVisible2: false,
  126.       custmerCityData: [
  127.         [
  128.           {
  129.             label: 1,
  130.             value: '北京'
  131.           },
  132.           {
  133.             label: 2,
  134.             value: '上海'
  135.           }
  136.         ]
  137.       ]
  138.     };
  139.   },
  140.   mounted() {
  141.     this.defaultValueData = [this.listData[0][3]];
  142.     this.defaultValueData1 = ['周四', '下午'];
  143.   },
  144.   methods: {
  145.     openSwitch(param) {
  146.       this[`${param}`] = true;
  147.     },
  149.     closeSwitch(param) {
  150.       this[`${param}`] = false;
  151.     },
  153.     setChooseValueCustmer(chooseData) {
  154.       var str = chooseData.map(item => item.value).join('-');
  155.       this.cityCustmer = str;
  156.     },
  158.     closeUpdateChooseValueCustmer(self, chooseData) {
  159.       //此处模拟查询API，如果数据缓存了不需要再重新请求
  160.       setTimeout(() => {
  161.         let { label, value } = chooseData[0];
  162.         var resItems = APIData.find(item => item.label == label);
  163.         if (resItems && resItems.array.length) {
  164.           this.$set(this.custmerCityData, 1, resItems.array);
  166.           // 复原位置
  167.           self.updateChooseValue(self, 0, chooseData[0]);
  168.           self.updateChooseValue(self, 1, chooseData[1]);
  169.         }
  170.       }, 100);
  171.     },
  173.     updateChooseValueCustmer(self, index, resValue, cacheValueData) {
  174.       // 本demo为二级联动，所以限制只有首列变动的时候触发事件
  175.       if (index === 0) {
  176.         //此处模拟查询API，如果数据缓存了不需要再重新请求
  177.         let { label, value } = resValue;
  178.         setTimeout(() => {
  179.           var resItems = APIData.find(item => item.label == label);
  180.           if (resItems && resItems.array.length) {
  181.             this.$set(this.custmerCityData, 1, resItems.array);
  182.             // 更新第二列位置
  183.             self.updateChooseValue(self, index + 1, this.custmerCityData[1][0]);
  184.           }
  185.         }, 100);
  186.       }
  187.     }
  188.   }
  189. };

带标题样式

  1. <nut-cell 
  2.   :show-icon="true" 
  3.   title="请选择城市" 
  4.   :desc="option3" 
  5.   @click.native="openSwitch('isVisible3')">
  6. </nut-cell>
  7. <nut-picker
  8.   :is-visible="isVisible3"
  9.   :list-data="listData"
  10.   title="请选择城市"
  11.   @close="closeSwitch('isVisible3')"
  12.   @confirm="confirm3"
  13. ></nut-picker>
  1. export default {
  2.   data() {
  3.     return {
  4.       option3: '请选择',
  5.       isVisible3: false,
  6.       listData: [
  7.         [
  8.           {
  9.             label: 1,
  10.             value: '南京市'
  11.           },
  12.           {
  13.             label: 2,
  14.             value: '无锡市'
  15.           },
  16.           {
  17.             label: 3,
  18.             value: '海北藏族自治区'
  19.           },
  20.           {
  21.             label: 4,
  22.             value: '北京市'
  23.           },
  24.           {
  25.             label: 5,
  26.             value: '连云港市'
  27.           },
  28.           {
  29.             label: 6,
  30.             value: '浙江市'
  31.           }
  32.         ]
  33.       ]
  34.     }
  35.   },
  36.   mounted() {
  37.     this.defaultValueData = [this.listData[0][3]];
  38.   },
  39.   methods: {
  40.     openSwitch(param) {
  41.       this[`${param}`] = true;
  42.     },
  44.     closeSwitch(param) {
  45.       this[`${param}`] = false;
  46.     },
  48.     confirm3(chooseData) {
  49.       this.option3 = `${chooseData[0].value}`;
  50.     }
  51.   }
  52. };

Prop

字段说明类型默认值
is-visible是否可见Booleanfalse
custom-class-name自定义classStringnull
title设置标题Stringnull
list-data列表数据Array[]
default-value-data默认选中Array[]

Event

字段说明回调参数
confirm点击确认按钮时候回调返回选中值
choose每一列值变更时调用依次返回this、改变的列数，改变值，当前选中值
chclose-update联动时，关闭时回调依次返回this、当前选中值
close关闭时触发-

Picker 拾取器 - 图1