Selector 组件使用教程
优质
小牛编辑
149浏览
2023-12-01
安装
import { Selector } from 'vux'
export default {
components: {
Selector
}
}
// 在入口文件全局引入
import Vue from 'vue'
import { Selector } from 'vux'
Vue.component('selector', Selector)
<group>
<selector title="title" v-model="value"></selector>
</group>
selector
只能在Group
中使用
在iOS
上,如果没有指定placeholder
也没有指定value
,会出现弹出选择框时默认选中第一个值,但是确定后依然没有选中的情况。
因此对于iOS
,组件内部在列表项前面增加了一个空的option
,强制用户滑动选择一次以避免上面的问题。
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
value | string number object | 表单值,使用v-model绑定 | -- | |
title | string | 标题 | -- | |
direction | string | 选项对齐方式,同原生 select 属性一致,可选值为 ltr(left-to-right,默认), rtl | -- | |
options | array | 选项列表,可以为简单数组,或者 { key: KEY, value: VALUE } 结构的键值对数组。当使用键值对时,返回的value 为key 的值。 | -- | |
name | string | 表单的name名字 | -- | |
placeholder | string | 提示文字 | -- | |
readonly | boolean | false | 是否不可选择 | -- |
value-map | array | 设置键值对映射用以自动转换接口数据, 如 ['value', 'label'] | v2.7.2 |
事件
名字 | 参数 | 说明 | 版本要求 |
@on-change | (value) | 值变化时触发 | -- |
方法
名字 | 参数 | 说明 | 版本要求 |
getFullValue | 获取当前完整值,在使用了 valueMap 里可以用该方法来获取当前选中值的原始对象 | v2.7.2 |