Drawer 抽屉

简单抽屉，对 el-drawer 进行了二次封装，提供了一些扩展功能。

基本用法

点击查看代码

<template>
  <el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>

  <s-drawer v-model="drawerVisible" title="基本抽屉">
    <div>基本抽屉</div>
  </s-drawer>
</template>

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

  const drawerVisible = ref(false);
</script>

打开方向

打开方向:

rtl（右）ltr（左）ttb（上）btt（下）

点击查看代码

<template>
  <s-form showColon>
    <s-form-item label="打开方向">
      <el-radio-group v-model="drawerDirection">
        <el-radio v-for="item in drawerDirectionOptions" :key="item.value" :value="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </s-form-item>
  </s-form>

  <el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>

  <s-drawer v-model="drawerVisible" title="打开方向" :direction="drawerDirection">
    <div>抽屉打开方向</div>
  </s-drawer>
</template>

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

  const drawerVisible = ref(false);
  const drawerDirection = ref("rtl");

  const drawerDirectionOptions = reactive([
    { value: "rtl", label: "rtl（右）" },
    { value: "ltr", label: "ltr（左）" },
    { value: "ttb", label: "ttb（上）" },
    { value: "btt", label: "btt（下）" }
  ]);
</script>

抽屉大小

点击查看代码

<template>
  <el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>

  <s-drawer v-model="drawerVisible" title="抽屉大小" size="500px">
    <div>指定抽屉大小</div>
  </s-drawer>
</template>

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

  const drawerVisible = ref(false);
</script>

加载中状态

点击查看代码

<template>
  <el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>

  <s-drawer v-model="drawerVisible" title="加载中状态" size="500px" :loading="drawerLoading" @open="handleOpen" @ok="(done: Function) => done()">
    <div>抽屉加载中状态</div>
  </s-drawer>
</template>

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

  const drawerVisible = ref(false);
  const drawerLoading = ref(false);

  const handleOpen = () => {
    drawerLoading.value = true;
    setTimeout(() => {
      drawerLoading.value = false;
    }, 1500);
  };
</script>

显示操作栏

点击查看代码

<template>
  <el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>

  <s-drawer v-model="drawerVisible" title="显示操作栏" footer @ok="(done: Function) => done()">
    <div>显示抽屉底部操作栏</div>
  </s-drawer>
</template>

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

  const drawerVisible = ref(false);
</script>

自定义操作栏

点击查看代码

<template>
  <el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>

  <s-drawer v-model="drawerVisible" title="自定义操作栏">
    <div>自定义抽屉操作栏</div>

    <template #footer>
      <el-button type="primary" @click="drawerVisible = false">自定义按钮</el-button>
    </template>
  </s-drawer>
</template>

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

  const drawerVisible = ref(false);
</script>

自定义按钮文本

点击查看代码

<template>
  <el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>

  <s-drawer v-model="drawerVisible" title="自定义按钮文本" footer cancelText="关 闭" okText="保 存" @ok="(done: Function) => done()">
    <div>自定义抽屉操作按钮文本</div>
  </s-drawer>
</template>

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

  const drawerVisible = ref(false);
</script>

嵌套抽屉

点击查看代码

<template>
  <el-button type="primary" @click="outerDrawerVisible = true">点击打开抽屉</el-button>

  <s-drawer v-model="outerDrawerVisible" title="外部抽屉" size="600px">
    <div style="margin-bottom: 1rem;">外部抽屉</div>
    <el-button type="primary" @click="innerDrawerVisible = true">打开内部抽屉</el-button>

    <s-drawer v-model="innerDrawerVisible" title="内部抽屉" size="350px">
      <div>内部抽屉</div>
    </s-drawer>
  </s-drawer>
</template>

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

  const outerDrawerVisible = ref(false);
  const innerDrawerVisible = ref(false);
</script>

Props

Slots

Emits