ea-ui

Select 选择器 ​

当选项过多时，使用下拉菜单展示并选择内容。

引入 ​

js

html
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-select/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

适用广泛的基础单选

选项1选项2选项3选项4
显示代码

html

html
<div class="demo">
  <ea-select placeholder="请选择">
    <ea-option value="1">选项1</ea-option>
    <ea-option value="2">选项2</ea-option>
    <ea-option value="3">选项3</ea-option>
    <ea-option value="4">选项4</ea-option>
  </ea-select>
</div>

js

js
document.getElementById("basicSelect").addEventListener("change", (e) => {
  console.log("change", e.detail);
});

有禁用选项 ​

在 ea-option 中，设定 disabled 值为 true，即可禁用该选项

选项1选项2选项3选项4
显示代码

html

html
<div class="demo">
  <ea-select placeholder="请选择">
    <ea-option value="1">选项1</ea-option>
    <ea-option value="2">选项2</ea-option>
    <ea-option value="3" disabled>选项3</ea-option>
    <ea-option value="4">选项4</ea-option>
  </ea-select>
</div>

禁用状态 ​

为 ea-select 设置 disabled 属性，则整个选择器不可用

选项1选项2选项3选项4
显示代码

html

html
<div class="demo">
  <ea-select placeholder="请选择" disabled>
    <ea-option value="1">选项1</ea-option>
    <ea-option value="2">选项2</ea-option>
    <ea-option value="3">选项3</ea-option>
    <ea-option value="4">选项4</ea-option>
  </ea-select>
</div>

可清空单选 ​

为 ea-select 设置 clearable 属性，则可将选择器清空

北京上海广州深圳
显示代码

html

html
<div class="demo">
  <ea-select id="clearableSelect" placeholder="请选择" clearable>
    <ea-option value="北京">北京</ea-option>
    <ea-option value="上海">上海</ea-option>
    <ea-option value="广州">广州</ea-option>
    <ea-option value="深圳">深圳</ea-option>
  </ea-select>
</div>

js

js
document.getElementById("clearableSelect").addEventListener("clear", (e) => {
  console.log("clear", e.detail);
});

基础多选 ​

为 ea-select 设置 multiple 属性即可启用多选。

北京上海广州深圳
显示代码

html

html
<div class="demo">
  <ea-select placeholder="请选择" multiple>
    <ea-option value="北京">北京</ea-option>
    <ea-option value="上海">上海</ea-option>
    <ea-option value="广州">广州</ea-option>
    <ea-option value="深圳">深圳</ea-option>
  </ea-select>
</div>

自定义模板 ​

可以自定义备选项。将自定义的 HTML 模板插入 ea-option 中即可。

北京
Beijing
上海
Shanghai
广州
Guangzhou
深圳
Shenzhen
显示代码

html

html
<div class="demo">
  <ea-select placeholder="请选择">
    <ea-option value="北京">
      <div class="ea-select_option-wrap">
        <div class="ea-select_option-text">北京</div>
        <div class="ea-select_option-eng">Beijing</div>
      </div>
    </ea-option>
    <ea-option value="上海">
      <div class="ea-select_option-wrap">
        <div class="ea-select_option-text">上海</div>
        <div class="ea-select_option-eng">Shanghai</div>
      </div>
    </ea-option>
    <ea-option value="广州">
      <div class="ea-select_option-wrap">
        <div class="ea-select_option-text">广州</div>
        <div class="ea-select_option-eng">Guangzhou</div>
      </div>
    </ea-option>
    <ea-option value="深圳">
      <div class="ea-select_option-wrap">
        <div class="ea-select_option-text">深圳</div>
        <div class="ea-select_option-eng">Shenzhen</div>
      </div>
    </ea-option>
  </ea-select>
</div>

分组 ​

备选项进行分组展示

北京上海广州深圳
显示代码

html

html
<div class="demo">
  <ea-select placeholder="请选择" filterable>
    <ea-option value="北京">北京</ea-option>
    <ea-option value="上海">上海</ea-option>
    <ea-option value="广州">广州</ea-option>
    <ea-option value="深圳">深圳</ea-option>
    <div slot="empty">
      <ea-empty></ea-empty>
    </div>
  </ea-select>
</div>

可搜索 ​

可以通过 filterable 属性开启搜索功能。其中, 可添加 slot="empty" 插槽来自定义空状态。

北京上海广州深圳
显示代码

html

html
<div class="demo">
  <ea-select placeholder="请选择" filterable>
    <ea-option value="北京">北京</ea-option>
    <ea-option value="上海">上海</ea-option>
    <ea-option value="广州">广州</ea-option>
    <ea-option value="深圳">深圳</ea-option>
    <div slot="empty">
      <ea-empty></ea-empty>
    </div>
  </ea-select>
</div>

Select Attributes ​

参数说明类型可选值默认值
name输入框的 name 属性。若与 form 组合使用，则 form 的返回值中. 该键名为该 name 值String--
width宽度String-200px
selection选中值, 同时也是默认值String--
placeholder占位符String--
multiple是否多选Boolean-false
value更加精确地值。若设置了 multiple属性, 则会返回一个数组String/Array--
disabled是否禁用Boolean-false
clearable是否可清除Boolean-false
filterable是否可搜索Boolean-false

Select Slots ​

名称说明
-默认插槽
empty空状态插槽

Select Events ​

事件名说明参数
change选中值改变时触发(value: String/Array)
clear清除选中值时触发(originValue: String/Array)
visible-change下拉框显示状态改变时触发(visible: Boolean)

Option Group Attributes ​

参数说明类型可选值默认值
label分组的组名String--

Option Attributes ​

参数说明类型可选值默认值
value选项的值String--
label选项的显示String--
disabled是否禁用Boolean-false

Select CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container外层容器
input-wrap输入框外层容器
input输入框
dropdown-icon-wrap下拉图标外层容器
icon下拉图标
dropdown-wrap下拉框外层容器

Option CSS Part ​

名称说明
container外层容器

OptionGroup CSS Part ​

名称说明
container外层容器
title-wrap标题外层容器