Drawer 抽屉

当 Dialog 不足以承载超大表单或长文案（如服务条款）时，可使用 Drawer。其 API 与 Dialog 接近，但交互形态为侧滑面板。

TIP

组件已原生支持 v-model，visible.sync 已废弃，请使用 v-model 绑定显隐。

基础用法

从多个方向呼出临时抽屉。

与 Dialog 类似，通过布尔类型的 model-value 控制显示。抽屉包含 title、body、footer：title 可用属性或具名插槽，默认为空；body 为用户内容区。默认从右侧滑入，宽度约为视口 30%，可通过 direction、size 调整。本例演示 before-close 用法，详见属性表。

left to rightright to lefttop to bottombottom to top

vue

<template>
  <u-radio-group v-model="direction">
    <u-radio value="ltr">left to right</u-radio>
    <u-radio value="rtl">right to left</u-radio>
    <u-radio value="ttb">top to bottom</u-radio>
    <u-radio value="btt">bottom to top</u-radio>
  </u-radio-group>

  <u-button type="primary" style="margin-left: 16px" @click="drawer = true">
    open
  </u-button>
  <u-button type="primary" style="margin-left: 16px" @click="drawer2 = true">
    with footer
  </u-button>

  <u-drawer
    v-model="drawer"
    title="I am the title"
    :direction="direction"
    :before-close="handleClose"
  >
    <span>Hi, there!</span>
  </u-drawer>
  <u-drawer v-model="drawer2" :direction="direction">
    <template #header>
      <h4>set title by slot</h4>
    </template>
    <template #default>
      <div>
        <u-radio v-model="radio1" value="Option 1" size="large">
          Option 1
        </u-radio>
        <u-radio v-model="radio1" value="Option 2" size="large">
          Option 2
        </u-radio>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <u-button @click="cancelClick">cancel</u-button>
        <u-button type="primary" @click="confirmClick">confirm</u-button>
      </div>
    </template>
  </u-drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { UMessageBox } from 'uniboot-ui'

import type { DrawerProps } from 'uniboot-ui'

const drawer = ref(false)
const drawer2 = ref(false)
const direction = ref<DrawerProps['direction']>('rtl')
const radio1 = ref('Option 1')
const handleClose = (done: () => void) => {
  UMessageBox.confirm('Are you sure you want to close this?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
function cancelClick() {
  drawer2.value = false
}
function confirmClick() {
  UMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
    .then(() => {
      drawer2.value = false
    })
    .catch(() => {
      // catch error
    })
}
</script>

无标题

不需要标题时可关闭标题区。

将 withHeader 设为 false 可去掉标题区以腾出空间。若需无障碍支持，请仍设置 title 属性。

自定义内容

与 Dialog 相同，可承载丰富交互。

vue

<template>
  <u-button text @click="table = true">
    Open Drawer with nested table
  </u-button>
  <u-button text @click="dialog = true">
    Open Drawer with nested form
  </u-button>
  <u-drawer
    v-model="table"
    title="I have a nested table inside!"
    direction="rtl"
    size="50%"
  >
    <u-table :data="gridData">
      <u-table-column property="date" label="Date" width="150" />
      <u-table-column property="name" label="Name" width="200" />
      <u-table-column property="address" label="Address" />
    </u-table>
  </u-drawer>

  <u-drawer
    v-model="dialog"
    title="I have a nested form inside!"
    :before-close="handleClose"
    direction="ltr"
    class="demo-drawer"
  >
    <div class="demo-drawer__content">
      <u-form :model="form">
        <u-form-item label="Name" :label-width="formLabelWidth">
          <u-input v-model="form.name" autocomplete="off" />
        </u-form-item>
        <u-form-item label="Area" :label-width="formLabelWidth">
          <u-select
            v-model="form.region"
            placeholder="Please select activity area"
          >
            <u-option label="Area1" value="shanghai" />
            <u-option label="Area2" value="beijing" />
          </u-select>
        </u-form-item>
      </u-form>
      <div class="demo-drawer__footer">
        <u-button @click="cancelForm">Cancel</u-button>
        <u-button type="primary" :loading="loading" @click="onClick">
          {{ loading ? 'Submitting ...' : 'Submit' }}
        </u-button>
      </div>
    </div>
  </u-drawer>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { UMessageBox } from 'uniboot-ui'

const formLabelWidth = '80px'
let timer

const table = ref(false)
const dialog = ref(false)
const loading = ref(false)

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const gridData = [
  {
    date: '2016-05-02',
    name: 'Peter Parker',
    address: 'Queens, New York City',
  },
  {
    date: '2016-05-04',
    name: 'Peter Parker',
    address: 'Queens, New York City',
  },
  {
    date: '2016-05-01',
    name: 'Peter Parker',
    address: 'Queens, New York City',
  },
  {
    date: '2016-05-03',
    name: 'Peter Parker',
    address: 'Queens, New York City',
  },
]

const onClick = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    dialog.value = false
  }, 400)
}

