Modal弹框

Modal弹框:可设置按钮数,按钮样式,提示文字样式等,还可自定义弹框内容。

组件结构

<template>
	<view @touchmove.stop.prevent>
		<view class="tui-modal-box" :style="{width:width,padding:padding,borderRadius:radius}" :class="[(fadeIn || show)?'tui-modal-normal':'tui-modal-scale',show?'tui-modal-show':'']">
			<view v-if="!custom">
				<view class="tui-modal-title" v-if="title">{{title}}</view>
				<view class="tui-modal-content" :class="[title?'':'tui-mtop']" :style="{color:color,fontSize:size+'rpx'}">{{content}}</view>
				<view class="tui-modalBtn-box" :class="[button.length!=2?'tui-flex-column':'']">
					<block v-for="(item,index) in button" :key="index">
						<button class="tui-modal-btn" :class="['tui-'+(item.type || 'primary')+(item.plain?'-outline':''),button.length!=2?'tui-btn-width':'',button.length>2?'tui-mbtm':'',shape=='circle'?'tui-circle-btn':'']"
						 :hover-class="'tui-'+(item.plain?'outline':(item.type || 'primary'))+'-hover'" :data-index="index" @tap="handleClick">{{item.text || "确定"}}</button>
					</block>
				</view>
			</view>
			<view v-else>
				<slot></slot>
			</view>
		</view>
		<view class="tui-modal-mask" :class="[show?'tui-mask-show':'']" @tap="handleClickCancel"></view>
	
	</view>
</template>

组件脚本

<script>
	export default {
		name: "tuiModal",
		
		...省略n行
		
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
show Boolean 控制显示 false
width String 宽度 84%
padding String padding 40rpx 64rpx
radius String 设置圆角 24rpx
title String 标题 ''
content String 详细内容 ''
color String 详细内容字体颜色 #999
size Number 详细内容字体大小 28
shape String 按钮形状按钮形状 circle, square square
button Array 按钮 [{text: "取消",type: "red",plain: true //是否空心}, {text: "确定",type: "red",plain: false}]
maskClosable Boolean 点击遮罩 是否可关闭 true
fadeIn Boolean 淡入效果 false
custom Boolean 自定义弹窗内容 false

methods

名称 描述
@click modal框按钮点击事件,非自定义内容时有效
@cancel 关闭modal框

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/modal/modal

H5二维码

小程序二维码