N-UI

Appearance

Drawer 抽屉 ​

有些时候，Dialog 组件并不满足我们的需求，比如你的表单很长，亦或是你需要临时展示一些文档，Drawer 拥有和 Dialog 几乎相同的 API，在 UI 上带来不一样的体验。

基础用法 ​

呼出一个临时的侧边栏，可以从多个方向呼出。

vue
<template>
  <NButton @click="show = true">打开抽屉</NButton>
  <NDrawer v-model="show" title="标题">
    <p>这是一段内容</p>
  </NDrawer>
</template>

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

不同方向 ​

使用 placement 属性来设置抽屉的方向。

vue
<template>
  <div style="display: flex; gap: 12px;">
    <NButton @click="showLeft = true">左侧抽屉</NButton>
    <NButton @click="showRight = true">右侧抽屉</NButton>
    <NButton @click="showTop = true">顶部抽屉</NButton>
    <NButton @click="showBottom = true">底部抽屉</NButton>
  </div>

  <NDrawer v-model="showLeft" placement="left" title="左侧抽屉">
    <p>这是左侧抽屉内容</p>
  </NDrawer>

  <NDrawer v-model="showRight" placement="right" title="右侧抽屉">
    <p>这是右侧抽屉内容</p>
  </NDrawer>

  <NDrawer v-model="showTop" placement="top" title="顶部抽屉">
    <p>这是顶部抽屉内容</p>
  </NDrawer>

  <NDrawer v-model="showBottom" placement="bottom" title="底部抽屉">
    <p>这是底部抽屉内容</p>
  </NDrawer>
</template>

<script setup>
import { ref } from 'vue'
const showLeft = ref(false)
const showRight = ref(false)
const showTop = ref(false)
const showBottom = ref(false)
</script>

自定义宽度 ​

使用 width 属性来设置抽屉的宽度。

vue
<template>
  <NButton @click="show = true">打开抽屉</NButton>
  <NDrawer v-model="show" title="自定义宽度" width="500px">
    <p>这是抽屉内容</p>
  </NDrawer>
</template>

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

隐藏标题 ​

不设置 title 属性即可隐藏标题。

vue
<template>
  <NButton @click="show = true">打开抽屉</NButton>
  <NDrawer v-model="show">
    <p>这是没有标题的抽屉</p>
  </NDrawer>
</template>

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

隐藏关闭按钮 ​

设置 show-close 为 false 来隐藏关闭按钮。

vue
<template>
  <NButton @click="show = true">打开抽屉</NButton>
  <NDrawer v-model="show" title="提示" :showClose="false">
    <p>没有关闭按钮</p>
    <template #footer>
      <NButton @click="show = false">关闭</NButton>
    </template>
  </NDrawer>
</template>

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

禁止点击遮罩关闭 ​

设置 close-on-click-modal 为 false 来禁止点击遮罩关闭。

vue
<template>
  <NButton @click="show = true">打开抽屉</NButton>
  <NDrawer v-model="show" title="提示" :closeOnClickModal="false">
    <p>点击遮罩不会关闭</p>
    <template #footer>
      <NButton @click="show = false">关闭</NButton>
    </template>
  </NDrawer>
</template>

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

显示页脚 ​

设置 show-footer 属性来显示页脚。

vue
<template>
  <NButton @click="show = true">打开抽屉</NButton>
  <NDrawer v-model="show" title="提示" showFooter>
    <p>这是抽屉内容</p>
    <template #footer>
      <div style="display: flex; justify-content: flex-end; gap: 12px;">
        <NButton @click="show = false">取消</NButton>
        <NButton type="primary" @click="show = false">确定</NButton>
      </div>
    </template>
  </NDrawer>
</template>

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

自定义页脚 ​

使用 footer 插槽来自定义页脚内容。

vue
<template>
  <NButton @click="show = true">打开抽屉</NButton>
  <NDrawer v-model="show" title="提示">
    <p>这是抽屉内容</p>
    <template #footer>
      <div style="display: flex; justify-content: space-between;">
        <span>左侧内容</span>
        <div style="display: flex; gap: 12px;">
          <NButton @click="show = false">取消</NButton>
          <NButton type="primary" @click="show = false">确定</NButton>
        </div>
      </div>
    </template>
  </NDrawer>
</template>

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

嵌套抽屉 ​

可以在一个抽屉中嵌套另一个抽屉。

vue
<template>
  <NButton @click="showOuter = true">打开外层抽屉</NButton>
  <NDrawer v-model="showOuter" title="外层抽屉">
    <p>这是外层抽屉内容</p>
    <NButton @click="showInner = true">打开内层抽屉</NButton>
    <NDrawer v-model="showInner" title="内层抽屉" width="300px">
      <p>这是内层抽屉内容</p>
    </NDrawer>
  </NDrawer>
</template>

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

表单抽屉 ​

抽屉中嵌入表单。

vue
<template>
  <NButton @click="show = true">打开表单抽屉</NButton>
  <NDrawer v-model="show" title="用户信息" width="500px">
    <NForm :model="form" labelWidth="80px">
      <NFormItem label="姓名">
        <NInput v-model="form.name" placeholder="请输入姓名" />
      </NFormItem>
      <NFormItem label="邮箱">
        <NInput v-model="form.email" placeholder="请输入邮箱" />
      </NFormItem>
      <NFormItem label="地址">
        <NInput v-model="form.address" type="textarea" placeholder="请输入地址" />
      </NFormItem>
    </NForm>
    <template #footer>
      <div style="display: flex; justify-content: flex-end; gap: 12px;">
        <NButton @click="show = false">取消</NButton>
        <NButton type="primary" @click="handleSubmit">确定</NButton>
      </div>
    </template>
  </NDrawer>
</template>

<script setup>
import { ref } from 'vue')
const show = ref(false)
const form = ref({
  name: '',
  email: '',
  address: '',
})

const handleSubmit = () => {
  console.log('提交表单:', form.value)
  show.value = false
}
</script>

API ​

Props ​

属性说明类型默认值
modelValue是否显示 Drawerbooleanfalse
titleDrawer 的标题string''
widthDrawer 的宽度string | number'360px'
placementDrawer 打开的方向'left' | 'right' | 'top' | 'bottom''right'
closeOnClickModal是否可以通过点击遮罩关闭booleantrue
showClose是否显示关闭按钮booleantrue
showFooter是否显示底部按钮booleanfalse

Events ​

事件名说明类型
update:modelValue显示状态改变时触发(value: boolean) => void
openDrawer 打开时触发() => void
closeDrawer 关闭时触发() => void

Slots ​

插槽名说明
defaultDrawer 的内容
headerDrawer 标题区的内容
footerDrawer 底部按钮区的内容