Selector 列表选择器
用于弹出列表中选择一项
引入
import { Selector } from 'mand-mobile'
Vue.component(Selector.name, Selector)
代码演示
无需确认
<template>
<div class="md-example-child md-example-child-selector md-example-child-selector-0">
<md-field>
<md-field-item
name="name"
title="普通模式"
arrow="arrow-right"
align="right"
:value="selectorValue"
@click.native="showSelector">
</md-field-item>
</md-field>
<md-selector
v-model="isSelectorShow"
:data="data[0]"
:default-index="1"
:invalid-index="2"
title="普通模式"
@choose="onSelectorChoose($event)"
></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: [
[
{
text: '选项一',
},
{
text: '选项二',
},
{
text: '选项三',
},
{
text: '选项四',
},
{
text: '选项五',
},
{
text: '选项六',
},
{
text: '选项七',
},
{
text: '选项八',
},
{
text: '选项九',
},
{
text: '选项十',
},
],
],
selectorValue: '选项二',
}
},
methods: {
showSelector() {
this.isSelectorShow = true
},
onSelectorChoose({text}) {
this.selectorValue = text
},
},
}
</script>
确认模式
<template>
<div class="md-example-child md-example-child-selector md-example-child-selector-2">
<md-field>
<md-field-item
name="name"
title="确认模式"
arrow="arrow-right"
align="right"
:value="selectorValue"
@click.native="showSelector">
</md-field-item>
</md-field>
<md-selector
v-model="isSelectorShow"
:data="data[0]"
:default-index="1"
title="确认模式"
okText="确认"
cancelText="取消"
@confirm="onSelectorConfirm($event)"
></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: [
[
{
text: '选项一',
},
{
text: '选项二',
},
{
text: '选项三',
},
{
text: '选项四',
},
],
],
selectorValue: '',
}
},
methods: {
showSelector() {
this.isSelectorShow = true
},
onSelectorConfirm({text}) {
this.selectorValue = text
},
},
}
</script>
自定义选项
<template>
<div class="md-example-child md-example-child-selector md-example-child-selector-1">
<md-field>
<md-field-item
name="name"
title="自定义选项"
arrow="arrow-right"
align="right"
:value="selectorValue"
@click.native="showSelector">
</md-field-item>
</md-field>
<md-selector
v-model="isSelectorShow"
:data="data[0]"
title="自定义选项"
cancelText="取消"
:optionRender="optionRender"
@choose="onSelectorChoose($event)"
>
<!-- <template slot-scope="{ option }">
<div class="md-selector-custom-title" v-text="option.text"></div>
<div class="md-selector-custom-brief">{{ option.text }}使用slot-scooped的自定义描述</div>
</template> -->
</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: [
[
{
text: '选项一',
},
{
text: '选项二',
},
{
text: '选项三',
},
],
],
selectorValue: '选项二',
}
},
methods: {
showSelector() {
this.isSelectorShow = true
},
optionRender({text}) {
return `<div class="md-selector-custom-title">${text}</div><div class="md-selector-custom-brief">${text}使用option-render的的自定义描述</div>`
},
onSelectorChoose({text}) {
this.selectorValue = text
},
},
}
</script>
<style lang="stylus">
.md-example-child-selector-1
.md-selector-custom-title
font-size 28px
.md-selector-custom-brief
font-size 20px
color #999
</style>
Check模式
<template>
<div class="md-example-child md-example-child-selector md-example-child-selector-3">
<md-field>
<md-field-item
name="name"
title="Check模式"
arrow="arrow-right"
align="right"
:value="selectorValue"
@click.native="showSelector">
</md-field-item>
</md-field>
<md-selector
v-model="isSelectorShow"
:data="data[0]"
:invalid-index="2"
title="Check模式"
okText="确认"
cancelText="取消"
@confirm="onSelectorConfirm($event)"
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: [
[
{
text: '选项一',
},
{
text: '选项二',
},
{
text: '选项三',
},
{
text: '选项四',
},
],
],
selectorValue: '',
}
},
methods: {
showSelector() {
this.isSelectorShow = true
},
onSelectorConfirm({text}) {
this.selectorValue = text
},
},
}
</script>
API
Selector Props
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
v-model | 选择器是否可见 | Boolean | false | - |
data | 数据源 | Array<{value,text,…}> | [] | label 可为html 片段 |
default-index | 选择器初始选中项索引 | Number | - | - |
invalid-index | 选择器不可用选项索引 | Number | - | - |
title | 选择器标题 | String | - | - |
ok-text | 选择器确认文案 | String | - | 若为空则为确认模式 ,即点击选项直接选择 |
cancel-text | 选择器取消文案 | String | 取消 | - |
mask-closable1.3.0+ | 点击蒙层是否可关闭弹出层 | Boolean | true | - |
is-check | 是否有check 图标 | Boolean | false | 仅确认模式 |
option-render | 返回各选项渲染内容 | Function({value, text ,…}):String | - | vue 2.1.0+ 可使用slot-scope ,参考Radio |
max-height1.3.0+ | 选择器内容区域最高高度, 超出后可滚动 | Number | 400 | 单位px |
Selector Events
@choose({value, text, …})
选择器选中某选项事件
@confirm({value, text, …})
选择器确认选中事件
@cancel()
选择器取消选中事件
@show()
选择器展示事件
@hide()
选择器隐藏事件