tui-modal 弹框 | ThorUI文档

介绍

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

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiModal from "@/components/thorui/tui-modal/tui-modal.vue"
export default {
	components:{
		tuiModal
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	√	√	√	√	√	√	√

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-modal": "/components/thorui/tui-modal/tui-modal"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础用法

通过 show 属性控制显示隐藏，title 属性为标题，content 属性为详细描述。

<!--uni-app-->
<tui-modal :show="modal"  title="提示" content="确定退出登录吗？"></tui-modal>

<!--微信小程序-->
<tui-modal show="{{modal}}"  title="提示" content="确定退出登录吗？"></tui-modal>

设置提示文本样式

通过 color 属性设置颜色，size 属性设置字体大小。

<!--uni-app-->
<tui-modal :show="modal" content="确定退出登录吗？" color="#333" :size="32"></tui-modal>

<!--微信小程序-->
<tui-modal show="{{modal}}" content="确定退出登录吗？" color="#333" size="{{32}}"></tui-modal>

自定义弹窗内容

通过 custom 属性设置弹框为自定义内容模式。

<!--uni-app-->
<tui-modal :show="modal" custom>
	<view class="tui-modal-custom">
		<image src="/static/images/chat/fail.png" class="tui-tips-img"></image>
		<view class="tui-modal-custom-text">我是自定内容</view>
		<tui-button height="72rpx" :size="28" type="danger" shape="circle" @click="handleClick">确定</tui-button>
	</view>
</tui-modal>

<!--微信小程序-->
<tui-modal show="{{modal}}" custom>
	<view class="tui-modal-custom">
		<image src="/static/images/chat/fail.png" class="tui-tips-img"></image>
		<view class="tui-modal-custom-text">我是自定内容</view>
		<tui-button height="72rpx" size="{{28}}" type="danger" shape="circle" bindclick="handleClick">确定</tui-button>
	</view>
</tui-modal>

# Slots

名称	说明
default	自定义内容模式时生效，弹框显示内容

# Props

参数	类型	说明	默认值
show	Boolean	控制显示	false
width	String	宽度	84%
backgroundColor	String	背景颜色	#fff
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
zIndex	Number	容器 z-index	9997
maskZIndex	Number	mask z-index	9990