Selector 列表选择器

Scan me!

用于弹出列表中选择一项

引入

  1. import { Selector } from 'mand-mobile'
  2. 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>
  23. <script>
  24. import {Selector, Field, FieldItem} from 'mand-mobile'
  25. export default {
  26. name: 'selector-demo',
  27. components: {
  28. [Selector.name]: Selector,
  29. [Field.name]: Field,
  30. [FieldItem.name]: FieldItem,
  31. },
  32. data() {
  33. return {
  34. isSelectorShow: false,
  35. data: [
  36. [
  37. {
  38. text: '选项一',
  39. },
  40. {
  41. text: '选项二',
  42. },
  43. {
  44. text: '选项三',
  45. },
  46. {
  47. text: '选项四',
  48. },
  49. {
  50. text: '选项五',
  51. },
  52. {
  53. text: '选项六',
  54. },
  55. {
  56. text: '选项七',
  57. },
  58. {
  59. text: '选项八',
  60. },
  61. {
  62. text: '选项九',
  63. },
  64. {
  65. text: '选项十',
  66. },
  67. ],
  68. ],
  69. selectorValue: '选项二',
  70. }
  71. },
  72. methods: {
  73. showSelector() {
  74. this.isSelectorShow = true
  75. },
  76. onSelectorChoose({text}) {
  77. this.selectorValue = text
  78. },
  79. },
  80. }
  81. </script>

确认模式

  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>
  24. <script>
  25. import {Selector, Field, FieldItem} from 'mand-mobile'
  26. export default {
  27. name: 'selector-demo',
  28. components: {
  29. [Selector.name]: Selector,
  30. [Field.name]: Field,
  31. [FieldItem.name]: FieldItem,
  32. },
  33. data() {
  34. return {
  35. isSelectorShow: false,
  36. data: [
  37. [
  38. {
  39. text: '选项一',
  40. },
  41. {
  42. text: '选项二',
  43. },
  44. {
  45. text: '选项三',
  46. },
  47. {
  48. text: '选项四',
  49. },
  50. ],
  51. ],
  52. selectorValue: '',
  53. }
  54. },
  55. methods: {
  56. showSelector() {
  57. this.isSelectorShow = true
  58. },
  59. onSelectorConfirm({text}) {
  60. this.selectorValue = text
  61. },
  62. },
  63. }
  64. </script>

自定义选项

  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>
  28. <script>
  29. import {Selector, Field, FieldItem} from 'mand-mobile'
  30. export default {
  31. name: 'selector-demo',
  32. components: {
  33. [Selector.name]: Selector,
  34. [Field.name]: Field,
  35. [FieldItem.name]: FieldItem,
  36. },
  37. data() {
  38. return {
  39. isSelectorShow: false,
  40. data: [
  41. [
  42. {
  43. text: '选项一',
  44. },
  45. {
  46. text: '选项二',
  47. },
  48. {
  49. text: '选项三',
  50. },
  51. ],
  52. ],
  53. selectorValue: '选项二',
  54. }
  55. },
  56. methods: {
  57. showSelector() {
  58. this.isSelectorShow = true
  59. },
  60. optionRender({text}) {
  61. return `<div class="md-selector-custom-title">${text}</div><div class="md-selector-custom-brief">${text}使用option-render的的自定义描述</div>`
  62. },
  63. onSelectorChoose({text}) {
  64. this.selectorValue = text
  65. },
  66. },
  67. }
  68. </script>
  69. <style lang="stylus">
  70. .md-example-child-selector-1
  71. .md-selector-custom-title
  72. font-size 28px
  73. .md-selector-custom-brief
  74. font-size 20px
  75. color #999
  76. </style>

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>
  25. <script>
  26. 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. ],
  53. selectorValue: '',
  54. }
  55. },
  56. methods: {
  57. showSelector() {
  58. this.isSelectorShow = true
  59. },
  60. onSelectorConfirm({text}) {
  61. this.selectorValue = text
  62. },
  63. },
  64. }
  65. </script>

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()

选择器隐藏事件