Selector 列表选择器

Scan me!

用于弹出列表中选择一项

引入

  1. import { Selector } from 'mand-mobile'
  3. Vue.component(Selector.name, Selector)

代码演示

无需确认

  1. <template>
  2.   <div class="md-example-child md-example-child-selector md-example-child-selector-0">
  3.     <md-field>
  4.       <md-field-item
  5.         name="name"
  6.         title="普通模式"
  7.         arrow="arrow-right"
  8.         align="right"
  9.         :value="selectorValue"
  10.         @click.native="showSelector">
  11.       </md-field-item>
  12.     </md-field>
  13.     <md-selector
  14.       v-model="isSelectorShow"
  15.       :data="data[0]"
  16.       :default-index="1"
  17.       :invalid-index="2"
  18.       title="普通模式"
  19.       @choose="onSelectorChoose($event)"
  20.     ></md-selector>
  21.   </div>
  22. </template>
  24. <script>
  25. import {Selector, Field, FieldItem} from 'mand-mobile'
  27. export default {
  28.   name: 'selector-demo',
  29.   components: {
  30.     [Selector.name]: Selector,
  31.     [Field.name]: Field,
  32.     [FieldItem.name]: FieldItem,
  33.   },
  34.   data() {
  35.     return {
  36.       isSelectorShow: false,
  37.       data: [
  38.         [
  39.           {
  40.             text: '选项一',
  41.           },
  42.           {
  43.             text: '选项二',
  44.           },
  45.           {
  46.             text: '选项三',
  47.           },
  48.           {
  49.             text: '选项四',
  50.           },
  51.           {
  52.             text: '选项五',
  53.           },
  54.           {
  55.             text: '选项六',
  56.           },
  57.           {
  58.             text: '选项七',
  59.           },
  60.           {
  61.             text: '选项八',
  62.           },
  63.           {
  64.             text: '选项九',
  65.           },
  66.           {
  67.             text: '选项十',
  68.           },
  69.         ],
  70.       ],
  71.       selectorValue: '选项二',
  72.     }
  73.   },
  74.   methods: {
  75.     showSelector() {
  76.       this.isSelectorShow = true
  77.     },
  78.     onSelectorChoose({text}) {
  79.       this.selectorValue = text
  80.     },
  81.   },
  82. }
  84. </script>
  85.

确认模式

  1. <template>
  2.   <div class="md-example-child md-example-child-selector md-example-child-selector-2">
  3.     <md-field>
  4.       <md-field-item
  5.         name="name"
  6.         title="确认模式"
  7.         arrow="arrow-right"
  8.         align="right"
  9.         :value="selectorValue"
  10.         @click.native="showSelector">
  11.       </md-field-item>
  12.     </md-field>
  13.     <md-selector
  14.       v-model="isSelectorShow"
  15.       :data="data[0]"
  16.       :default-index="1"
  17.       title="确认模式"
  18.       okText="确认"
  19.       cancelText="取消"
  20.       @confirm="onSelectorConfirm($event)"
  21.     ></md-selector>
  22.   </div>
  23. </template>
  25. <script>
  26. import {Selector, Field, FieldItem} from 'mand-mobile'
  28. export default {
  29.   name: 'selector-demo',
  30.   components: {
  31.     [Selector.name]: Selector,
  32.     [Field.name]: Field,
  33.     [FieldItem.name]: FieldItem,
  34.   },
  35.   data() {
  36.     return {
  37.       isSelectorShow: false,
  38.       data: [
  39.         [
  40.           {
  41.             text: '选项一',
  42.           },
  43.           {
  44.             text: '选项二',
  45.           },
  46.           {
  47.             text: '选项三',
  48.           },
  49.           {
  50.             text: '选项四',
  51.           },
  52.         ],
  53.       ],
  54.       selectorValue: '',
  55.     }
  56.   },
  57.   methods: {
  58.     showSelector() {
  59.       this.isSelectorShow = true
  60.     },
  61.     onSelectorConfirm({text}) {
  62.       this.selectorValue = text
  63.     },
  64.   },
  65. }
  67. </script>
  68.

