Drawer 抽屉

抽屉组件用于在屏幕上显示临时内容，从而提供额外的操作或信息。

基础用法

通过标签 <NueDrawer> 创建一个抽屉。

显示隐藏控制

抽屉组件需要使用 v-model 传入一个响应式属性用于控制抽屉的显示和隐藏。

通过属性 title 设置抽屉的标题。属性值类型为 string。

<template>
    <nue-button @click="basic.visible = true">打开抽屉</nue-button>
    <nue-drawer v-model="basic.visible" title="基础抽屉">
        <nue-div style="padding: 1rem">基础抽屉</nue-div>
    </nue-drawer>
</template>

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

const basic = reactive({ visible: false });
</script>

打开方向

通过属性 open-from 设置抽屉组件打开的方向。属性可选值为 left、right、top、bottom，默认值为 right。

<template>
    <nue-div>
        <nue-button @click="direction.visible1 = true">打开抽屉（上）</nue-button>
        <nue-button @click="direction.visible2 = true">打开抽屉（左）</nue-button>
        <nue-button @click="direction.visible3 = true">打开抽屉（下）</nue-button>
    </nue-div>
    <nue-drawer v-model="direction.visible1" open-from="top" title="定义了打开方向的抽屉">
        <nue-div style="padding: 1rem">从上方打开的抽屉</nue-div>
    </nue-drawer>
    <nue-drawer v-model="direction.visible2" open-from="left" title="定义了打开方向的抽屉">
        <nue-div style="padding: 1rem">从左侧打开的抽屉</nue-div>
    </nue-drawer>
    <nue-drawer v-model="direction.visible3" open-from="bottom" title="定义了打开方向的抽屉">
        <nue-div style="padding: 1rem">从下方打开的抽屉</nue-div>
    </nue-drawer>
</template>

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

const direction = reactive({
    visible1: false,
    visible2: false,
    visible3: false
});
</script>

展开范围以及最小展开范围

通过属性 span 和 min-span 分别设置抽屉的展开范围以及最小展开范围。

span 和 min-span 属性接收 string 类型的值，具体应用到 CSS 的 width、height、min-width、min-height 这些属性上。

TIP

• 由于抽屉的开启方向可以是上下左右四个方向，因此在上下方向时，span 和 min-span 分别指的是高度和最小高度；在左右方向时，span 和 min-span 分别指的是宽度和最小宽度。
• span 和 min-span 的效果会在视口发生变化时体现出来。

<template>
    <nue-button @click="drawerState = true">打开抽屉</nue-button>
    <nue-drawer v-model="drawerState" title="抽屉标题" span="60%" min-span="360px">
        <nue-div style="padding: 1rem">基础抽屉</nue-div>
    </nue-drawer>
</template>

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

const drawerState = ref(false);
</script>

允许通过遮罩层关闭抽屉

抽屉组件默认不允许点击组件遮罩层区域触发关闭动作，通过属性 allow-close-by-overlay 设置允许通过点击遮罩层关闭。

<template>
    <nue-button @click="drawerState = true">打开抽屉</nue-button>
    <nue-drawer v-model="drawerState" allow-close-by-overlay title="基础抽屉">
        <nue-div style="padding: 1rem">基础抽屉</nue-div>
    </nue-drawer>
</template>

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

const drawerState = ref(false);
</script>

自定义头部、主体以及底部

通过指定插槽完成对应内容的自定义。

• header 插槽用于自定义抽屉的头部内容。头部插槽可以解构出 close 方法用于关闭抽屉。
• default 默认插槽用于自定义抽屉的主体内容。
• footer 插槽用于自定义抽屉的底部内容。

<template>
    <nue-button @click="drawerState = true">打开抽屉</nue-button>
    <nue-drawer v-model="drawerState" title="抽屉标题">
        <template #header="{ close }">
            <nue-div align="center" justify="space-between">
                <nue-text>自定义头部</nue-text>
                <nue-button theme="pure" @click="close">关闭</nue-button>
            </nue-div>
        </template>
        <template #default>
            <nue-div style="padding: 1rem">自定义主体</nue-div>
        </template>
        <template #footer>
            <nue-div>自定义底部</nue-div>
        </template>
    </nue-drawer>
</template>

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

const drawerState = ref(false);
</script>

连续打开多个抽屉

抽屉组件可以连续使用，在同一个页面上可以打开多个抽屉，这些抽屉元素会根据打开顺序进行显示而非文档结构。

<template>
    <nue-div>
        <nue-button @click="drawer1State = true">打开抽屉1</nue-button>
        <nue-button @click="drawer2State = true">打开抽屉2</nue-button>
    </nue-div>
    <nue-drawer v-model="drawer1State" title="抽屉1">
        <nue-button @click="drawer2State = true">打开抽屉2</nue-button>
    </nue-drawer>
    <nue-drawer v-model="drawer2State" open-from="left" title="抽屉2">
        <nue-button @click="drawer1State = true">打开抽屉1</nue-button>
    </nue-drawer>
</template>

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

const drawer1State = ref(false);
const drawer2State = ref(false);
</script>

生命周期事件与回调函数

生命周期事件

抽屉组件提供了 before-open、after-open、before-close、after-close 四个生命周期事件，分别在抽屉打开前、打开后、关闭前、关闭后触发。

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

const visible = ref(false);
</script>

<template>
    <nue-div>
        <nue-button @click="visible = true">自定义事件</nue-button>
    </nue-div>
    <nue-drawer
        v-model="visible"
        @before-open="() => NueMessage.info('抽屉打开前')"
        @after-open="() => NueMessage.info('抽屉打开后')"
        @before-close="() => NueMessage.info('抽屉关闭前')"
        @after-close="() => NueMessage.info('抽屉关闭后')"
        title="自定义事件抽屉"
    >
        这是一个自定义事件抽屉
    </nue-drawer>
</template>

<style scoped></style>

关闭抽屉时回调

通过属性 on-close 可以指定一个回调函数，在抽屉关闭时触发。回调函数接收一个参数 done: () => void，用于关闭抽屉。

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

const visible = ref(false);

const handleOnClose = async (done: () => void) => {
    const [isByCancel] = await NueConfirm({ title: '确认关闭抽屉吗？' });
    if (isByCancel) return;
    done();
};
</script>

<template>
    <nue-div>
        <nue-button @click="visible = true">关闭抽屉时回调</nue-button>
    </nue-div>
    <nue-drawer v-model="visible" title="指定了关闭抽屉时回调的抽屉" :on-close="handleOnClose">
        <nue-div style="padding: 1rem">这是一个指定了关闭抽屉时回调的抽屉</nue-div>
    </nue-drawer>
</template>

<style scoped></style>