fs-weapp/popup-select

PopupSelect 列表

使用指南

在 app.json 或 index.json 中引入popup-select 组件

{
  "usingComponents": {
    "fs-popup-select": "path/components/popup-select/index"
  }
}
1
2
3
4
5

代码演示

  • 基础用法
<fs-popup-select
  show="{{show1}}"
  value="{{value1}}"
  options="{{options}}"
  data-index="1"
  bind:selected="handleSelected"
  bind:close="handleClose"
  bind:cancel="handleClose"/>
1
2
3
4
5
6
7
8
  • 指定labelKey
<fs-popup-select
  show="{{show2}}"
  value="{{value2}}"
  options="{{options}}"
  label-key="value"
  data-index="2"
  bind:selected="handleSelected"
  bind:close="handleClose"
  bind:cancel="handleClose"
  hideCancel/>
1
2
3
4
5
6
7
8
9
10
Page({

  /**
   * 页面的初始数据
   */
  data: {
    show1: false,
    show2: false,
    value1: null,
    value2: null,
    options: [
      {
        value: '1',
        label: '选项一',
        disabled: true
      },
      {
        value: '2',
        label: '选项二'
      },
      {
        value: '3',
        label: '选项三'
      }
    ]
  },

  handleTap(e) {
    let key = 'show' + e.currentTarget.dataset.index
    this.setData({
      [key]: true
    })
  },
  handleClose (e) {
    let key = 'show' + e.currentTarget.dataset.index
    this.setData({
      [key]: false
    })
  },
  handleSelected (e) {
    let key = 'value' + e.currentTarget.dataset.index
    this.setData({
      [key]: e.detail
    })
    this.handleClose(e)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

PopupSelect

属性

参数 说明 类型 默认值
show 是否显示 Boolean -
value 当前选中项 Object -
options 选项,需要包含唯一的label值 Arrary -
label-key 指定label的值 String label
hide-cancel 隐藏取消按钮 Boolean -

事件

event 说明 返回值
selected 选择 选择的数据对象
close 关闭事件 event
cancel 取消 event

← Grid 九宫格布局 →