Drawer 抽屉

屏幕边缘滑出的浮层面板，用于展示详细信息或进行复杂操作。带有霓虹发光效果的赛博朋克主题抽屉组件。

基础用法

最简单的用法，通过 v-model 控制抽屉的显示和隐藏。

vue

<script setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <ExButton type="primary" @click="visible = true">打开抽屉</ExButton>
  <ExDrawer v-model="visible" title="基础抽屉">
    <p>这是抽屉的内容</p>
    <p>可以放置任何内容</p>
  </ExDrawer>
</template>

不同方向

通过 placement 属性可以设置抽屉从不同方向滑出。

vue

<script setup>
import { ref } from 'vue'

const visibleLeft = ref(false)
const visibleRight = ref(false)
const visibleTop = ref(false)
const visibleBottom = ref(false)
</script>

<template>
  <ExButton @click="visibleLeft = true">从左侧打开</ExButton>
  <ExButton @click="visibleRight = true">从右侧打开</ExButton>
  <ExButton @click="visibleTop = true">从顶部打开</ExButton>
  <ExButton @click="visibleBottom = true">从底部打开</ExButton>

  <ExDrawer v-model="visibleLeft" title="左侧抽屉" placement="left">
    <p>从左侧滑出的抽屉</p>
  </ExDrawer>

  <ExDrawer v-model="visibleRight" title="右侧抽屉" placement="right">
    <p>从右侧滑出的抽屉</p>
  </ExDrawer>

  <ExDrawer v-model="visibleTop" title="顶部抽屉" placement="top">
    <p>从顶部滑出的抽屉</p>
  </ExDrawer>

  <ExDrawer v-model="visibleBottom" title="底部抽屉" placement="bottom">
    <p>从底部滑出的抽屉</p>
  </ExDrawer>
</template>

不同尺寸

通过 size 属性可以设置抽屉的尺寸，支持预设尺寸和自定义尺寸。

vue

<script setup>
import { ref } from 'vue'

const visibleSmall = ref(false)
const visibleMedium = ref(false)
const visibleLarge = ref(false)
const visibleCustom = ref(false)
</script>

<template>
  <ExButton @click="visibleSmall = true">小尺寸</ExButton>
  <ExButton @click="visibleMedium = true">中等尺寸</ExButton>
  <ExButton @click="visibleLarge = true">大尺寸</ExButton>
  <ExButton @click="visibleCustom = true">自定义尺寸</ExButton>

  <ExDrawer v-model="visibleSmall" title="小尺寸抽屉" size="small">
    <p>宽度 300px</p>
  </ExDrawer>

  <ExDrawer v-model="visibleMedium" title="中等尺寸抽屉" size="medium">
    <p>宽度 500px（默认）</p>
  </ExDrawer>

  <ExDrawer v-model="visibleLarge" title="大尺寸抽屉" size="large">
    <p>宽度 800px</p>
  </ExDrawer>

  <ExDrawer v-model="visibleCustom" title="自定义尺寸抽屉" :size="600">
    <p>自定义宽度 600px</p>
  </ExDrawer>
</template>

带底部操作栏

通过 show-footer 属性可以显示底部操作栏。

vue

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const handleOk = () => {
  console.log('确认')
  visible.value = false
}

const handleCancel = () => {
  console.log('取消')
}
</script>

<template>
  <ExButton type="primary" @click="visible = true">打开抽屉</ExButton>
  <ExDrawer 
    v-model="visible" 
    title="带底部操作栏的抽屉"
    show-footer
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p>这是抽屉的内容</p>
  </ExDrawer>
</template>

无遮罩层

通过 mask 属性可以控制是否显示遮罩层。

vue

<script setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <ExButton @click="visible = true">打开无遮罩抽屉</ExButton>
  <ExDrawer v-model="visible" title="无遮罩层抽屉" :mask="false">
    <p>没有遮罩层的抽屉</p>
  </ExDrawer>
</template>

禁止点击遮罩关闭

通过 mask-closable 属性可以控制点击遮罩层是否关闭抽屉。

vue

<script setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <ExButton @click="visible = true">打开抽屉</ExButton>
  <ExDrawer v-model="visible" title="禁止点击遮罩关闭" :mask-closable="false">
    <p>点击遮罩层不会关闭抽屉</p>
  </ExDrawer>