const handleClose = (done) => {
  if (loading.value) {
    return
  }
  UMessageBox.confirm('Do you want to submit?')
    .then(() => {
      loading.value = true
      timer = setTimeout(() => {
        done()
        // 动画关闭需要一定的时间
        setTimeout(() => {
          loading.value = false
        }, 400)
      }, 2000)
    })
    .catch(() => {
      // catch error
    })
}

const cancelForm = () => {
  loading.value = false
  dialog.value = false
  clearTimeout(timer)
}
</script>

自定义头部

使用 header 插槽自定义标题区域；请同时设置 title 属性，或使用插槽属性 titleId 指定朗读为标题的元素。

可调整宽度

拖拽边缘调整尺寸。

设置 resizable 为 true 启用。

toprightbottomleft

嵌套抽屉

与 Dialog 类似支持多层。

多层抽屉请将内层 append-to-body 设为 true。

遮罩层

modal 为 false 时不显示遮罩。

支持 modal-penetrable，允许事件穿透。

TIP

抽屉内内容建议懒渲染：未打开前不应影响首屏性能；DOM 操作请在 open 事件后或通过 ref 进行。

TIP

destroy-on-close 表示关闭后是否销毁内部子树；若希望每次打开都重新走子组件的 mounted，可开启该属性。

API

属性

名称	说明	类型	默认值
model-value / v-model	是否显示	`boolean`	false
append-to-body	是否插入到 `document.body`；嵌套抽屉必须为 true	`boolean`	false
append-to	挂载目标；会覆盖 `append-to-body`	`CSSSelector` / `HTMLElement`	body
lock-scroll	显示时是否锁定 `body` 滚动	`boolean`	true
before-close	若设置则拦截关闭；`done` 为函数，调用时传入 `true` 或不传参可取消关闭	`Function`	—
close-on-click-modal	点击遮罩是否关闭	`boolean`	true
close-on-press-escape	按 ESC 是否关闭	`boolean`	true
open-delay	打开前延迟（毫秒）	`number`	0
close-delay	关闭前延迟（毫秒）	`number`	0
destroy-on-close	关闭后是否销毁内部内容	`boolean`	false
modal	是否显示遮罩	`boolean`	true
modal-penetrable	遮罩是否可穿透；需将 `modal` 设为 `false`	`boolean`	false
direction	打开方向	`enum`	rtl
resizable	是否可调整尺寸	`boolean`	false
show-close	是否显示右上角关闭按钮	`boolean`	true
size	抽屉尺寸：水平方向影响宽度，垂直方向影响高度。`number` 表示像素；`string` 若为 `x%` 则按百分比，否则按像素解析	`number` / `string`	30%
title	标题；也可用具名插槽，详见插槽说明	`string`	—
with-header	是否显示头部；为 `false` 时 `title` 属性与 `title` 插槽均不展示	`boolean`	true
modal-class	遮罩额外类名	`string`	—
header-class	头部包裹层类名	`string`	—
body-class	内容区包裹层类名	`string`	—
footer-class	底部包裹层类名	`string`	—
z-index	层级	`number`	—
header-aria-level a11y	头部 `aria-level`	`string`	2

WARNING

custom-class 已废弃，请改用 class。

事件

名称	说明	类型
open	打开动画开始前	`Function`
opened	打开动画结束后	`Function`
close	关闭动画开始前	`Function`
closed	关闭动画结束后	`Function`
open-auto-focus	打开且内容聚焦后	`Function`
close-auto-focus	关闭且焦点处理后	`Function`
resize-start	开始调整尺寸（`resizable` 开启时）	`Function`
resize	调整尺寸过程中	`Function`
resize-end	结束调整尺寸	`Function`

插槽

名称	说明
default	主体内容
header	头部；替换后不显示标题文案，关闭按钮仍保留
footer	底部

WARNING

title 插槽已废弃。

暴露

名称	说明
handleClose	关闭抽屉，内部会调用 `before-close`。

Dialog 对话框

Loading 加载

Drawer 抽屉 ​

基础用法 ​

无标题 ​

自定义内容 ​

自定义头部 ​

可调整宽度 ​

嵌套抽屉 ​

遮罩层 ​

API ​

属性 ​

事件 ​

插槽 ​

暴露 ​