Appearance

Return to top
On this page

Drawer 抽屉

屏幕边缘滑出的浮层面板。

基础用法

需要设置 visible 属性，它接收 Boolean，当为 true 时显示 Drawer。 Drawer 分为三个部分：header、body 和 footer，header 和 footer 分别需要具名为headerContent和 footerContent 的 slot。 title 属性用于定义标题，它是可选的，默认值为空。

direction属性可以控制抽屉弹出方向

显示代码
vue
<template>
  <n-drawer
    :visible="normalViaible"
    @cancel="handleClose"
    @confirm="handleClose"
    title="我就是个传进来的标题"
    size="500px"
  >
    这是内容这是内容这是内容这是内容这是内容
  </n-drawer>

  <n-button @click="openDefaultDrawer">点击显示 drawer</n-button>

  <n-radio v-model="direction" label="right">从右面弹出</n-radio>
  <n-radio v-model="direction" label="left">从左面弹出</n-radio>
  <n-radio v-model="direction" label="bottom">从下面弹出</n-radio>
  <n-radio v-model="direction" label="top">从上面弹出</n-radio>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const normalViaible = ref(false);
const direction = ref('right');

const openDefaultDrawer = () => {
  normalViaible.value = true;
};

const handleClose = () => {
  normalViaible.value = false;
};
</script>

自定义内容

对话框的内容可以是任何东西

显示代码
vue
<template>
  <n-drawer
    :visible="contentVisible"
    @cancel="handleClose"
    @confirm="handleClose"
    title="文件上传"
    size="500px"
  >
  <n-button @click="openContentDrawer">自定义内容的 drawer</n-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const contentVisible = ref(false)
const openContentDrawer = () => {
  contentVisible.value = true;
};

const handleClose = () => {
  contentVisible.value = false;
};
</script>

自定义头部和尾部

对话框的头部和尾部可以通过 slot 自定义

显示代码
vue
<template>
  <n-drawer
    :visible="customVisible"
    :closable="false"
    @cancel="handleClose"
    @confirm="handleClose"
    title="我就是个传进来的标题"
    size="500px"
  >
    <template v-slot:headerContent>
      <div class="mn-header">
        <span> This is a custom header!</span>
        <n-button type="danger" @click="handleClose">close</n-button>
      </div>
    </template>
    <template v-slot:footerContent>
      <div class="mn-footer">~~我是一条小尾巴~~</div>
    </template>
    这是内容这是内容这是内容这是内容这是内容
  </n-drawer>

  <n-button @click="openCustomDrawer">显示自定义头尾 drawer</n-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const customVisible = ref(false);
const openCustomDrawer = () => {
  customVisible.value = true;
};
const handleClose = () => {
  customVisible.value = false;
};
</script>

API

参数说明类型可选值默认值
direction自定义弹出方向string['top', 'left', 'bottom', 'right']'right'
title标题string————
visibledrawer 是否出现boolean——false
cancelTextcancel 按钮的文字string——'取消'
confirmTextconfirm 按钮的文字string——'确认'
showHeader是否需要头部boolean——true
showFooter是否需要尾部boolean——true
closable是否需要 closeboolean——true
maskClosable点击蒙层是否可以关闭boolean——true
showCancelButton是否需要 cancel 按钮boolean——true
showConfirmButton是否需要 confirm 按钮boolean——true
size自定义大小，可以是具体像素值或百分比string——'auto'

Slots

插槽名描述
defaultDrawer 的内容
headerContent头部插槽
footerContent尾部插槽