tui-alert 弹框 开源组件

介绍

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

引入

uni-app引入

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

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

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

uni-app版本平台差异说明

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

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

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

代码演示

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

基础使用

通过 show 属性控制弹框显示隐藏。click 为按钮点击事件。

<!--uni-app-->
<tui-alert :show="show" @click="hideAlert">
  这是一个alert弹框
</tui-alert>

 // data 数据 及 方法
 export default {
  	data() {
  		return {
  			show:false
  		}
  	},
  	methods: {
		//调用此方法显示弹框
  		showAlert() {
  			this.show =true
  		},
		//隐藏弹框，按钮点击事件调用此方法仅为演示，逻辑请自行处理
		hideAlert() {
			this.show = false
		}
  	}
  }

<!--微信小程序-->
<tui-alert show="{{show}}" bindclick="hideAlert">
  这是一个alert弹框
</tui-alert>

// data 数据 及 方法
Page({
 data: {
   show:false
 },
 //调用此方法显示弹框
 showAlert() {
	 this.setData({
		 show:true
	 })
 },
 //隐藏弹框，按钮点击事件调用此方法仅为演示，逻辑请自行处理
 hideAlert() {
	 this.setData({
		show:false
	 })
 }
})

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

点击遮罩可关闭

通过 maskClosable 属性控制点击遮罩是否可关闭弹框。cancel 为遮罩点击事件，关闭弹框。

注：maskClosable为true时，需绑定cancel事件并在事件中设置show属性值为false以关闭弹框

<!--uni-app-->
<tui-alert :show="show" maskClosable @click="hideAlert" @cancel="hideAlert">
 这是一个alert弹框
</tui-alert>

// data 数据 及 方法
export default {
 data() {
 	return {
 		show:false
 	}
 },
 methods: {
 	//调用此方法显示弹框
 	showAlert() {
 		this.show =true
 	},
 	//隐藏弹框，按钮点击事件调用此方法仅为演示，逻辑请自行处理
 	hideAlert() {
 		this.show = false
 	}
 }
}

<!--微信小程序-->
<tui-alert show="{{show}}" maskClosable bindclick="hideAlert" bindcancel="hideAlert">
 这是一个alert弹框
</tui-alert>

// data 数据 及 方法
Page({
  data: {
    show:false
  },
  //调用此方法显示弹框
  showAlert() {
  	 this.setData({
  		 show:true
  	 })
  },
  //隐藏弹框，按钮点击事件调用此方法仅为演示，逻辑请自行处理
  hideAlert() {
  	 this.setData({
  		show:false
  	 })
  }
})

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

Slots

插槽名称	插槽说明
default	弹框内显示内容

Props

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

TIP

属性 maskClosable 设置为true 时，需结合cancel事件使用，且需要在事件中设置 show 属性设置为 false 以关闭弹框

Events

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

事件名	说明	回调参数
click	按钮点击事件	{}
cancel	遮罩点击事件，关闭弹框，maskClosable为true时有效	-

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

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