ETU组件库

Appearance

Return to top
On this page

Drawer 标签

用于抽屉

基础用法

我们使用v-model给抽屉绑定一个布尔值用于侦测抽屉是否打开，然后定义一个按钮，用于改变绑定的布尔值，我们通过布尔值的状态来决定抽屉是否打开。

抽屉打开方向

由 direction 属性来选择 Drawer 的展开方向。

<template>
  <etu-drawer direction="Left" v-model="valLeft">
    左抽屉
  </etu-drawer>
  <etu-drawer direction="Right" v-model="valRight">
    右抽屉
  </etu-drawer>
  <etu-drawer direction="Up" v-model="valUp">
    上抽屉
  </etu-drawer>
  <etu-drawer direction="Down" v-model="valDown">
    下抽屉
  </etu-drawer>
  <etu-button @click="LeftShow">左抽屉</etu-button>
  <etu-button @click="RightShow">右抽屉</etu-button>
  <etu-button @click="UpShow">上抽屉</etu-button>
  <etu-button @click="DownShow">下抽屉</etu-button>
</template>

<script setup lang="ts">
import { ref } from "vue";

let valLeft = ref(false);
let valRight = ref(false);
let valUp = ref(false);
let valDown = ref(false);
function LeftShow() {
  valLeft.value = !valLeft.value;
  console.log("左抽屉");
}
function RightShow() {
  valRight.value = !valRight.value;
  console.log("右抽屉");
}
function UpShow() {
  valUp.value = !valUp.value;
  console.log("上抽屉");
}
function DownShow() {
  valDown.value = !valDown.value;
  console.log("下抽屉");
}
</script>

<style scoped></style>

<template>
  <etu-drawer direction="Left" v-model="valLeft">
    左抽屉
  </etu-drawer>
  <etu-drawer direction="Right" v-model="valRight">
    右抽屉
  </etu-drawer>
  <etu-drawer direction="Up" v-model="valUp">
    上抽屉
  </etu-drawer>
  <etu-drawer direction="Down" v-model="valDown">
    下抽屉
  </etu-drawer>
  <etu-button @click="LeftShow">左抽屉</etu-button>
  <etu-button @click="RightShow">右抽屉</etu-button>
  <etu-button @click="UpShow">上抽屉</etu-button>
  <etu-button @click="DownShow">下抽屉</etu-button>
</template>

<script setup lang="ts">
import { ref } from "vue";

let valLeft = ref(false);
let valRight = ref(false);
let valUp = ref(false);
let valDown = ref(false);
function LeftShow() {
  valLeft.value = !valLeft.value;
  console.log("左抽屉");
}
function RightShow() {
  valRight.value = !valRight.value;
  console.log("右抽屉");
}
function UpShow() {
  valUp.value = !valUp.value;
  console.log("上抽屉");
}
function DownShow() {
  valDown.value = !valDown.value;
  console.log("下抽屉");
}
</script>

<style scoped></style>

自定义抽屉标题

我们提供了Title属性来自定义抽屉的标题的插槽，同时抽屉标签内部可以自定义的插入任意内容

<template>
  <etu-drawer direction="Left" v-model="valLeft" Tittle="自定义的标题">
    Etu-Design的Etu是esay to use的缩写
  </etu-drawer>
  <etu-button @click="LeftShow">抽屉</etu-button>
</template>

<script setup lang="ts">
import { ref } from "vue";

let valLeft = ref(false);
function LeftShow() {
  valLeft.value = !valLeft.value;
  console.log("左抽屉");
}
</script>

<style scoped></style>

<template>
  <etu-drawer direction="Left" v-model="valLeft" Tittle="自定义的标题">
    Etu-Design的Etu是esay to use的缩写
  </etu-drawer>
  <etu-button @click="LeftShow">抽屉</etu-button>
</template>

<script setup lang="ts">
import { ref } from "vue";

let valLeft = ref(false);
function LeftShow() {
  valLeft.value = !valLeft.value;
  console.log("左抽屉");
}
</script>

<style scoped></style>

Drawer属性

键名称可选值描述
bgColorwhite , dodgerblue对应两种背景色
v-model=""true , false绑定布尔值，接下来操作布尔值的值,true时为抽屉打开,false时为抽屉关闭
directionUp,Down,Left,Right分别对应抽屉的位置，上下左右，默认为Right

同时内部还提供了插槽，可以向抽屉内部加入一些东西。

抽屉打开之后，点击抽屉之外的遮罩层会让抽屉收回，遮罩层消失，也可以点击抽屉上的x标志，关闭抽屉。

Drawer插槽

名称说明
Title自定义的标题
-自定义任意content