我的书签
添加书签
移除书签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-itemtitle="普通模式":content="selectorValue"@click="showSelector"arrowsolid/></md-field><md-selectorv-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>
确认模式
<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>
多选模式
<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>
自定义选项
<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模式
<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 |
| multi2.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+
footer
底部插槽 2.4.0+
