Mand Mobile

Selector 列表选择器

用于弹出列表中选择一项

引入

import { Selector } from 'mand-mobile-next'

Vue.createApp().component(Selector.name, Selector)

代码演示

API

Selector Props

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

Selector Events

v-model @update:modelValue(value)

选择器选中某选项事件

属性说明类型
value选中项的值String, Number

v-model:visible @update:visible(value)

属性说明类型
value控制显示隐藏boolean

@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>

顶部插槽

底部插槽