Selector 列表选择器 - 《Mand Mobile v2.x 组件文档》

引入
代码演示
- 无需确认
- 确认模式
- 多选模式
- 自定义选项
- Check模式
API
- Selector Props
- Selector Events
- @choose({value, text, …})
- @confirm({value, text, …})
- @cancel()
- @show()
- @hide()
- Selector Slots
  - default
  - header
  - footer

Selector 列表选择器

Scan me!

用于弹出列表中选择一项

引入

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

代码演示

无需确认

Selector 列表选择器 - 图2

        <template>
  <div class="md-example-child md-example-child-selector md-example-child-selector-0">
    <md-field>
      <md-field-item
        title="普通模式"
        :content="selectorValue"
        @click="showSelector"
        arrow
        solid
      />
    </md-field>
    <md-selector
      v-model="isSelectorShow"
      default-value="2"
      :data="data[0]"
      max-height="320px"
      title="普通模式"
      large-radius
      @choose="onSelectorChoose"
    ></md-selector>
  </div>
</template>
<script>
import {Selector, Field, FieldItem} from 'mand-mobile'
export default {
  name: 'selector-demo',
  components: {
    [Selector.name]: Selector,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
  },
  data() {
    return {
      isSelectorShow: false,
      data: [
        [
          {
            value: '1',
            text: '选项一',
          },
          {
            value: '2',
            text: '选项二',
          },
          {
            value: '3',
            text: '选项三',
          },
          {
            value: '4',
            text: '选项四',
          },
          {
            value: '5',
            text: '选项五',
          },
          {
            value: '6',
            text: '选项六',
          },
          {
            value: '7',
            text: '选项七',
          },
          {
            value: '8',
            text: '选项八',
          },
          {
            value: '9',
            text: '选项九',
          },
          {
            value: '10',
            text: '选项十',
          },
        ],
      ],
      selectorValue: '选项二',
    }
  },
  methods: {
    showSelector() {
      this.isSelectorShow = true
    },
    onSelectorChoose({text}) {
      this.selectorValue = text
    },
  },
}
</script>

确认模式

Selector 列表选择器 - 图3

        <template>
  <div class="md-example-child md-example-child-selector md-example-child-selector-2">
    <md-field>
      <md-field-item
        title="确认模式"
        :content="selectorValue"
        @click="showSelector"
        arrow
        solid
      />
    </md-field>
    <md-selector
      v-model="isSelectorShow"
      :data="data[0]"
      min-height="320px"
      title="确认模式"
      okText="确认"
      large-radius
      @confirm="onSelectorConfirm"
    ></md-selector>
  </div>
</template>

<script>
import {Selector, Field, FieldItem} from 'mand-mobile'

export default {
  name: 'selector-demo',
  components: {
    [Selector.name]: Selector,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
  },
  data() {
    return {
      isSelectorShow: false,
      data: [
        [
          {
            value: '1',
            text: '选项一',
            brief: '选项一说明',
          },
          {
            value: '2',
            text: '选项二',
            brief: '选项二说明',
          },
          {
            value: '3',
            text: '选项三',
            brief: '选项三说明',
          },
          {
            value: '4',
            text: '选项四',
            brief: '选项四说明',
          },
        ],
      ],
      selectorValue: '',
    }
  },
  methods: {
    showSelector() {
      this.isSelectorShow = true
    },
    onSelectorConfirm({text}) {
      this.selectorValue = text
    },
  },
}

</script>

多选模式

Selector 列表选择器 - 图4

        <template>
  <div class="md-example-child md-example-child-selector md-example-child-selector-4">
    <md-field>
      <md-field-item
        title="多选模式"
        :content="selectorValue.join(',')"
        @click="showSelector"
        arrow
      />
    </md-field>
    <md-selector
      v-model="isSelectorShow"
      :data="data[0]"
      :defaultValue="selectorValue"
      title="多选模式"
      min-height="320px"
      okText="确定"
      cancelText="取消"
      large-radius
      @confirm="onSelectorConfirm"
      multi
    ></md-selector>
  </div>
</template>

<script>
import {Selector, Field, FieldItem} from 'mand-mobile'

export default {
  name: 'selector-demo',
  components: {
    [Selector.name]: Selector,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
  },
  data() {
    return {
      isSelectorShow: false,
      data: [
        [
          {
            value: '1',
            text: '选项一',
          },
          {
            value: '2',
            text: '选项二',
          },
          {
            value: '3',
            text: '选项三',
          },
          {
            value: '4',
            text: '选项四',
          },
        ],
      ],
      selectorValue: ['1'],
    }
  },
  methods: {
    showSelector() {
      this.isSelectorShow = true
    },
    onSelectorConfirm(array) {
      this.selectorValue = array
    },
  },
}

</script>

自定义选项

Selector 列表选择器 - 图5

        <template>
  <div class="md-example-child md-example-child-selector md-example-child-selector-1">
    <md-field>
      <md-field-item
        title="自定义"
        :content="selectorValue"
        @click="showSelector"
        arrow
        solid
      />
    </md-field>
    <md-selector
      v-model="isSelectorShow"
      :data="data[0]"
      hide-title-bar
      large-radius
      is-check
      iconSize="lg"
      @choose="onSelectorChoose"
    >
      <div class="selector-header" slot="header">
        Header Slot
      </div>
      <template slot-scope="{ option, index, selected }">
        <!-- <div class="md-selector-custom-brief">{{ option.text }}使用slot-scope</div> -->
        <div class="selector-item-body" :class="{disabled: option.disabled, selected}">
          <div class="selector-item-left">
            <span class="holder" v-text="option.value"></span>
          </div>
          <div class="selector-item-content">
            <p class="selector-item-title" v-text="option.text"></p>
            <p class="selector-item-brief" v-text="`${option.describe}-${index}`"></p>
          </div>
        </div>
      </template>
      <div class="selector-footer" slot="footer">
        Footer Slot
      </div>
    </md-selector>
  </div>
