抽屉 TmDrawer

提供四个方向的弹出。

🌶️ 示例

查看模拟效果＋

示例模板

vue

<script setup lang="ts">
import { ref } from "vue"
const show = ref(false)
const beforeClose = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true)
        }, 3000)
    })
}
</script>
<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-16 d-block">抽屉 Drawer</tm-text>
            <tm-text color="#999999">
                提供四个方向的弹出，如果要居中显示，请使用overlay组件。可以设置高为auto,百分比,最大值
                可以是插槽触发或者变量控制触发
            </tm-text>
        </tm-sheet>

        <tm-sheet class="flex flex-row flex-row-center-between">
            <tm-drawer style="width:24%" size="80%" position="left">
                <template #trigger><tm-button :block="true">左弹出</tm-button></template>

            </tm-drawer>
            <tm-drawer style="width:24%" position="right">
                <template #trigger><tm-button :block="true">右弹出</tm-button></template>
            </tm-drawer>
            <tm-drawer :swiper-len-close="100" style="width:24%" :show-title="false" :show-close="true" position="top">
                <tm-text>此弹层有内容开启了事件协商和手势关闭,向上滑一定的距离能关闭弹层。</tm-text>
                <template #trigger><tm-button :block="true">顶弹出</tm-button></template>
            </tm-drawer>
            <tm-drawer style="width:24%" :show-close="true" position="bottom">
                <template #trigger>
                    <tm-button :block="true">底弹出</tm-button>
                </template>
            </tm-drawer>
        </tm-sheet>


        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-24 d-block">嵌套</tm-text>
            <tm-drawer :show-footer="true" size="auto">
                <template v-slot:trigger><tm-button color="success" :block="true">打开嵌套</tm-button></template>
                <tm-drawer size="auto">
                    <template v-slot:trigger><tm-button :block="true">打开嵌套1</tm-button></template>
                    <tm-text class="text-size-m text-grey  line-8">当前弹层内容为自动高度</tm-text>
                    <tm-drawer size="auto">
                        <template v-slot:trigger><tm-button color="success" :block="true">打开嵌套2</tm-button></template>
                        <tm-text class="text-size-m text-grey  line-8">当前弹层内容为自动高度</tm-text>
                    </tm-drawer>
                </tm-drawer>
            </tm-drawer>

        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-24 d-block">确认前异步执行beforeClose</tm-text>
            <tm-drawer :beforeClose="beforeClose" :show-footer="true">
                <template v-slot:trigger><tm-button color="warn" :block="true">打开</tm-button></template>
                <tm-text>点确认 按钮，会等待3秒再关闭。</tm-text>
            </tm-drawer>
        </tm-sheet>

        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-10 d-block">默认高度，禁用遮罩关闭</tm-text>
            <tm-text color="#999999" class="mb-24 d-block">
                点击遮罩禁用关闭,同时内容出现弹跳提示
            </tm-text>

            <tm-drawer :overlayClick="false" :show-close="true" :showCancel="false" size="550rpx" title="请阅读协议"
                confirmText="我已阅读" position="right">
                <template #trigger><tm-button :block="true" color="error">禁用遮罩,弹跳提醒</tm-button></template>
                <tm-text color="#999999">
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                </tm-text>
            </tm-drawer>
        </tm-sheet>

        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-24 d-block">底部插槽及变量控制显示</tm-text>
            <tm-button @click="show = true" :block="true">打开</tm-button>
            <tm-drawer v-model:show="show" title="内容可滚动" size="30%" position="bottom" :show-footer="true">
                <tm-text color="#999999">
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                </tm-text>
                <template #footer>
                    <tm-button @click="show = false" :block="true" color="red" class="flex-1">定义底部插槽</tm-button>
                </template>
            </tm-drawer>
        </tm-sheet>

        <view style="height:50px"></view>

    </view>
</template>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
customStyle	string	""	自定义遮罩样式
title	string	"标题"	标题
showFooter	boolean	false	显示底部操作栏
showTitle	boolean	true	是否显示标题
showClose	boolean	false	是否显示底部关闭按钮
overlayClick	boolean	true	遮罩是否允许点击被关闭
show	boolean	false	显示可v-model:show双向绑定
showCancel	boolean	true	显示取消按钮
cancelText	string	"取消"	取消按钮的文本
confirmText	string	"确认"	确认按钮的文本
duration	number	300	动画时间
position	string	"bottom"	打开方向。
round	string\|number	""	打开方向为上和下时的圆角空值时，取全局配置的圆角。
size	string\|number	"50%"	左右时为内容宽，上下时为内容高百分比，数字字符或者带单位,或者为auto(根据内容自动高度或者宽高)
maxHeight	string	""	弹层最大的高度值，默认为屏幕的可视高提供值时不能为百分比，可以是px,rpx单位数字。如果你不带单位，默认转换为rpx单位。
bgColor	string	'white'	背景颜色
darkBgColor	string	''	暗黑背景颜色，如果不提供默认读取全局的sheet配置
disabledScroll	boolean	false	是否禁用内部的scroll标签禁用后内容不会滚动，如果设定了指定高，内容超出指定高，会被裁切但如果没有指定高，内容自动的话，高是自动的。
contentMargin	string	'24'	内容区域左右和下的边距。
widthCoverCenter	boolean	false	宽屏时是否让内容剧中显示并限制其它宽为屏幕宽，只展示中间内容以适应宽屏。注意只有top,bottom才会生效。
offsetTop	string\|number	'0'	距离顶部的偏移量
zIndex	string\|number	1100	弹层的层级
lazy	boolean	false	懒加载为了解决业务布局节点超多时,你可能需要内容延迟加载以免阻塞动画流畅度.如果你启用了lazy,每天次打开时,动画执行后才会显示内容.这样动画就流畅,不会因为节点过多造成的卡.
beforeClose	() => Promise<boolean>	true	关闭前执行，可以是异步函数，只有当用户点击confirm时才会触发。如果返回false将阻止关闭。true允许关闭。

🌹 事件

事件名	参数	返回数据	描述
click	-	-	点击遮罩事件
close	-	-	关闭是触发
open	-	-	打开时触发
beforeOpen	-	-	打开前执行
beforeClose	-	-	关闭前执行
update:show	-	-	等同v-model:show
cancel	-	-	取消时触发
confirm	-	-	确认时触发

🌽 slot插槽

插槽名	数据	描述
trigger	名称：binding,show 类型：-
{Boolean} show - 当前是否已显示
title	名称：binding,show 类型：-
{Boolean} show - 当前是否已显示
default	-	默认插槽
footer	-	底部操作栏

🥗 ref方法

方法名	参数	返回值	描述

反馈组件 ​

抽屉 TmDrawer ​

🌶️ 示例 ​

🌶️ 兼容性 ​

🌱 参数 ​

🌹 事件 ​

🌽 slot插槽 ​

🥗 ref方法 ​

反馈组件

抽屉 TmDrawer

🌶️ 示例

🌶️ 兼容性

🌱 参数

🌹 事件

🌽 slot插槽

🥗 ref方法