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 属性为详细描述。

注：当设置点击遮罩可关闭时，需监听cancel事件，并在事件中将show属性值设置为false

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

// data 数据 及 方法
export default {
 data() {
 	return {
 		modal: false
 	}
 },
 methods: {
 	//调用此方法显示组件
 	showModal() {
 		this.modal = true;
 	},
 	//隐藏组件
 	hideModal() {
 		this.modal = false;
 	},
 	handleClick(e){
 		let index = e.index;
 		if (index === 0) {
 			this.tui.toast('你点击了取消按钮');
 		} else {
 			this.tui.toast('你点击了确定按钮');
 		}
 		this.hideModal();
 	}
 }
}

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

// data 数据 及 方法
Page({
  data: {
    modal: false
  },
  //调用此方法显示组件
  show() {
      this.setData({
        modal: true
      })
   },
   //隐藏组件
   hide() {
 	  this.setData({
 		modal: false
 	  })
   },
   handleClick(e) {
       let index = e.detail.index;
       if (index === 0) {
          console.log('你点击了取消按钮');
       } else {
         console.log('你点击了确定按钮');
       }
       this.hide();
    }
})

// Make sure to add code blocks to your code group

设置提示文本样式

通过 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>

//完整使用请参考上方示例

TIP

如果自定义内容中包含输入框类组件，小程序 端隐藏状态时可能无法隐藏输入框类组件，需要自行对输入框进行隐藏处理。

# 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	点击遮罩是否可关闭，结合cancel事件使用	true
isMask V2.1.0+	Boolean	是否显示遮罩	true
maskColor V2.1.0+	String	遮罩颜色	rgba(0, 0, 0, 0.6)
fadeIn	Boolean	淡入效果	false
custom	Boolean	自定义弹窗内容	false
zIndex	Number	容器 z-index	9997
maskZIndex	Number	mask z-index	9990

特殊属性参数说明

shape 属性，按钮形状：circle（圆角按钮）、square（默认方形）。

button 属性，弹框按钮：text（按钮文本），type（按钮类型，支持：primary、danger、red、warning、green、white、gray），plain（是否为空心按钮）

# Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	modal框按钮点击事件，非自定义内容时有效	{index: Number} //按钮索引值
cancel	点击遮罩时触发，`maskClosable`属性为true时有效	-