Selector

demo 原始链接demo 源码编辑文档组件源码

selector - 图1

二维码

selector - 图2

安装

局部注册

全局注册

  1. import { Selector } from 'vux'
  2. export default {
  3. components: {
  4. Selector
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { Selector } from 'vux'
  4. Vue.component('selector', Selector)
  1. <group>
  2. <selector title="title" v-model="value"></selector>
  3. </group>

selector只能在Group中使用

iOS上,如果没有指定placeholder也没有指定value,会出现弹出选择框时默认选中第一个值,但是确定后依然没有选中的情况。因此对于iOS,组件内部在列表项前面增加了一个空的option,强制用户滑动选择一次以避免上面的问题。

属性

名字类型默认值说明版本要求
valuestringnumberobject表单值,使用v-model绑定
titlestring标题
directionstring选项对齐方式,同原生 select 属性一致,可选值为 ltr(left-to-right,默认), rtl
optionsarray选项列表,可以为简单数组,或者 { key: KEY, value: VALUE } 结构的键值对数组。当使用键值对时,返回的valuekey的值。
namestring表单的name名字
placeholderstring提示文字
readonlybooleanfalse是否不可选择
value-maparray设置键值对映射用以自动转换接口数据, 如 ['value', 'label']v2.7.2

事件

名字参数说明版本要求
@on-change(value)值变化时触发

方法

名字参数说明版本要求
getFullValue获取当前完整值,在使用了 valueMap 里可以用该方法来获取当前选中值的原始对象v2.7.2

相关 issue

贡献者

该组件(包含文档)迭代次数 37,贡献人数 7Estelle00airylandunclayemondora万刚lichunqianggreedying

发布日志

  • 2.9.3 [fix] 修复direction=rtl时的中文括号显示异常 #2864
  • v2.9.0 [fix] 修复新版本 vue 导致的 select 值问题 #2633 #2587
  • v2.9.0 [enhance] 标题使用 v-html #2615
  • v2.7.2 [feature] 支持 value-map 属性用以自动转换 API 数据 #2139
  • v2.7.2 [feature] 支持 getFullValue 方法获取当中选中值的原始数据
  • v2.7.0 [fix] 兼容服务端渲染
  • v2.7.0 [fix] 修复值为 null 时 placeholder 没有显示的问题 #2101
  • v2.3.3 [enhance] 设置 placeholder 颜色. #1465
  • v2.2.2 [fix] 修复 label for 属性值缺失
  • v2.2.1-rc.6 [fix] 修复 placeholder 逻辑问题. #1273
  • v2.1.1-rc.14 [fix] 修复Selector不能设置name属性的问题#1133
  • v2.1.1-rc.14 [enhance] Selector的value支持布尔型. @rbao