CellPicker 选择器

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-cell-picker": "wuss-weapp/w-cell-picker/index",
  3. }

视频演示

代码演示

  1. <w-cell-group>
  2.   <w-cell-picker
  3.      label="单选模式"
  4.      title="请选择性别"
  5.      options="{{ options2 }}"
  6.      defaultValue="男"
  7.    bind:onSelect="handleSelect"
  8.     />
  9.   <w-cell-picker
  10.      label="单选模式2"
  11.      title="请选择续费时间"
  12.      options="{{ options4 }}"
  13.      defaultValue="60"
  14.    bind:onSelect="handleSelect"
  15.     />
  16.   <w-cell-picker
  17.      label="多选联动模式"
  18.    placeholder="请选择语言"
  19.      options="{{ options3 }}"
  20.      title="请选择语言"
  21.    bind:onSelect="handleSelect"
  22.     />
  23. </w-cell-group>
  1. data: {
  2.   options2: ['男', '女'],
  3.   options4: [{ key: '30天', value: 30 },{ key: '60天', value: 60 },{ key: '90天', value: 90 },{ key: '1年', value: 365 },{ key: '10年', value: 3650 },],
  4.   options3: [
  5.     [{
  6.         key: '前端',
  7.         value: '0'
  8.       },
  9.       {
  10.         key: '后端',
  11.         value: '1'
  12.       },
  13.     ],
  14.     [{
  15.         key: 'Javascript',
  16.         value: '2',
  17.         parent: '0'
  18.       },
  19.       {
  20.         key: 'css3',
  21.         value: '3',
  22.         parent: '0'
  23.       },
  24.       {
  25.         key: 'html5',
  26.         value: '4',
  27.         parent: '0'
  28.       },
  29.       {
  30.         key: 'Java',
  31.         value: '5',
  32.         parent: '1'
  33.       },
  34.       {
  35.         key: 'PHP',
  36.         value: '6',
  37.         parent: '1'
  38.       },
  39.       {
  40.         key: 'Python',
  41.         value: '7',
  42.         parent: '1'
  43.       },
  44.     ],
  45.   ],
  46. },

API

Attribute 属性

属性说明类型默认值
options传入的选项值,当值为[[],[],[]]格式时为联动模式,传入格式为[{},{},{}]为单例模式Array[]
options.keyoptions里的对象属性key表示键值,显示在picker上的值String-
options.valueoptions里的对象属性value表示值,会返回给最终结果String-
defaultValue默认值 可以支持 key valueArray[]
cancelTextColor取消文本颜色String-
cancelText取消文本文字String'取消'
title标题String[]
confirmTextColor确认文本颜色String-
confirmText确认文本文字String'确认'
showValue是否用value而不是key展示Booleanfalse
defaultKeyonChange和onSelect事件返回的值是何种格式 [value,value…] [key,key,…]String'value'
shouldValueUpdate指定该方法来处理何时需要更新值。类似React的shouldComponentUpdated()Function():boolean => true

Event 事件

事件名说明参数
onChangepicker值改变时触发e.detail.value
onSelect点击确认时触发e.detail.value
onOpenpopup弹出时触发-
onCancelpopup收起时触发-

Slot 插槽

名称说明

Class 自定义类名

类名说明
wuss-class根节点样式类