ADrawer

ADrawer is a side panel that slides in from the left or right edge of the viewport. Toggle it with v-model, choose an edge with position, and control the mask and scroll-locking behavior.

Import

import { Drawer } from '@any-design/anyui/vue';
// React:  import { Drawer } from '@any-design/anyui/react';
// Svelte: import { Drawer } from '@any-design/anyui/svelte';

Basic usage

Toggle with v-model; the slot renders the drawer body. Since the component has no built-in header, drop in your own title + close affordance inside the slot.

<template>
  <AButton @click="open = true">Open drawer</AButton>
  <ADrawer v-model="open">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>Filters</strong>
      <AButton size="small" type="secondary" @click="open = false">Close</AButton>
    </div>
    <p>Refine your results here.</p>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

Examples

Right side, custom width

position="right" docks the panel on the right; width accepts any CSS length.

<template>
  <AButton type="primary" @click="open = true">Account settings</AButton>
  <ADrawer v-model="open" position="right" width="420px">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>Account settings</strong>
      <AButton size="small" type="secondary" @click="open = false">Close</AButton>
    </div>
    <AInput placeholder="Display name" />
    <div style="display:flex;justify-content:flex-end;margin-top:16px;">
      <AButton type="primary">Save</AButton>
    </div>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

Without mask

Set with-mask="false" to keep the page interactive while the drawer is open.

<template>
  <AButton @click="open = true">Open without mask</AButton>
  <ADrawer v-model="open" :with-mask="false">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>Unmasked</strong>
      <AButton size="small" type="secondary" @click="open = false">Close</AButton>
    </div>
    <p>The page behind stays usable.</p>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

Props

Prop	Type	Default	Description
modelValue	Boolean	false	Visibility (v-model).
position	‘left’ | ‘right’	‘left’	Edge the drawer slides from.
width	String | Number	‘30%’	Drawer width.
withMask	Boolean	true	Show the overlay mask.
appendToBody	Boolean	true	Append to body.
lockScroll	Boolean	true	Lock body scroll while open.
lockTarget	String	‘document.body’	CSS selector of the element to lock (passed to querySelector).
zIndex	Number	100	z-index of the panel.
maskZIndex	Number	undefined	z-index of the mask.
drawerClass / maskClass / bodyClass	String	undefined	Extra class hooks.
transitionName	String	undefined	Override the transition name.

Events

Event	Payload	Description
update:modelValue	Boolean	Visibility change.

Slots

Slot	Props	Description
default	—	Drawer body.

ADrawer

ADrawer 是从视口左 / 右边缘滑入的侧边面板。通过 v-model 控制显隐，用 position 选择停靠边，并控制遮罩与滚动锁定行为。

引入

import { Drawer } from '@any-design/anyui/vue';
// React:  import { Drawer } from '@any-design/anyui/react';
// Svelte: import { Drawer } from '@any-design/anyui/svelte';

基础用法

通过 v-model 控制显隐，插槽即为抽屉主体。由于组件本身不内置头部，可在插槽内自行放标题与关闭按钮。

<template>
  <AButton @click="open = true">打开抽屉</AButton>
  <ADrawer v-model="open">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>筛选</strong>
      <AButton size="small" type="secondary" @click="open = false">关闭</AButton>
    </div>
    <p>在这里精炼你的结果。</p>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

示例

右侧、自定义宽度

position="right" 让面板停靠在右侧；width 接受任意 CSS 长度。

<template>
  <AButton type="primary" @click="open = true">账户设置</AButton>
  <ADrawer v-model="open" position="right" width="420px">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>账户设置</strong>
      <AButton size="small" type="secondary" @click="open = false">关闭</AButton>
    </div>
    <AInput placeholder="显示名" />
    <div style="display:flex;justify-content:flex-end;margin-top:16px;">
      <AButton type="primary">保存</AButton>
    </div>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

无遮罩

设置 with-mask="false" 可在抽屉打开时保持页面可交互。

<template>
  <AButton @click="open = true">无遮罩打开</AButton>
  <ADrawer v-model="open" :with-mask="false">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>无遮罩</strong>
      <AButton size="small" type="secondary" @click="open = false">关闭</AButton>
    </div>
    <p>背后的页面仍可操作。</p>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

属性

属性	类型	默认值	说明
modelValue	Boolean	false	是否可见（v-model）。
position	‘left’ | ‘right’	‘left’	抽屉滑出的边缘。
width	String | Number	‘30%’	宽度。
withMask	Boolean	true	显示遮罩。
appendToBody	Boolean	true	挂载到 body。
lockScroll	Boolean	true	打开时锁定滚动。
lockTarget	String	‘document.body’	锁定元素的 CSS 选择器（传给 querySelector）。
zIndex	Number	100	面板的 z-index。
maskZIndex	Number	undefined	遮罩的 z-index。
drawerClass / maskClass / bodyClass	String	undefined	额外的类名钩子。
transitionName	String	undefined	覆盖过渡名。

事件

事件	载荷	说明
update:modelValue	Boolean	可见性变化。

插槽

插槽	作用域参数	说明
default	—	抽屉内容。