Alert弹框

Alert弹框:可设置提示文本,按钮文本及样式。

组件结构

<template>
	<view>
		<view class="tui-alert-class tui-alert-box" :class="[show?'tui-alert-show':'']">
			<view class="tui-alert-content" :style="{fontSize:size+'rpx',color:color}">
				<slot></slot>
			</view>
			<view class="tui-alert-btn" :style="{color:btnColor}" hover-class="tui-alert-btn-hover" :hover-stay-time="150"
			 @tap.stop="handleClick">{{btnText}}</view>
		</view>
		<view class="tui-alert-mask" :class="[show?'tui-alert-mask-show':'']" @tap.stop="handleClickCancel"></view>
	</view>
</template>

组件脚本

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

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
show Boolean 控制显示 false
size Number 提示信息字体大小 30
color String 提示信息字体颜色 #333
btnColor String 按钮字体颜色 #EB0909
btnText String 按钮文字 确定
maskClosable Boolean 点击遮罩 是否可关闭 false

methods

名称 描述
@click 按钮点击事件
@cancel 遮罩点击事件,关闭弹框

示例

H5预览地址

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

H5二维码

小程序二维码