tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
1475
5.7m

抽屉 xDrawer ​

预览

介绍 ​

提供四个方向的弹出。

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-drawer/x-drawer.uvue

使用 ​

ts

<x-drawer></x-drawer>

Props 属性 ​

名称说明类型默认值
customStyle自定义遮罩样式
string""
customWrapStyle自定义容器背景层样式
string""
customFooterStyle自定底部样式。
string""
title标题
string""
showFooter显示底部操作栏
booleanfalse
showTitle是否显示标题
booleantrue
showClose是否显示底部关闭按钮
booleanfalse
overlayClick遮罩是否允许点击被关闭
booleantrue
show显示可v-model:show双向绑定
booleanfalse
showCancel显示取消按钮
booleantrue
cancelText取消按钮的文本
string""
confirmText确认按钮的文本
string""
duration动画时间
number300
watiDuration打开dom的延迟量，如果你打开 弹窗在ios正常。
请不要修改此值。如果遇到打不开，或者 打开 后没动画，关闭不了等可能是sdk bug导致
此时需要加大值来避免。具体加多少以你弹窗内的节点复杂度有关，需要你自行压力测试。
此值仅在ios下生效。
number120
position打开方向。
positionType"bottom"
round打开方向为上和下时的圆角
空值时，取全局配置的圆角。
如果你的位置是左右也想要圆角，那么这个值一定要填写，不会取全局值，主要是左右值不太好看取全局值
会干扰现有布局体系。因此为了向下兼容默认本身空值时，相当于左右时还是无圆角，但你填了值时就会起效。
string""
size左右时为内容宽，
上下时为内容高
百分比，数字字符或者带单位,或者为auto(根据内容自动高度或者宽高)
设置为auto时，内容滚动需要关闭在微信上（:disabledScroll="true"）
string"50%"
maxHeight弹层最大的高度值，默认为屏幕的可视高
提供值时不能为百分比，可以是px,rpx单位数字。如果你不带单位，默认转换为rpx单位。
string""
bgColor背景颜色
string'white'
darkBgColor暗黑背景颜色，如果不提供默认读取全局的sheet配置
string''
overflayBgColor遮罩的背景色
string'rgba(0, 0, 0, 0.4)'
disabledScroll是否禁用内部的scroll标签
禁用后内容不会滚动，如果设定了指定高，内容超出指定高，会被裁切
但如果没有指定高，内容自动的话，高是自动的。
booleanfalse
disabled是否禁用弹出（它是禁用插槽内的弹出不是禁用你手动打开)
booleanfalse
contentMargin内容区域左右和下的边距。
string'16'
widthCoverCenter宽屏时是否让内容剧中显示
并限制其宽为屏幕宽，只展示中间内容以适应宽屏。
注意只有top,bottom才会生效。
booleanfalse
swiperLenClose滑动左右或者上下关闭弹出层
注意如果设置为0就表示关闭该功能。
默认drawer嵌套了scroll-view，再你滚动到顶或者底时，如果继续滑动的距离大于此值关闭层。
但如果你是禁用了内部scroll-view，而是采用自己的scorll-view，此时该功能会与你的滚动手势冲突，请自行考虑。
建议要打开时设置为80-100比较合理
number0
offsetTop距离顶部的偏移量,如果你布局顶会遮罩弹层可以考虑使用此值
string'0'
offsetBottom距离底部的偏移量,如果你布局底会遮罩弹层可以考虑使用此值
string'0'
zIndex弹层的层级
number1100
lazy懒加载
为了解决业务布局节点超多时,你可能需要内容延迟加载以免阻塞动画流畅度.
如果你启用了lazy,每次打开时,动画执行后才会显示内容.这样动画就流畅,不会因为节点过多造成的卡.
开启了此属性后ios端前面的watiDuration属性可以不用再设置了.
booleanfalse
disabledConfirm是否禁用确认按钮
booleanfalse
btnColor底部按钮操作的主题色，空取全局
string""
beforeClose关闭前异步执行的函数，如果返回false阻止关闭，返回true允许关闭
必须返回的是Promise异步函数，且类型返回值必须是Promise<boolean>，不然会报错。
callbackType() : Promise<boolean> => { return Promise.resolve(true) }
closeColor关闭图标的颜色
string"#e6e6e6"
closeDarkColor关闭图标的暗黑颜色
string"#545454"
destroyOnClose关闭后是否销毁内容。
日期时间滚轮反复创建会把页面留在共享数据里，这种场景请设为 false，只隐藏不销毁。
booleantrue

Events 事件 ​

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

Slots 插槽 ​

名称说明数据
trigger标签触发显示遮罩，免于使用变量控制show: Boolean
contentTop内容顶部的额外插槽，仅为下向上弹出（position=bottom)下才会显示。-
bg背景插槽，可以布局在内容下方。你可在此布局：背景图，渐变（使用view）等其它自己想实现的个性化的背景设计要求。-
title标题插槽show: Boolean
default默认插槽-
footer底部操作栏-

