ea-ui

Tag 标签 ​

用于标记和选择。

引入 ​

js

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

css

TIP

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

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

自定义样式 ​

移步到 CSS Part。

基础用法 ​

默认标签成功标签信息标签警告标签危险标签
查看代码
html
<div class="row left">
  <ea-tag>默认标签</ea-tag>
  <ea-tag type="success">成功标签</ea-tag>
  <ea-tag type="info">信息标签</ea-tag>
  <ea-tag type="warning">警告标签</ea-tag>
  <ea-tag type="danger">危险标签</ea-tag>
</div>

JS: 点击事件

js
document.querySelector("#click").addEventListener("click", function (e) {
  console.log("标签被点击", e.target);
});

带关闭图标的标签 ​

默认标签成功标签信息标签警告标签危险标签
查看代码
html
<div class="row left">
  <ea-tag closable>默认标签</ea-tag>
  <ea-tag type="success" closable>成功标签</ea-tag>
  <ea-tag type="info" closable>信息标签</ea-tag>
  <ea-tag type="warning" closable>警告标签</ea-tag>
  <ea-tag type="danger" closable>危险标签</ea-tag>
</div>

动态编辑标签 ​

动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现

默认标签成功标签信息标签警告标签危险标签
查看代码
html
<div class="row left">
  <ea-tag class="dynamic-closable-tag" closable>默认标签</ea-tag>
  <ea-tag class="dynamic-closable-tag" type="success" closable>成功标签</ea-tag>
  <ea-tag class="dynamic-closable-tag" type="info" closable>信息标签</ea-tag>
  <ea-tag class="dynamic-closable-tag" type="warning" closable>警告标签</ea-tag>
  <ea-tag class="dynamic-closable-tag" type="danger" closable>危险标签</ea-tag>
</div>

JS: close 事件

为了适应可能出现的特殊场景, 所以并未在框架内部添加 DOM 移除事件

js
document.querySelectorAll(".dynamic-closable-tag").forEach((item) => {
  item.addEventListener("close", function (e) {
    // 移除该dom
    this.remove();

    // e.target: 当前标签; e.detail.value: 当前标签的 value 值
    console.log("标签被移除", e.target, e.detail.value);
  });
});

不同主题 ​

Tag 组件提供了三个不同的主题：dark、light 和 plain。通过设置 effect 属性来改变主题, 默认主题为 light

Dark 主题:

dark: 默认标签dark: 成功标签dark: 信息标签dark: 警告标签dark: 危险标签
查看代码
html
<div class="row left">
  <ea-tag effect="dark">dark: 默认标签</ea-tag>
  <ea-tag effect="dark" type="success">dark: 成功标签</ea-tag>
  <ea-tag effect="dark" type="info">dark: 信息标签</ea-tag>
  <ea-tag effect="dark" type="warning">dark: 警告标签</ea-tag>
  <ea-tag effect="dark" type="danger">dark: 危险标签</ea-tag>
</div>

Plain 主题:

plain: 默认标签plain: 成功标签plain: 信息标签plain: 警告标签plain: 危险标签
查看代码
html
<div class="row left">
  <ea-tag effect="plain">plain: 默认标签</ea-tag>
  <ea-tag effect="plain" type="success">plain: 成功标签</ea-tag>
  <ea-tag effect="plain" type="info">plain: 信息标签</ea-tag>
  <ea-tag effect="plain" type="warning">plain: 警告标签</ea-tag>
  <ea-tag effect="plain" type="danger">plain: 危险标签</ea-tag>
</div>

Attributes ​

参数说明类型可选值默认值
type主题类型stringdefault/success/info/warning/dangerdefault
closable是否可关闭booleantrue/falsefalse
effect主题效果stringdark/light/plainlight

CSS Part ​

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

名称说明
container外层容器

Events ​

事件名称说明回调参数
close关闭时触发的事件event: (e.detail.value: 该标签的值)
click点击时触发的事件event