Li-Daisy

Appearance

Drawer抽屉 ​

用于显示/隐藏页面侧边栏

打开方式 ​

支持两种打开方式 使用 trigger插槽 或 DrawerRef

使用 trigger插槽 时点击即可自动打开抽屉

使用 DrawerRef 时需自行调用 open 方法

点击trigger打开
使用 open 方法打开
vue
<template>
  <div class="flex flex-col gap-y-4">
    <Drawer title="抽屉标题">
      <template #trigger>
        <div class="btn">点击trigger打开</div>
      </template>
      <template #body>
        <p>这是点击trigger插槽打开的抽屉</p>
        <div class="h-screen bg-base-300">这是一个较高的元素</div>
      </template>
    </Drawer>

    <div class="btn" @click="handleOpenDrawer">使用 open 方法打开</div>
    <Drawer ref="drawerRef" title="抽屉标题">
      <template #body>
        <p>这是使用open方法打开的抽屉</p>
        <div class="h-screen bg-base-300">这是一个较高的元素</div>
      </template>
    </Drawer>
  </div>
</template>

<script setup lang="ts">
import { Drawer } from 'li-daisy'

import type { DrawerRef } from 'li-daisy'
import { ref } from 'vue'

const drawerRef = ref<DrawerRef>()
const handleOpenDrawer = () => {
  drawerRef.value?.open()
}
</script>

打开方向 ​

direction可选值有 ltr rtl，默认值为 ltr

打开方向: ltr
打开方向: rtl
vue
<template>
  <div class="flex justify-between w-full gap-x-5">
    <Drawer
      v-for="direction in directions"
      :key="direction"
      :title="'打开方向:' + direction"
      :direction="direction"
      class="my-3"
    >
      <template #trigger>
        <div class="btn">打开方向: {{ direction }}</div>
      </template>
      <template #body>
        <p>打开方向: {{ direction }}</p>
      </template>
    </Drawer>
  </div>
</template>

<script setup lang="ts">
import { Drawer } from 'li-daisy'
import type { DrawerDirection } from 'li-daisy'
import { ref } from 'vue'

const directions = ref<DrawerDirection[]>(['ltr', 'rtl'])
</script>

设置大小/支持响应式 ​

通过size设置宽度大小，支持 Tailwind CSS 的任意宽度值（包括响应式写法）

默认值为 w-[40vw] min-w-[250px]

注意

该本质是绑定到Drawer上的动态css，所有使用的要尤其小心，避免造成副作用

打开动态drawer
vue
<template>
  <Drawer
    title="抽屉标题"
    direction="ltr"
    size="w-[80vw] min-w-[200px] md:w-[60vw] md:max-w-[400px] lg:w-[50vw] lg:max-w-[600px]"
  >
    <template #trigger>
      <div class="btn">打开动态drawer</div>
    </template>
    <template #body>
      <p>调整屏幕大小，观察drawer宽度</p>
    </template>
  </Drawer>
</template>

<script setup lang="ts">
import { Drawer } from 'li-daisy'
</script>

显示关闭图标 ​

通过设置 show-close-icon 来控制是否显示图标，默认值为 true

该抽屉有close图标
该抽屉无close图标
vue
<template>
  <div class="flex justify-between w-full gap-x-5">
    <Drawer title="抽屉标题" show-close-icon>
      <template #trigger>
        <div class="btn">该抽屉有close图标</div>
      </template>
      <template #body>
        <p>该抽屉有close图标</p>
      </template>
    </Drawer>

    <Drawer title="抽屉标题" :show-close-icon="false">
      <template #trigger>
        <div class="btn">该抽屉无close图标</div>
      </template>
      <template #body>
        <p>该抽屉无close图标</p>
      </template>
    </Drawer>
  </div>
</template>

<script setup lang="ts">
import { Drawer } from 'li-daisy'
</script>

点击蒙层关闭 ​

通过设置 close-on-click-modal 来控制点击图层是否关闭，默认值为 true