</template>

<script>
import {Selector, Field, FieldItem} from 'mand-mobile'

export default {
  name: 'selector-demo',
  components: {
    [Selector.name]: Selector,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
  },
  data() {
    return {
      isSelectorShow: false,
      data: [
        [
          {
            value: 'A',
            text: '选项一',
            describe: '使用slot-scope',
          },
          {
            value: 'B',
            text: '选项二',
            describe: '使用slot-scope',
          },
          {
            value: 'C',
            text: '选项三',
            describe: '使用slot-scope',
            disabled: true,
          },
          {
            value: 'D',
            text: '选项四',
            describe: '使用slot-scope',
          },
        ],
      ],
      selectorValue: '',
    }
  },
  methods: {
    showSelector() {
      this.isSelectorShow = true
    },
    onSelectorChoose({text}) {
      this.selectorValue = text
    },
  },
}

</script>

<style lang="stylus">
.md-example-child-selector-1
  .selector-header, .selector-footer
    padding 15px 40px
    font-size 16px
    color #ccc
  .selector-item-body
    display flex
    align-items center
    &.selected
      .selector-item-content
        color #2f86f6
    &.disabled
      opacity .3
    .selector-item-left
      flex-shrink 0
      margin-right 32px
      .holder
        display block
        width 88px
        height 88px
        border-radius 44px
        background-color #e6e6e6
        font-size 32px
        font-weight 500
        color #2f86f6
        text-align center
        line-height 88px
    .selector-item-content
      flex 1
      color #111a34
      font-size 32px
      line-height 1.2
      .selector-item-title
        line-height 1.2
      .selector-item-brief
        color #858b9c
        font-size 24px
        line-height 1.4
        margin-top 8px
</style>

Check模式

Selector 列表选择器 - 图6

        <template>
  <div class="md-example-child md-example-child-selector md-example-child-selector-3">
    <md-field>
      <md-field-item
        title="Check模式"
        :content="selectorValue"
        @click="showSelector"
        arrow
      />
    </md-field>
    <md-selector
      v-model="isSelectorShow"
      :data="data[0]"
      title="Check模式"
      min-height="320px"
      okText="确认"
      cancelText="取消"
      large-radius
      @confirm="onSelectorConfirm"
      is-check
    ></md-selector>
  </div>
</template>

<script>
import {Selector, Field, FieldItem} from 'mand-mobile'

export default {
  name: 'selector-demo',
  components: {
    [Selector.name]: Selector,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
  },
  data() {
    return {
      isSelectorShow: false,
      data: [
        [
          {
            value: '1',
            text: '选项一',
          },
          {
            value: '2',
            text: '选项二',
          },
          {
            value: '3',
            text: '选项三',
            disabled: true,
          },
          {
            value: '4',
            text: '选项四',
          },
        ],
      ],
      selectorValue: '',
    }
  },
  methods: {
    showSelector() {
      this.isSelectorShow = true
    },
    onSelectorConfirm({text}) {
      this.selectorValue = text
    },
  },
}

</script>

API

Selector Props

属性	说明	类型	默认值	备注
v-model	选择器是否可见	Boolean	false	-
data	数据源	Array<{value,text,disabled,…}>	`[]`	`text`可为`html`片段
default-value ^2.3.0+	选择器初始选中项的值	any	-	`multi`为`true`时，`default-value`应该传数组
title	选择器标题	String	-	-
describe	选择器描述	String	-	-
ok-text	选择器确认文案	String	-	若为空则为`确认模式`，即点击选项直接选择
cancel-text	选择器取消文案	String	`取消`	-
large-radius ^2.4.0+	选择器标题栏大圆角模式	Boolean	`false`	-
hide-title-bar ^2.4.0+	隐藏选择器标题栏	Boolean	`false`	-
mask-closable	点击蒙层是否可关闭弹出层	Boolean	`true`	-
is-check	是否有`check`图标	Boolean	`false`	仅`确认模式`
max-height	选择器内容区域最高高度, 超出后可滚动	Number/String	`auto`	-
min-height	选择器内容区域最小高度, 超出后可滚动	Number/String	`auto`	-
icon	选中项的图标	String	`checked`	-
icon-inverse	非选中项的图标	String	`check`	-
icon-disabled	禁用项的图标	String	`check-disabled`	-
icon-size	图标大小	String	`lg`	-
icon-svg	使用svg图标	Boolean	`false`	-
icon-position	图标位置	String	`right`	`left`, `right`
multi^2.3.0+	支持多选	Boolean	`false`	`multi`为`true`时，`ok-text`不能为空

Selector Events

@choose({value, text, …})

选择器选中某选项事件

@confirm({value, text, …})

选择器确认选中事件

@cancel()

选择器取消选中事件

@show()

选择器展示事件

@hide()

选择器隐藏事件

Selector Slots

default

<md-selector>
  <template slot-scope="{ option, index, selected }">
    <div class="md-selector-custom-title">Hello, {{ option.text }}</div>
  </template>
</md-selector>

header

顶部插槽 ^2.4.0+

底部插槽 ^2.4.0+