抽屉

用于 Vue 的抽屉组件。

组件源代码 原生 API 参考

关于 ​

抽屉基于 Vaul Vue 构建。

安装 ​

bash
npx shadcn-vue@latest add drawer

使用 ​

vue
<script setup lang="ts">
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'
</script>

<template>
  <Drawer>
    <DrawerTrigger>Open</DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Are you absolutely sure?</DrawerTitle>
        <DrawerDescription>This action cannot be undone.</DrawerDescription>
      </DrawerHeader>
      <DrawerFooter>
        <Button>Submit</Button>
        <DrawerClose>
          <Button variant="outline">
            Cancel
          </Button>
        </DrawerClose>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
</template>

缩放背景 ​

如果你希望背景具有缩放效果，你需要在根组件中添加 vaul-drawer-wrapper 属性。

html
<div vaul-drawer-wrapper id="app"></div>

示例 ​

响应式对话框 ​

你可以结合 Dialog 和 Drawer 组件创建一个响应式对话框。它在桌面端渲染一个 Dialog 组件，而在移动端渲染一个 Drawer 组件。

在 GitHub 上编辑此页面