# tui-modal 弹框

介绍

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

# 引入

# 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
特殊属性参数说明

shape 属性,按钮形状 :circle(圆角按钮)、square(默认方形)。

button 属性,弹框按钮:text(按钮文本),type(按钮类型,支持:primary、danger、red、warning、green、white、gray),plain(是否为空心按钮)

# Events

事件名 说明 回调参数
click modal框按钮点击事件,非自定义内容时有效 {index: Number} //按钮索引值
cancel 关闭modal弹框时触发 -

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码