IMPORTANT

当设置了 close-on-click-modal 为true时，关闭图标不再受控制，必然显示

点击蒙层可关闭
点击蒙层不可关闭
vue
<template>
  <div class="flex justify-between w-full gap-x-5">
    <Drawer title="抽屉标题" :close-on-click-modal="true">
      <template #trigger>
        <div class="btn">点击蒙层可关闭</div>
      </template>
      <template #body>
        <p>点击蒙层可关闭</p>
      </template>
    </Drawer>

    <Drawer title="抽屉标题" :close-on-click-modal="false">
      <template #trigger>
        <div class="btn">点击蒙层不可关闭</div>
      </template>
      <template #body>
        <p>点击蒙层不可关闭</p>
      </template>
    </Drawer>
  </div>
</template>

<script setup lang="ts">
import { Drawer } from 'li-daisy'
</script>

自定义header ​

可使用 header 插槽自定义抽屉头部，并且该插槽暴露一个 close 方法用于关闭抽屉

IMPORTANT

由于自定义了header，由此此时 show-close-icon 将不再有实际作用

同理，若将 close-on-click-modal 设置为 false，请务必确保留有关闭的按钮或图标等，以此确保用户体验

打开自定义header抽屉
vue
<template>
  <Drawer :close-on-click-modal="false">
    <template #trigger>
      <div class="btn">打开自定义header抽屉</div>
    </template>
    <template #header="{ close }">
      <div class="w-full flex justify-between border-b border-base-300 p-3">
        <h2 class="font-bold text-primary">这是自定义header</h2>
        <div class="btn btn-xs btn-neutral text-neutral-content" @click="close">关闭</div>
      </div>
    </template>
    <template #body>
      <p>自定义header之后 title属性将不会生效</p>
    </template>
  </Drawer>
</template>

<script setup lang="ts">
import { Drawer } from 'li-daisy'
</script>

关闭时注销组件 ​

destroy-on-close 属性决定关闭 drawer 时是否卸载组件，默认为 false

需要每次打开弹窗都初始化内容时，建议设置 destroy-on-close 为 true

需要保留弹窗内表单、计数器等状态时，建议保持默认（false）

效果类似于 keep-alive

打开弹窗（卸载内容）
打开弹窗（保留内容）
vue
<template>
  <div class="flex flex-col gap-y-4">
    <!-- 会卸载内容的弹窗 -->
    <Drawer :destroy-on-close="true">
      <template #trigger>
        <div class="btn">打开弹窗（卸载内容）</div>
      </template>

      <template #body>
        <h3 class="font-bold text-lg">关闭时卸载组件</h3>
        <p class="py-4">弹窗关闭后，内部内容会被卸载，重新打开会重新挂载。</p>
        <Count />
      </template>
    </Drawer>

    <!-- 不会卸载内容的弹窗 -->
    <Drawer>
      <template #trigger>
        <div class="btn">打开弹窗（保留内容）</div>
      </template>
      <template #body>
        <h3 class="font-bold text-lg">关闭时不卸载组件</h3>
        <p class="py-4">弹窗关闭后，内部内容不会被卸载，重新打开会保留上次状态。</p>
        <Count />
      </template>
    </Drawer>
  </div>
</template>

<script setup lang="ts">
import { Drawer } from 'li-daisy'

import Count from '../demo/Count.vue'
</script>

API ​

Attributes ​

Drawer ​

属性值说明类型默认值
title抽屉标题string-
size抽屉大小string'w-[40vw] min-w-[250px]'
direction打开方向['ltr','rtl']'ltr'
show-close-icon是否显示关闭图标booleantrue
close-on-click-modal点击蒙层是否关闭抽屉booleantrue
destroy-on-close关闭组件时是否卸载组件booleanfalse

Slots ​

插槽名说明
trigger打开抽屉触发器
header抽屉头部
body抽屉主体

Expose ​

方法名说明类型
open控制抽屉打开() => void
close控制抽屉关闭() => void