Easy UI

Appearance

Select 选择器 ​

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

引入 ​

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

自定义样式 ​

移步到 CSS Part 和 CSS Custom Properties。

基础用法 ​

适用广泛的基础单选

Option 1Option 2Option 3Option 4Option 5
查看代码
html
<ea-select placeholder="Select" style="width: 240px">
  <ea-option value="Option 1">Option 1</ea-option>
  <ea-option value="Option 2">Option 2</ea-option>
  <ea-option value="Option 3">Option 3</ea-option>
  <ea-option value="Option 4">Option 4</ea-option>
  <ea-option value="Option 5">Option 5</ea-option>
</ea-select>

有禁用选项 ​

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

Option 1Option 2Option 3Option 4Option 5
查看代码
html
<ea-select placeholder="Select" style="width: 240px">
  <ea-option value="Option 1">Option 1</ea-option>
  <ea-option value="Option 2" disabled>Option 2</ea-option>
  <ea-option value="Option 3">Option 3</ea-option>
  <ea-option value="Option 4">Option 4</ea-option>
  <ea-option value="Option 5">Option 5</ea-option>
</ea-select>

禁用状态 ​

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

Option 1Option 2Option 3Option 4Option 5
查看代码
html
<ea-select style="width: 240px" placeholder="Select" disabled>
  <ea-option value="Option 1">Option 1</ea-option>
  <ea-option value="Option 2">Option 2</ea-option>
  <ea-option value="Option 3">Option 3</ea-option>
  <ea-option value="Option 4">Option 4</ea-option>
  <ea-option value="Option 5">Option 5</ea-option>
</ea-select>

可清空 ​

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

Option 1Option 2Option 3Option 4Option 5
查看代码
html
<ea-select style="width: 240px" placeholder="Select" clearable>
  <ea-option value="Option 1">Option 1</ea-option>
  <ea-option value="Option 2">Option 2</ea-option>
  <ea-option value="Option 3">Option 3</ea-option>
  <ea-option value="Option 4">Option 4</ea-option>
  <ea-option value="Option 5">Option 5</ea-option>
</ea-select>

尺寸 ​

使用 size 属性改变选择器大小。 除了默认大小外，还有另外两个选项： large, small。

Option 1Option 2Option 3Option 1Option 2Option 3Option 1Option 2Option 3
查看代码
html
<ea-select style="width: 240px" placeholder="Large" size="large">
  <ea-option value="Option 1">Option 1</ea-option>
  <ea-option value="Option 2">Option 2</ea-option>
  <ea-option value="Option 3">Option 3</ea-option>
</ea-select>
<ea-select style="width: 240px" placeholder="Default">
  <ea-option value="Option 1">Option 1</ea-option>
  <ea-option value="Option 2">Option 2</ea-option>
  <ea-option value="Option 3">Option 3</ea-option>
</ea-select>
<ea-select style="width: 240px" placeholder="Small" size="small">
  <ea-option value="Option 1">Option 1</ea-option>
  <ea-option value="Option 2">Option 2</ea-option>
  <ea-option value="Option 3">Option 3</ea-option>
</ea-select>

基础多选 ​

为 ea-select 设置 multiple 属性即可启用多选模式， 默认情况下选中值会以 Tag 的形式展现

default

Option 1Option 2Option 3Option 4Option 5

use collapse-tags

Option 1Option 2Option 3Option 4Option 5

max-collapse-tags

Option 1Option 2Option 3Option 4Option 5
查看代码
html
<ea-select style="width: 240px" placeholder="Select" multiple>
  <ea-option value="Option 1">Option 1</ea-option>
  <ea-option value="Option 2">Option 2</ea-option>
  <ea-option value="Option 3">Option 3</ea-option>
</ea-select>

<ea-select style="width: 240px" placeholder="Select" multiple collapse-tags>
  <ea-option value="Option 1">Option 1</ea-option>
  <ea-option value="Option 2">Option 2</ea-option>
  <ea-option value="Option 3">Option 3</ea-option>
</ea-select>

<ea-select
  style="width: 240px"
  placeholder="Select"
  multiple
  collapse-tags
  max-collapse-tags="3"
>
  <ea-option value="Option 1">Option 1</ea-option>
  <ea-option value="Option 2">Option 2</ea-option>
  <ea-option value="Option 3">Option 3</ea-option>
</ea-select>

自定义模板 ​

可以自定义备选项的模板，使用 label 属性指定选中后显示的文本

Beijing
北京
Shanghai
上海
Guangzhou
广州
Shenzhen
深圳
查看代码
html
<ea-select style="width: 240px" placeholder="Select city" clearable>
  <ea-option value="beijing" label="Beijing">
    <div class="ea-select_option-wrap">
      <div class="ea-select_option-text">Beijing</div>
      <div class="ea-select_option-eng">北京</div>
    </div>
  </ea-option>
  <ea-option value="shanghai" label="Shanghai">
    <div class="ea-select_option-wrap">
      <div class="ea-select_option-text">Shanghai</div>
      <div class="ea-select_option-eng">上海</div>
    </div>
  </ea-option>
</ea-select>

将选项进行分组 ​

使用 ea-option-group 对备选项进行分组

Option 1Option 2Option 3Option 4Option 5
查看代码
html
<ea-select placeholder="Select" style="width: 240px">
  <ea-option-group label="Group 1">
    <ea-option value="Option 1">Option 1</ea-option>
    <ea-option value="Option 2">Option 2</ea-option>
    <ea-option value="Option 3">Option 3</ea-option>
  </ea-option-group>
  <ea-option-group label="Group 2">
    <ea-option value="Option 4">Option 4</ea-option>
    <ea-option value="Option 5">Option 5</ea-option>
  </ea-option-group>
