尺寸

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

• large

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

Expand Copy Copy

• normal

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

Expand Copy Copy

• small

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

Expand Copy 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 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 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 Copy

可清空单选

clearable 设置包含清空按钮，可将选择器清空为初始状态；默认clearable 为 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: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '选项1'
      }
    }
  }
</script>

Expand Copy 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 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 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	在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用	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 失去焦点，并隐藏下拉框	-