ea-ui

Drawer 抽屉 ​

引入 ​

js

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

css

TIP

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

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

自定义样式 ​

移步到 CSS Part。

基本用法 ​

呼出一个临时的侧边栏, 可以从多个方向呼出

TIP

  • 可以在 ea-drawer 标签上添加 direction 属性来指定呼出方向。也可以利用 js 来控制呼出方向(drawer.direction = "ltr";)。

  • ea-drawer 标签上添加 title 属性来指定标题。

  • 通过操作元素上的open属性来开启抽屉(drawer.open = true;)。

  • 可以在元素上添加 close 事件来监听关闭事件。

从左往右开从右往左开从上往下开从下往上开我是内容
查看代码

html

html
<div class="demo">
  <ea-button-group>
    <ea-button type="primary" id="openDrawerBtn--ltr">从左往右开</ea-button>
    <ea-button type="primary" id="openDrawerBtn--rtl">从右往左开</ea-button>
    <ea-button type="primary" id="openDrawerBtn--ttb">从上往下开</ea-button>
    <ea-button type="primary" id="openDrawerBtn--btt">从下往上开</ea-button>
  </ea-button-group>
  <ea-drawer id="drawer" title="我是标题" direction="ltr">
    <span>我是内容</span>
  </ea-drawer>
</div>

js

js
const Drawer = {
  drawer: document.querySelector("#drawer"),

  ltrBtn: document.querySelector("#openDrawerBtn--ltr"),
  rtlBtn: document.querySelector("#openDrawerBtn--rtl"),
  ttbBtn: document.querySelector("#openDrawerBtn--ttb"),
  bttBtn: document.querySelector("#openDrawerBtn--btt"),

  init() {
    this.ltrBtn.addEventListener("click", () => {
      this.drawer.direction = "ltr";
      this.drawer.open = true;
    });

    this.rtlBtn.addEventListener("click", () => {
      this.drawer.direction = "rtl";
      this.drawer.open = true;
    });

    this.ttbBtn.addEventListener("click", () => {
      this.drawer.direction = "ttb";
      this.drawer.open = true;
    });

    this.bttBtn.addEventListener("click", () => {
      this.drawer.direction = "btt";
      this.drawer.open = true;
    });

    this.drawer.addEventListener("close", () => {
      console.log("close");
    });
  },
};

Drawer.init();

自定义内容 ​

Drawer 可以在其内部嵌套各种丰富的操作

打开自定义内容的抽屉 Lilyiro 165cm 17岁 宿命背反雷电物理
查看代码

html

html
<div class="demo">
  <ea-button type="primary" id="openCustomDrawerBtn"
    >打开自定义内容的抽屉</ea-button
  >
  <ea-drawer id="customDrawer" title="我是标题" direction="ltr">
    <ea-descriptions direction="vertical" border>
      <ea-descriptions-item label="用户名"> Lilyiro </ea-descriptions-item>
      <ea-descriptions-item label="身高"> 165cm </ea-descriptions-item>
      <ea-descriptions-item label="年龄"> 17岁 </ea-descriptions-item>
      <ea-descriptions-item label="称号">
        <ea-tag>宿命背反</ea-tag>
      </ea-descriptions-item>
      <ea-descriptions-item label="属性" span="1">
        <ea-tag type="warning" style="margin-right: 1rem;">雷电</ea-tag>
        <ea-tag type="info">物理</ea-tag>
      </ea-descriptions-item>
    </ea-descriptions>
  </ea-drawer>
</div>

js

js
const CustomDrawer = {
  drawer: document.querySelector("#customDrawer"),
  openBtn: document.querySelector("#openCustomDrawerBtn"),

  init() {
    this.openBtn.addEventListener("click", () => {
      this.drawer.open = true;
    });

    this.drawer.addEventListener("close", () => {
      console.log("close");
    });
  },
};

CustomDrawer.init();

Attributes ​

参数说明类型可选值默认值
title标题string--
open是否打开boolean-false
sizeDrawer 窗体的大小string-30%
modal是否显示遮罩boolean-true
direction抽屉的方向stringltr, rtl, ttb, bttltr
wrapper-closable点击遮罩是否关闭boolean-true
show-close是否显示关闭按钮boolean-true
with-header是否显示头部boolean-true

CSS Part ​

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

名称说明
container外层容器
drawer-wrap抽屉容器，包含头部 header-wrap、主体 main-wrap、遮罩层 mask-wrap
header-wrap抽屉顶部容器，包含标题容器 title-wrap 和关闭按钮 icon
title-wrap标题容器
icon顶部关闭图标
main-wrap主体容器
mask-wrap遮罩层容器

Events ​

事件名说明回调参数
close关闭时触发-

Slots ​

名称说明
-Drawer 的内容
headerDrawer 标题区的内容