</ea-select>

筛选选项 ​

可以利用筛选功能快速查找选项

Option 1Option 2Option 3Option 4Option 5Option 1Option 2Option 3Option 4Option 5
查看代码
html
<ea-select style="width: 240px" placeholder="Select" filterable>
  <ea-option value="Option 1">Option 1</ea-option>
  <ea-option value="Option 2">Option 2</ea-option>
  <ea-option value="Option 3">Option 3</ea-option>
  <ea-option value="Option 4">Option 4</ea-option>
  <ea-option value="Option 5">Option 5</ea-option>
</ea-select>

<ea-select style="width: 240px" placeholder="Select" multiple filterable>
  <ea-option value="Option 1">Option 1</ea-option>
  <ea-option value="Option 2">Option 2</ea-option>
  <ea-option value="Option 3">Option 3</ea-option>
  <ea-option value="Option 4">Option 4</ea-option>
  <ea-option value="Option 5">Option 5</ea-option>
</ea-select>

创建新的选项 ​

可以通过 JavaScript 动态添加选项到选择器中

Single select

Option 1Option 2Option 3Option 4Option 5
Add "Option 6" option

Multiple Select

Option 1Option 2Option 3Option 4Option 5
Add "Option 6" option
查看代码
html
<section class="create-example">
  <p>Single select</p>
  <ea-select style="width: 240px" placeholder="Select">
    <ea-option value="Option 1">Option 1</ea-option>
    <ea-option value="Option 2">Option 2</ea-option>
    <ea-option value="Option 3">Option 3</ea-option>
    <ea-option value="Option 4">Option 4</ea-option>
    <ea-option value="Option 5">Option 5</ea-option>
  </ea-select>
  <br />
  <ea-button>Add "Option 6" option</ea-button>
</section>
<section class="create-example">
  <p>Multiple Select</p>
  <ea-select style="width: 240px" placeholder="Select" multiple>
    <ea-option value="Option 1">Option 1</ea-option>
    <ea-option value="Option 2">Option 2</ea-option>
    <ea-option value="Option 3">Option 3</ea-option>
    <ea-option value="Option 4">Option 4</ea-option>
    <ea-option value="Option 5">Option 5</ea-option>
  </ea-select>
  <br />
  <ea-button>Add "Option 6" option</ea-button>
</section>
js
const createOptionExample = {
  examples: document.querySelectorAll(".create-example"),

  init() {
    this.examples.forEach(example => {
      const button = example.querySelector("ea-button");
      const select = example.querySelector("ea-select");
      const isMultiple = select.hasAttribute("multiple");

      button.addEventListener("click", () => {
        if (select.querySelector("ea-option[value='Option 6']")) return;

        const option = document.createElement("ea-option");
        option.value = "Option 6";
        option.textContent = "Option 6";
        select.appendChild(option);

        select.value = isMultiple ? ["Option 6"] : "Option 6";
      });
    });
  },
};
createOptionExample.init();

Select API ​

Select Attributes ​

属性名说明类型可选值默认值
placeholder占位文本string——
disabled是否禁用boolean—false
clearable是否可以清空选项boolean—false
size输入框尺寸stringlarge / default / smalldefault
multiple是否多选boolean—false
collapse-tags多选时是否将选中值按文字的形式展示boolean—false
max-collapse-tags多选时最多显示标签数量number—1
filterable是否可搜索boolean—false
required是否必填boolean—false
value / v-model绑定值string / number / boolean / array——

Select Events ​

事件名说明回调参数(event.detail)
change选中值发生变化时触发{ value }
ea-visible-change下拉框出现/隐藏时触发{ visible }
ea-clear可清空的单选模式下用户点击清空按钮时触发—
ea-remove-tag多选模式下移除tag时触发{ tag, tagValue }

Select Methods ​

方法名说明参数
show显示下拉框—
hide隐藏下拉框—
checkValidity检查表单字段有效性—
reportValidity报告表单字段有效性并显示提示—

Select CSS Part ​

名称说明
container选择器容器
input输入框
tag-wrap标签包装容器
dropdown下拉框
dropdown-icon下拉图标
clear-icon清除图标

Select CSS Custom Properties ​

属性名说明默认值
--ea-select-height-small小尺寸高度22px
--ea-select-height-default默认尺寸高度30px
--ea-select-height-large大尺寸高度38px
--ea-select-dropdown-bg-color下拉框背景颜色var(--color-white)
--ea-select-color文本颜色var(--grey-700)
--ea-select-placeholder-color占位符颜色var(--grey-500)
--ea-select-transition过渡时长var(--transition-fast)
--ea-select-border-color边框颜色var(--grey-300)
--ea-select-border-invalid-color无效状态边框颜色var(--red-500)

Select Slots ​

名称说明
default默认插槽，用于放置 ea-option 或 ea-option-group

Option API ​

Option Attributes ​

属性名说明类型可选值默认值
value选项的值string / number / boolean——
label选项的显示文本，若不设置则默认使用 textContent。当选项内容较复杂时（如包含多个元素），建议使用此属性指定选中后显示的文本string—null
disabled是否禁用该选项boolean—false
selected是否选中该选项boolean—false

Option CSS Part ​

名称说明
container选项容器

Option Slots ​

名称说明
default选项内容

Option Group API ​

Option Group Attributes ​

属性名说明类型可选值默认值
label分组的组名string——

Option Group CSS Part ​

名称说明
container分组容器
header分组头部
content分组内容

Option Group Slots ​

名称说明
header自定义分组头部内容
default默认插槽，用于放置 ea-option