Ref 方法 ​

名称参数返回值说明
open--打开 *
close--关闭 *

示例文件路径 ​

json

/pages/fankui/drawer

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<x-sheet>
		<x-text font-size="18" class=" text-weight-b mb-8">抽屉 Drawer</x-text>
		<x-text color="#999999">
			提供四个方向的弹出，如果要居中显示，请使用overlay组件。可以设置高为auto,百分比,最大值
			可以是插槽触发或者变量控制触发
		</x-text>
	</x-sheet>

	<x-sheet class="flex flex-row flex-row-center-between">
		<x-drawer :beforeClose="beforeClose" @open="openDrawer" style="width:24%" size="80%" position="left"
			:show-footer="true">
			<template v-slot:trigger="{show}"><x-button :block="true">左弹出</x-button></template>
			<x-checkbox label="标签"></x-checkbox>
			<x-switch-slider height="60">
				<x-cell min-height="60" :showBottomBorder="false" :card="false" icon="discuss-line" title="可以左滑菜单演示"
					desc="可以双向绑定,手动管理状态"></x-cell>
				<template #menu>
					<view class="flex flex-row flex-row-center-end" style="height: 100%;">
						<view class="flex flex-row flex-row-center-center"
							style="width:110px;background:black;height: 100%;">
							<text class="text-white">分享</text>
						</view>
						<view class="flex flex-row flex-row-center-center"
							style="width:110px;background:red;height: 100%;">
							<text class="text-white">删除</text>
						</view>
					</view>
				</template>
			</x-switch-slider>
			<x-picker :list="list">
				<x-button :block="true">打开选项</x-button>
			</x-picker>
		</x-drawer>
		<x-drawer style="width:24%" position="right">
			<template v-slot:trigger="{show}"><x-button :block="true">右弹出</x-button></template>
		</x-drawer>
		<x-drawer style="width:24%" :show-title="false" :show-close="true" position="top">
			<x-text>此弹层有内容开启了事件协商和手势关闭,向上滑一定的距离能关闭弹层。</x-text>
			<template v-slot:trigger="{show}"><x-button :block="true">顶弹出</x-button></template>
		</x-drawer>
		<x-drawer style="width:24%" :show-close="true" position="bottom">
			<template v-slot:trigger="{show}">
				<x-button :block="true">底弹出</x-button>
			</template>
		</x-drawer>
	</x-sheet>

	<x-sheet>
		<x-text font-size="18" class=" text-weight-b">嵌套</x-text>
	</x-sheet>

	<x-sheet>
		<x-button @click="show2 = true" :block="true">显示底部操作栏+嵌套</x-button>
	</x-sheet>
	<!-- bgColor="rgba(0,0,0,0)"  -->
	<x-drawer customWrapStyle="margin:0 16px 16px 16px;width:auto;border-radius:16px;" :lazy="true" v-model:show="show2"
		overflayBgColor="rgba(0,0,0,0.64)" position="bottom" :show-footer="true" size="64%">
		<template v-slot:contentTop>
			<view
				style="display: flex;flex-direction: row;justify-content: center;margin-bottom: 10px;align-items: center;padding:4px 16px;">
				<x-text font-size="16" color="white">这里是额外的顶部插槽，可以做广告。</x-text>
			</view>
		</template>
		<!-- 定义自定的背景 -->
		<!-- <template v-slot:bg>
				<view style="width:100%;height:100%;background-image: linear-gradient(to bottom,red,blue);"></view>
			</template> -->
		<x-form :show-label="false">
			<x-form-item :show-bottom-border="false">
				<x-input placeholder="请输入帐号" dark-bg-color=""></x-input>
			</x-form-item>
			<x-form-item :show-bottom-border="false">
				<x-input placeholder="请输入密码" dark-bg-color=""></x-input>
			</x-form-item>
			<x-button form-type="form" icon="lock-unlock-fill" :block="true">登入</x-button>
		</x-form>
		<x-drawer :show-close="true" position="bottom">
			<template v-slot:trigger="{show}"><x-button class="mt-32" :block="true">嵌套2</x-button></template>

			<x-drawer :show-close="true" position="bottom" size="34%">
				<template v-slot:trigger="{show}"><x-button :block="true">嵌套3</x-button></template>
			</x-drawer>
		</x-drawer>
		<text class="text-size-m text-grey mt-10 line-8">塞拉利昂共和国总统
			比奥：中国在不长的时间内取得了巨大的发展成就，发展不仅需要领导人提出规划，还需要人民的共同努力。习近平主席非常专注，习主席知道应为中国人民带来什么，他不受外界噪音的干扰，明确了发展愿景，赢得了中国人民的拥护，取得了卓越成效。</text>

	</x-drawer>

	<x-sheet>
		<x-button @click="show = true" :block="true">定义底部插槽</x-button>
	</x-sheet>

	<x-drawer v-model:show="show" position="bottom" :show-footer="true">
		<text class="text-size-m text-grey mt-10 line-8">此弹层有内容开启了事件协商和手势关闭。可以向上滚动内容，或者向下拉会关闭弹层</text>
		<text
			class="text-size-m text-grey mt-10 line-8">国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发塞拉利昂共和国总统
			比奥：中国在不长的时间内取得了巨大的发展成就，发展不仅需要领导人提出规划，还需要人民的共同努力。习近平主席非常专注，习主席知道应为中国人民带来什么，他不受外界噪音的干扰，明确了发展愿景，赢得了中国人民的拥护，取得了卓越成效。</text>
		<text
			class="text-size-m text-grey mt-10 line-8">国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发塞拉利昂共和国总统
			比奥：中国在不长的时间内取得了巨大的发展成就，发展不仅需要领导人提出规划，还需要人民的共同努力。习近平主席非常专注，习主席知道应为中国人民带来什么，他不受外界噪音的干扰，明确了发展愿景，赢得了中国人民的拥护，取得了卓越成效。</text>
		<text
			class="text-size-m text-grey mt-10 line-8">国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发塞拉利昂共和国总统
			比奥：中国在不长的时间内取得了巨大的发展成就，发展不仅需要领导人提出规划，还需要人民的共同努力。习近平主席非常专注，习主席知道应为中国人民带来什么，他不受外界噪音的干扰，明确了发展愿景，赢得了中国人民的拥护，取得了卓越成效。</text>
		<text
			class="text-size-m text-grey mt-10 line-8">国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发塞拉利昂共和国总统
			比奥：中国在不长的时间内取得了巨大的发展成就，发展不仅需要领导人提出规划，还需要人民的共同努力。习近平主席非常专注，习主席知道应为中国人民带来什么，他不受外界噪音的干扰，明确了发展愿景，赢得了中国人民的拥护，取得了卓越成效。</text>
		<template #footer>
			<x-button @click="show=false" :block="true">定义底部插槽</x-button>
		</template>
	</x-drawer>

