# 尺寸

按钮有大(large)、正常(normal)、小(small) 所有选择器提供大、中、小三种使用尺寸 大号为普通大小适用与基础表单;中号根据表单填写排版高度,需要进行空间收缩时使用;小号选择器一般用在表格和列表中的表单填写中;

  • large
<template>
  <higher-select size="large" v-model="value">
  </higher-select>
</template>
<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>
Expand Copy
  • normal
<template>
  <higher-select size="normal" v-model="value">
  </higher-select>
</template>
<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>
Expand Copy
  • small
<template>
  <higher-select size="small" v-model="value">
  </higher-select>
</template>
<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>
Expand Copy

# 基础用法

通过list选项设置选择内容 v-model将绑定选中的value

<template>
  <higher-select v-model="value" placeholder="请选择" :list="options">
  </higher-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>
Expand Copy

# 有禁用选项

在list item数据中设定disabled值为 true,即可禁用该选项

<template>
  <higher-select v-model="value" placeholder="请选择" :list="options">
  </higher-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶',
          disabled: true
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>
Expand Copy

# 禁用状态

选择器不可用状态 设置disabled属性,则整个选择器不可用

<template>
  <higher-select v-model="value" placeholder="请选择" :list="options" disabled>
  </higher-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶',
          disabled: true
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '选项1'
      }
    }
  }
</script>
Expand Copy

# 可清空单选

clearable 设置包含清空按钮,可将选择器清空为初始状态;默认clearabletrue

<template>
  <higher-select v-model="value" placeholder="请选择" :list="options" >
  </higher-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '选项1'
      }
    }
  }
</script>
Expand Copy

# 可携带icon

  • 3.7.5之后拥有特性

  • 设置icon属性为内置图标即可显示,也可以通过自定义slot名称为prefix来自定义icon

  • 通过icon-color可以设置icon的样式,可以传入色板基础样式如果需要标记到色号就加上_${num}num值为取的色号值

<higher-select v-model="value" placeholder="请选择" :list="options" icon="DBBASEinfo" icon-color="success_3">
</higher-select>
<higher-select v-model="value" placeholder="请选择" :list="options" style="margin-top: 16px;">
  <i class="DBBASEeye-open" slot="prefix"/>
</higher-select>


<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '选项1'
      }
    }
  }
</script>
Expand Copy

# 基础多选

设置multiple属性即可启用多选,此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现,你也可以设置collapse-tags属性将它们合并为一段文字。

<template>
  <higher-select v-model="value1" placeholder="请选择" :list="options" multiple></higher-select>
  <higher-select v-model="value2" placeholder="请选择" :list="options" multiple collapse-tags style="margin-top: 16px;">
  </higher-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value1: [],
        value2: []
      }
    }
  }
</script>
Expand Copy

# Select Attributes

参数 说明 类型 可选值 默认值
value / v-model 绑定值 boolean / string / number
multiple 是否多选 boolean false
disabled 是否禁用 boolean false
value-key 作为 value 唯一标识的键名,绑定值为对象类型时必填 string value
size 输入框尺寸 string medium/small/mini
clearable 是否可以清空选项 boolean false
collapse-tags 多选时是否将选中值按文字的形式展示 boolean false
multiple-limit 多选时用户最多可以选择的项目数,为 0 则不限制 number 0
name select input 的 name 属性 string
autocomplete select input 的 autocomplete 属性 string off
auto-complete 下个主版本弃用 string off
placeholder 占位符 string 请选择
filterable 是否可搜索 boolean false
allow-create 是否允许用户创建新条目,需配合 filterable 使用 boolean false
filter-method 自定义搜索方法 function
remote 是否为远程搜索 boolean false
remote-method 远程搜索方法 function
loading 是否正在从远程获取数据 boolean false
loading-text 远程加载时显示的文字 string 加载中
no-match-text 搜索条件无匹配时显示的文字,也可以使用slot="empty"设置 string 无匹配数据
no-data-text 选项为空时显示的文字,也可以使用slot="empty"设置 string 无数据
popper-class Select 下拉框的类名 string
reserve-keyword 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 boolean false
default-first-option 在输入框按下回车,选择第一个匹配项。需配合 filterableremote 使用 boolean - false
popper-append-to-body 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false boolean - true
automatic-dropdown 对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单 boolean - false
icon 前置图标名称 string - -
icon-color 前置图标颜色,可使用色板颜色 string - -

# Select Events

事件名称 说明 回调参数
change 选中值发生变化时触发 目前的选中值
visible-change 下拉框出现/隐藏时触发 出现则为 true,隐藏则为 false
remove-tag 多选模式下移除tag时触发 移除的tag值
clear 可清空的单选模式下用户点击清空按钮时触发
blur 当 input 失去焦点时触发 (event: Event)
focus 当 input 获得焦点时触发 (event: Event)

# Select Slots

name 说明
Option 组件列表
prefix Select 组件头部内容
empty 无选项时的列表

# Option Group Attributes

参数 说明 类型 可选值 默认值
label 分组的组名 string
disabled 是否将该分组下所有选项置为禁用 boolean false

# Option Attributes

参数 说明 类型 可选值 默认值
value 选项的值 string/number/object
label 选项的标签,若不设置则默认与 value 相同 string/number
disabled 是否禁用该选项 boolean false

# Methods

方法名 说明 参数
focus 使 input 获取焦点 -
blur 使 input 失去焦点,并隐藏下拉框 -