自定义选项

  1. <template>
  2.   <div class="md-example-child md-example-child-selector md-example-child-selector-1">
  3.     <md-field>
  4.       <md-field-item
  5.         name="name"
  6.         title="自定义选项"
  7.         arrow="arrow-right"
  8.         align="right"
  9.         :value="selectorValue"
  10.         @click.native="showSelector">
  11.       </md-field-item>
  12.     </md-field>
  13.     <md-selector
  14.       v-model="isSelectorShow"
  15.       :data="data[0]"
  16.       title="自定义选项"
  17.       cancelText="取消"
  18.       :optionRender="optionRender"
  19.       @choose="onSelectorChoose($event)"
  20.     >
  21.       <!-- <template slot-scope="{ option }">
  22.         <div class="md-selector-custom-title" v-text="option.text"></div>
  23.         <div class="md-selector-custom-brief">{{ option.text }}使用slot-scooped的自定义描述</div>
  24.       </template> -->
  25.     </md-selector>
  26.   </div>
  27. </template>
  29. <script>
  30. import {Selector, Field, FieldItem} from 'mand-mobile'
  32. export default {
  33.   name: 'selector-demo',
  34.   components: {
  35.     [Selector.name]: Selector,
  36.     [Field.name]: Field,
  37.     [FieldItem.name]: FieldItem,
  38.   },
  39.   data() {
  40.     return {
  41.       isSelectorShow: false,
  42.       data: [
  43.         [
  44.           {
  45.             text: '选项一',
  46.           },
  47.           {
  48.             text: '选项二',
  49.           },
  50.           {
  51.             text: '选项三',
  52.           },
  53.         ],
  54.       ],
  55.       selectorValue: '选项二',
  56.     }
  57.   },
  58.   methods: {
  59.     showSelector() {
  60.       this.isSelectorShow = true
  61.     },
  62.     optionRender({text}) {
  63.       return `<div class="md-selector-custom-title">${text}</div><div class="md-selector-custom-brief">${text}使用option-render的的自定义描述</div>`
  64.     },
  65.     onSelectorChoose({text}) {
  66.       this.selectorValue = text
  67.     },
  68.   },
  69. }
  71. </script>
  73. <style lang="stylus">
  74. .md-example-child-selector-1
  75.   .md-selector-custom-title
  76.     font-size 28px
  77.   .md-selector-custom-brief
  78.     font-size 20px
  79.     color #999
  80. </style>
  81.

Check模式

  1. <template>
  2.   <div class="md-example-child md-example-child-selector md-example-child-selector-3">
  3.     <md-field>
  4.       <md-field-item
  5.         name="name"
  6.         title="Check模式"
  7.         arrow="arrow-right"
  8.         align="right"
  9.         :value="selectorValue"
  10.         @click.native="showSelector">
  11.       </md-field-item>
  12.     </md-field>
  13.     <md-selector
  14.       v-model="isSelectorShow"
  15.       :data="data[0]"
  16.       :invalid-index="2"
  17.       title="Check模式"
  18.       okText="确认"
  19.       cancelText="取消"
  20.       @confirm="onSelectorConfirm($event)"
  21.       is-check
  22.     ></md-selector>
  23.   </div>
  24. </template>
  26. <script>
  27. import {Selector, Field, FieldItem} from 'mand-mobile'
  29. export default {
  30.   name: 'selector-demo',
  31.   components: {
  32.     [Selector.name]: Selector,
  33.     [Field.name]: Field,
  34.     [FieldItem.name]: FieldItem,
  35.   },
  36.   data() {
  37.     return {
  38.       isSelectorShow: false,
  39.       data: [
  40.         [
  41.           {
  42.             text: '选项一',
  43.           },
  44.           {
  45.             text: '选项二',
  46.           },
  47.           {
  48.             text: '选项三',
  49.           },
  50.           {
  51.             text: '选项四',
  52.           },
  53.         ],
  54.       ],
  55.       selectorValue: '',
  56.     }
  57.   },
  58.   methods: {
  59.     showSelector() {
  60.       this.isSelectorShow = true
  61.     },
  62.     onSelectorConfirm({text}) {
  63.       this.selectorValue = text
  64.     },
  65.   },
  66. }
  68. </script>
  69.

API

Selector Props

属性说明类型默认值备注
v-model选择器是否可见Booleanfalse-
data数据源Array<{value,text,…}>[]label可为html片段
default-index选择器初始选中项索引Number--
invalid-index选择器不可用选项索引Number--
title选择器标题String--
ok-text选择器确认文案String-若为空则为确认模式，即点击选项直接选择
cancel-text选择器取消文案String取消-
mask-closable1.3.0+点击蒙层是否可关闭弹出层Booleantrue-
is-check是否有check图标Booleanfalse仅确认模式
option-render返回各选项渲染内容Function({value, text ,…}):String-vue 2.1.0+可使用slot-scope，参考Radio
max-height1.3.0+选择器内容区域最高高度, 超出后可滚动Number400单位px

Selector Events

@choose({value, text, …})

选择器选中某选项事件

@confirm({value, text, …})

选择器确认选中事件

@cancel()

选择器取消选中事件

@show()

选择器展示事件

@hide()

选择器隐藏事件