PopupSelect 列表

使用指南

import { Popup, PopupSelect } from 'fs-ui'

export default {
  components: {
    fsPopup: Popup,
    fsPopupSelect: PopupSelect
  }
}

1
2
3
4
5
6
7
8

代码演示

基础用法

<fs-button @click="toggle(1)">选择</fs-button>

<fs-popup v-model="show" position="bottom">
  <fs-popup-select v-model="selectedValue" :options="options" @selected="selected" @cancel="selected($event, 1"></fs-popup-select>
</fs-popup>

1
2
3
4
5

指定labelKey

<fs-button @click="toggle(2)">选择</fs-button>

<fs-popup v-model="showSecend" position="bottom">
  <fs-popup-select v-model="selectedValue2" :options="options" labelKey="value" @selected="selected" @cancel="selected($event, 2)" hideCancel></fs-popup-select>
</fs-popup>

1
2
3
4
5

export default {
  data () {
    return {
      show: false,
      showSecend: false,
      selectedValue: null,
      selectedValue2: null
      options: [
        {
          value: '1',
          label: '选项一',
          disabled: true
        },
        {
          value: '2',
          label: '选项二'
        },
        {
          value: '3',
          label: '选项三'
        }
      ]
    }
  },
  methods: {
    selected (item, index) {
      index === 1 ? this.show = false : this.showSecend = false
    },
    toggle (index) {
      index === 1 ? this.show = true : this.showSecend = true
    }
  }
}

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

PopupSelect

属性

参数	说明	类型	默认值
v-model	双向绑定	Object	-
options	选项,需要包含唯一的label值	Arrary	-
label-key	指定label的值	String	label
hide-cancel	隐藏取消按钮	Boolean	-

事件

event	说明	返回值
selected	选择	选择的数据对象
cancel	取消	event

← Popup 弹出层 Grid 九宫格布局 →