模态对话框

组件名称

ux-modal : uXui 组件目录/ux-modal

组件图示

组件属性

属性名称	类型	默认值	作用
width	String	580rpx	组件宽度
isCloseBtn	Boolean	true	是否展示关闭按钮
closeBtnStyle	String	color:#2B2E3D; font-size:28rpx;	关闭按钮样式
title	String	''	标题文本
titleStyle	String	line-height:100rpx; font-size:28rpx; font-weight:700;	标题样式
canCloseByShade	Boolean	true	点击遮罩层能否关闭组件
zIndex	Number	99	弹出层 z-index 值
customClass	Array	['ux-bg-white']	组件外层自定义样式

组件方法

01. open() 打开对话框
02. close() 关闭对话框

组件事件

01. @open 打开对话框时触发；
02. @close 关闭对话框时触发；

演示代码

<template>
	<scroll-view class="ux-body ux-page-color ux-flex1">
		<text class="ux-h6 ux-color-grey ux-mt">模态对话框演示</text>
		<view 
		class="ux-bg-white ux-mt">
			<view 
			class="ux-list-items" 
			@tap="open1">
				<view 
				class="ux-list-body ux-border-b" 
				hover-class="ux-tap">
					<view 
					class="ux-list-title">
						<text 
						class="ux-list-title-text ux-list-one-line ux-primary-text">点击这里打开对话框</text>
					</view>
				</view>
				<text 
				class="ux-list-arrow-right ux-icons ux-color-grey">{{"\ue601"}}</text>
			</view>
		</view>
		
		<!-- 模态对话框组件 -->
		<ux-modal 
		:customClass="['ux-bg-white', 'ux-border-radius']" 
		ref="uxmodal1" 
		title="标题文本..">
			<template v-slot:content>
				<view class="ux-padding ux-bg-grey6">
					<text 
					class="ux-text-center ux-text ux-color-grey" 
					style="line-height:100rpx; padding:10rpx;">您确定要这样做吗？</text>
				</view>
			</template>
			<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
			<template v-slot:btns>
				<view 
				class="ux-flex ux-row ux-space-between">
					<view 
					hover-class="ux-tap" 
					class="ux-flex1" 
					style="margin-right:80rpx;">
						<text 
						class="modal-btns ux-color-gray" 
						@tap="close1">取消</text>
					</view>
					<view 
					hover-class="ux-tap" 
					class="ux-flex1" 
					style="margin-left:80rpx;">
						<text 
						class="modal-btns ux-primary-color" 
						@tap="confirm1">确认</text>
					</view>
				</view>
			</template>
		</ux-modal>
	</scroll-view>
</template>
<script>
export default {
	data() {
		return {
			popupRef1 : null as UxModalComponentPublicInstance | null,
		}
	},
	onReady:function(){
		this.popupRef1 = this.$refs['uxmodal1'] as UxModalComponentPublicInstance;
		this.popupRef1?.$callMethod("open");
	},
	methods: {
		open1  : function () {
			this.popupRef1?.$callMethod("open");
		},
		close1 : function () {
			this.popupRef1?.$callMethod("close");
		},
		confirm1 : function(){
			// your code 
			this.popupRef1?.$callMethod("close");
		}
	}
}
</script>
<style scoped>
.modal-btns{line-height:88rpx; font-size:26rpx; text-align:center; width:200rpx;}
</style>