</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { PICKER_ITEM_INFO } from "@/uni_modules/tmx-ui"

	const items = [
		{
			title: '江西',
			id: "9-1",
			children: [
				{
					title: '南昌',
					id: "132",
					children: [
						{ title: '青山湖区', id: "1-2" } as PICKER_ITEM_INFO,
						{ title: '高新区', id: "1-3", disabled: true } as PICKER_ITEM_INFO,
						{ title: '红谷滩区', id: "1-4" } as PICKER_ITEM_INFO,
					] as PICKER_ITEM_INFO[],

				} as PICKER_ITEM_INFO,
				{

					title: '九江', id: "222",
					children: [
						{ title: '2青山湖区', id: "1-32" } as PICKER_ITEM_INFO,
						{ title: '2高新区', id: "1-33" } as PICKER_ITEM_INFO,
						{ title: '3红谷滩区', id: "1-34" } as PICKER_ITEM_INFO,
					] as PICKER_ITEM_INFO[],
				} as PICKER_ITEM_INFO,
			] as PICKER_ITEM_INFO[],
		} as PICKER_ITEM_INFO,
		{
			title: '安徽',
			id: "10-13",
			children: [
				{
					title: '5南昌',
					id: "3",
					children: [
						{ title: '5青山湖区', id: "1-52" } as PICKER_ITEM_INFO,
						{ title: '5高新区', id: "1-53" } as PICKER_ITEM_INFO,
						{ title: '5红谷滩区', id: "1-54" } as PICKER_ITEM_INFO,
					] as PICKER_ITEM_INFO[],

				} as PICKER_ITEM_INFO,
				{
					title: '5南昌',
					id: "36",
					children: [
						{ title: '6青山湖区', id: "61-52" } as PICKER_ITEM_INFO,
						{ title: '6高新区', id: "61-53" } as PICKER_ITEM_INFO,
						{ title: '6红谷滩区', id: "61-54" } as PICKER_ITEM_INFO,
					] as PICKER_ITEM_INFO[],

				} as PICKER_ITEM_INFO,
			] as PICKER_ITEM_INFO[],
		} as PICKER_ITEM_INFO,

	] as PICKER_ITEM_INFO[];

	const list = ref<PICKER_ITEM_INFO[]>(items)
	const show = ref(false)
	const show2 = ref(false)

	const openDrawer = () => {
		console.log(12)
	}

	const beforeClose = () : Promise<boolean> => {
		return new Promise(res => {
			setTimeout(function () {
				res(false)
			}, 2000);
		})
	}
</script>

<style lang="scss">

</style>
最近更新