Tu View PlusDrawer 抽屉
触发命令后，从屏幕一侧滑出的抽屉式的面板。
引入方法
- 全局调用：组件为 app.config.globalProperties 添加了全局方法 $drawer。 因此在 vue 实例中可以使用当前页面中的调用方式调用 Drawer。
- 单独调用：此时调用方法为 TuDrawerBox(options)。 定义了打开抽屉的方法，如 TuDrawerBox.open(options)。
- 组件调用：导入 Drawer 组件，通过 Drawer 本身调用。
基础用法
输入框的基本用法。
<template>
<tu-button @click="visible = true">组件调用</tu-button>
<tu-button @click="openFunc">单独调用</tu-button>
<tu-button @click="openGlobal">全局调用</tu-button>
<tu-drawer
v-model:visible="visible"
@ok="visible = false"
@cancel="visible = false"
>
<template #title> 送元二使安西 </template>
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</tu-drawer>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, h } from 'vue';
import { TuDrawerBox } from 'tu-view-plus';
const vm = getCurrentInstance()!;
const { $drawer } = vm.appContext.config.globalProperties;
const visible = ref(false);
const openFunc = () => {
TuDrawerBox.open({
title: '送元二使安西',
content: () => [
h('p', { style: 'line-height: 2' }, '渭城朝雨浥轻尘，客舍青青柳色新。'),
h('p', { style: 'line-height: 2' }, '劝君更尽一杯酒，西出阳关无故人。')
]
});
};
const openGlobal = () => {
$drawer.open({
title: '送元二使安西',
content: () => [
h('p', { style: 'line-height: 2' }, '渭城朝雨浥轻尘，客舍青青柳色新。'),
h('p', { style: 'line-height: 2' }, '劝君更尽一杯酒，西出阳关无故人。')
]
});
};
</script><template>
<tu-button @click="visible = true">组件调用</tu-button>
<tu-button @click="openFunc">单独调用</tu-button>
<tu-button @click="openGlobal">全局调用</tu-button>
<tu-drawer
v-model:visible="visible"
@ok="visible = false"
@cancel="visible = false"
>
<template #title> 送元二使安西 </template>
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</tu-drawer>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, h } from 'vue';
import { TuDrawerBox } from 'tu-view-plus';
const vm = getCurrentInstance()!;
const { $drawer } = vm.appContext.config.globalProperties;
const visible = ref(false);
const openFunc = () => {
TuDrawerBox.open({
title: '送元二使安西',
content: () => [
h('p', { style: 'line-height: 2' }, '渭城朝雨浥轻尘，客舍青青柳色新。'),
h('p', { style: 'line-height: 2' }, '劝君更尽一杯酒，西出阳关无故人。')
]
});
};
const openGlobal = () => {
$drawer.open({
title: '送元二使安西',
content: () => [
h('p', { style: 'line-height: 2' }, '渭城朝雨浥轻尘，客舍青青柳色新。'),
h('p', { style: 'line-height: 2' }, '劝君更尽一杯酒，西出阳关无故人。')
]
});
};
</script>弹出位置
自定义位置，点击触发按钮抽屉从相应的位置滑出。
<template>
<tu-radio-group v-model="position">
<tu-radio label="top">上方</tu-radio>
<tu-radio label="right">右侧</tu-radio>
<tu-radio label="bottom">下方</tu-radio>
<tu-radio label="left">左侧</tu-radio>
</tu-radio-group>
<br />
<br />
<tu-button @click="visible = true">开启抽屉</tu-button>
<tu-drawer
v-model:visible="visible"
:placement="position"
@ok="visible = false"
@cancel="visible = false"
>
<template #title> 送元二使安西 </template>
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</tu-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref(false);
const position = ref('top');
</script><template>
<tu-radio-group v-model="position">
<tu-radio label="top">上方</tu-radio>
<tu-radio label="right">右侧</tu-radio>
<tu-radio label="bottom">下方</tu-radio>
<tu-radio label="left">左侧</tu-radio>
</tu-radio-group>
<br />
<br />
<tu-button @click="visible = true">开启抽屉</tu-button>
<tu-drawer
v-model:visible="visible"
:placement="position"
@ok="visible = false"
@cancel="visible = false"
>
<template #title> 送元二使安西 </template>
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</tu-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref(false);
const position = ref('top');
</script>自定义节点
通过插槽自定义内容，或者设置相应属性来控制显示或隐藏。
<template>
<tu-checkbox-group v-model="custom">
<tu-checkbox label="hideHeader">隐藏头部</tu-checkbox>
<tu-checkbox label="hideFooter">隐藏尾部</tu-checkbox>
<tu-checkbox label="hideCancel">隐藏取消按钮</tu-checkbox>
</tu-checkbox-group>
<br />
<br />
<tu-button @click="visible = true">开启抽屉</tu-button>
<tu-drawer
v-model:visible="visible"
:header="!custom.includes('hideHeader')"
:footer="!custom.includes('hideFooter')"
:hide-cancel="custom.includes('hideCancel')"
@ok="visible = false"
@cancel="visible = false"
>
<template #title> 送元二使安西 </template>
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</tu-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref(false);
const custom = ref([] as string[]);
</script><template>
<tu-checkbox-group v-model="custom">
<tu-checkbox label="hideHeader">隐藏头部</tu-checkbox>
<tu-checkbox label="hideFooter">隐藏尾部</tu-checkbox>
<tu-checkbox label="hideCancel">隐藏取消按钮</tu-checkbox>
</tu-checkbox-group>
<br />
<br />
<tu-button @click="visible = true">开启抽屉</tu-button>
<tu-drawer
v-model:visible="visible"
:header="!custom.includes('hideHeader')"
:footer="!custom.includes('hideFooter')"
:hide-cancel="custom.includes('hideCancel')"
@ok="visible = false"
@cancel="visible = false"
>
<template #title> 送元二使安西 </template>
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</tu-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref(false);
const custom = ref([] as string[]);
</script>嵌套抽屉
在抽屉内打开新的抽屉。
<template>
<tu-button @click="visible = true">开启抽屉</tu-button>
<tu-drawer
v-model:visible="visible"
:width="500"
@ok="visible = false"
@cancel="visible = false"
>
<template #title> 送元二使安西 </template>
<div class="demo-modal-content">
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</div>
<template #footer>
<tu-button type="primary" @click="visible1 = true">开启抽屉</tu-button>
</template>
</tu-drawer>
<tu-drawer
v-model:visible="visible1"
@ok="visible1 = false"
@cancel="visible1 = false"
>
<template #title> 送元二使安西 </template>
<div class="demo-modal-content">
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</div>
</tu-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref(false);
const visible1 = ref(false);
</script><template>
<tu-button @click="visible = true">开启抽屉</tu-button>
<tu-drawer
v-model:visible="visible"
:width="500"
@ok="visible = false"
@cancel="visible = false"
>
<template #title> 送元二使安西 </template>
<div class="demo-modal-content">
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</div>
<template #footer>
<tu-button type="primary" @click="visible1 = true">开启抽屉</tu-button>
</template>
</tu-drawer>
<tu-drawer
v-model:visible="visible1"
@ok="visible1 = false"
@cancel="visible1 = false"
>
<template #title> 送元二使安西 </template>
<div class="demo-modal-content">
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</div>
</tu-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref(false);
const visible1 = ref(false);
</script>挂载位置
通过 popup-container 可以设置弹出层节点的挂载位置。
<template>
<div class="demo-drawer-container" id="parentNode">
<tu-button @click="visible = true">开启抽屉</tu-button>
</div>
<tu-drawer
v-model:visible="visible"
popup-container="#parentNode"
width="280"
size="small"
@ok="visible = false"
@cancel="visible = false"
>
<template #title> 行路难 </template>
<p>金樽清酒斗十千，玉盘珍羞直万钱。</p>
<p>停杯投箸不能食，拔剑四顾心茫然。</p>
<p>欲渡黄河冰塞川，将登太行雪满山。</p>
<p>闲来垂钓碧溪上，忽复乘舟梦日边。</p>
</tu-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref(false);
</script>
<style scoped>
.demo-drawer-container {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
height: 240px;
box-shadow: 0px 0px 6px var(--vp-c-divider);
}
</style><template>
<div class="demo-drawer-container" id="parentNode">
<tu-button @click="visible = true">开启抽屉</tu-button>
</div>
<tu-drawer
v-model:visible="visible"
popup-container="#parentNode"
width="280"
size="small"
@ok="visible = false"
@cancel="visible = false"
>
<template #title> 行路难 </template>
<p>金樽清酒斗十千，玉盘珍羞直万钱。</p>
<p>停杯投箸不能食，拔剑四顾心茫然。</p>
<p>欲渡黄河冰塞川，将登太行雪满山。</p>
<p>闲来垂钓碧溪上，忽复乘舟梦日边。</p>
</tu-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref(false);
</script>
<style scoped>
.demo-drawer-container {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
height: 240px;
box-shadow: 0px 0px 6px var(--vp-c-divider);
}
</style>不同尺寸
组件提供除了默认值 medium 以外的三种尺寸。额外的尺寸：large、small、mini，通过设置 size 属性来配置它们。
<template>
<tu-radio-group v-model="size">
<tu-radio label="mini">超小</tu-radio>
<tu-radio label="small">小型</tu-radio>
<tu-radio label="medium">默认</tu-radio>
<tu-radio label="large">大型</tu-radio>
</tu-radio-group>
<br />
<br />
<tu-button @click="visible = true">开启抽屉</tu-button>
<tu-drawer v-model:visible="visible" :size="size" @cancel="visible = false">
<template #title> 送元二使安西 </template>
<div class="demo-modal-content">
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</div>
</tu-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref(false);
const size = ref('mini');
</script ><template>
<tu-radio-group v-model="size">
<tu-radio label="mini">超小</tu-radio>
<tu-radio label="small">小型</tu-radio>
<tu-radio label="medium">默认</tu-radio>
<tu-radio label="large">大型</tu-radio>
</tu-radio-group>
<br />
<br />
<tu-button @click="visible = true">开启抽屉</tu-button>
<tu-drawer v-model:visible="visible" :size="size" @cancel="visible = false">
<template #title> 送元二使安西 </template>
<div class="demo-modal-content">
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</div>
</tu-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref(false);
const size = ref('mini');
</script >Drawer API
Drawer Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 抽屉是否可见 | Boolean | false |
| default-visible | 抽屉默认是否可见（非受控模式） | Boolean | false |
| placement | 抽屉放置的位置 | String | right |
| title | 标题 | String | - |
| mask | 是否显示遮罩层 | Boolean | true |
| mask-closable | 点击遮罩层是否可以关闭 | Boolean | true |
| closable | 是否展示关闭按钮 | Boolean | true |
| ok-text | 确认按钮的内容 | String | - |
| cancel-text | 取消按钮的内容 | String | - |
| ok-loading | 确认按钮是否为加载中状态 | Boolean | false |
| ok-button-props | 确认按钮的Props | ButtonProps | - |
| cancel-button-props | 取消按钮的Props | ButtonProps | - |
| unmount-on-close | 关闭时是否卸载节点 | Boolean | false |
| width | 抽屉的宽度（仅在placement为right,left时可用） | Number String | 250 |
| height | 抽屉的高度（仅在placement为top,bottom时可用） | Number String | 250 |
| popup-container | 弹出框的挂载容器 | String HTMLElement | body |
| drawer-style | 抽屉的样式 | String Object | - |
| on-before-ok | 触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。 | Function | - |
| on-before-cancel | 触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。 | Function | - |
| esc-to-close | 是否支持 ESC 键关闭抽屉 | Boolean | true |
| render-to-body | 抽屉是否挂载在 body 元素下 | Boolean | true |
| header | 是否展示头部内容 | Boolean | true |
| footer | 是否展示底部内容 | Boolean | true |
| hide-cancel | 是否隐藏取消按钮 | Boolean | false |
Drawer Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| ok | 点击确定按钮时触发 | Function |
| cancel | 点击取消、关闭按钮时触发 | Function |
| open | 抽屉打开后（动画结束）触发 | - |
| close | 抽屉关闭后（动画结束）触发 | - |
| before-open | 对话框打开前触发 | - |
| before-close | 对话框关闭前触发 | - |
Modal Slots
| 参数名 | 描述 |
|---|---|
| header | 页眉 |
| title | 标题 |
| footer | 页脚 |