</template>

销毁子元素

通过 destroy-on-close 属性可以在关闭时销毁子元素。

vue

<script setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <ExButton @click="visible = true">打开抽屉</ExButton>
  <ExDrawer v-model="visible" title="销毁子元素" destroy-on-close>
    <p>关闭时会销毁这些内容</p>
    <p>{{ new Date().toLocaleTimeString() }}</p>
  </ExDrawer>
</template>

主题示例

抽屉应用。

vue

<script setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <ExButton type="primary" @click="visible = true">角色设置</ExButton>

  <ExDrawer 
    v-model="visible" 
    title="🎮 角色设置"
    size="large"
    show-footer
  >
    <!-- 角色设置内容 -->
  </ExDrawer>
</template>

API

Drawer Props

参数	说明	类型	默认值
`v-model`	是否显示抽屉	`boolean`	`false`
`title`	抽屉标题	`string`	—
`placement`	抽屉位置	`'left' \| 'right' \| 'top' \| 'bottom'`	`'right'`
`size`	抽屉尺寸	`'small' \| 'medium' \| 'large' \| string \| number`	`'medium'`
`closable`	是否显示关闭按钮	`boolean`	`true`
`mask`	是否显示遮罩层	`boolean`	`true`
`mask-closable`	点击遮罩层是否关闭	`boolean`	`true`
`destroy-on-close`	是否在关闭时销毁子元素	`boolean`	`false`
`show-footer`	是否显示底部操作栏	`boolean`	`false`
`ok-text`	确认按钮文字	`string`	`'确定'`
`cancel-text`	取消按钮文字	`string`	`'取消'`
`ok-type`	确认按钮类型	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'primary'`
`ok-loading`	确认按钮是否加载中	`boolean`	`false`
`ok-disabled`	是否禁用确认按钮	`boolean`	`false`
`cancel-disabled`	是否禁用取消按钮	`boolean`	`false`
`custom-class`	自定义类名	`string`	—
`custom-style`	自定义样式	`string \| Record<string, string \| number>`	—
`z-index`	层级	`number`	`1000`
`lock-scroll`	是否锁定滚动	`boolean`	`true`
`before-open`	打开前的回调	`() => boolean \| Promise<boolean>`	—
`before-close`	关闭前的回调	`() => boolean \| Promise<boolean>`	—
`aria-label`	无障碍标签	`string`	—

Drawer Events

事件名	说明	类型
`open`	打开时触发	`() => void`
`opened`	打开动画结束后触发	`() => void`
`close`	关闭时触发	`() => void`
`closed`	关闭动画结束后触发	`() => void`
`ok`	点击确认按钮时触发	`() => void`
`cancel`	点击取消按钮时触发	`() => void`

Drawer Slots

插槽名	说明
`default`	抽屉内容
`title`	自定义标题
`header`	自定义头部
`footer`	自定义底部

Drawer Methods

方法名	说明	类型
`open`	打开抽屉	`() => void`
`close`	关闭抽屉	`() => void`
`getElement`	获取抽屉DOM元素	`() => HTMLDivElement \| null`

无障碍支持

使用 role="dialog" 和 aria-modal="true" 标记抽屉
支持 ESC 键关闭
完整的 ARIA 属性支持
支持屏幕阅读器
自动锁定和恢复页面滚动

主题定制

可以通过 CSS 变量自定义抽屉样式：

css

:root {
  --ex-drawer-bg: var(--ex-color-bg-elevated);
  --ex-drawer-border: var(--ex-color-border-primary);
  --ex-drawer-shadow: var(--ex-shadow-2xl);
  --ex-drawer-mask-bg: rgba(0, 0, 0, 0.7);
}

Drawer 抽屉 ​

基础用法 ​

不同方向 ​

不同尺寸 ​

带底部操作栏 ​

无遮罩层 ​

禁止点击遮罩关闭 ​

销毁子元素 ​

主题示例 ​

API ​

Drawer Props ​

Drawer Events ​

Drawer Slots ​

Drawer Methods ​

无障碍支持 ​

主题定制 ​