@7pound/we-select NPM

WeSelect

小程序表单组件-Select选择器：

此组件对比原生Picker解决了一下问题

picker选中后返回的是range的下标, 如果在reactice-data中存选中项的index view中显示选中值需要配置为 rangeindex.fieldName js中提交数据时也需要单独再次获取 rangeindex.key

使用Select组件支持model:value双向绑定的写法,也可以监听bindchange函数手动处理使用Select可以像使用web端select组件一样, 在reactice-data存入选中项的值 view中显示选中值就交给组件来处理 js中提交数据时可以直接取 reactice-data存入选中项的值

使用

安装 Select

npm install --save @7pound/we-select

构建npm
在需要使用 Select 的页面 page.json 中添加 Select 自定义组件配置

{
  "usingComponents": {
    "WeSelect": "@7pound/we-select"
  }
}

使用Select 组件

<WeSelect range="{{ range }}" value="{{ value }}" bindChange="handleSelectChange" />

Page({
  data: { value: '' },
  handleSelectChange(e) {
    console.log(e)
    this.setData({ value: e.detail.value })
  }
})

参数说明

参数	类型	是否必填	默认值	说明
value	string	是	null	初始值
index	number	否	null	初始下标
range	array<string\|AnyObject>	否	[]	候选项
range-key	strinng	否	null	当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value-key	string	否	null	当 range 是一个 Object Array 时，通过 value-key 来指定 Object 中 value 的值作为组件的选中值
disabled	boolean	否	false	禁用
placeholder	string	否	null	未选择时的缺省显示
placeholder-style	string	否	null	未选择时的缺省显示的样式

事件

事件名称	说明	回调参数
ready	lifetime-ready	无
detached	lifetime-detached	无
change	选中值发生变化时触发	detail\<value,index,current>
cancel	点击取消时触发	无

miniprogram select picker 小程序选择器

@everything-registry/sub-chunk-19

1.0.1

1 year ago

1.0.0

1 year ago