tui-alerts 警告提示

介绍

警告提示框，可自定义颜色，内容。

引入

uni-app引入

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

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

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

uni-app版本平台差异说明

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

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

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

代码演示

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

基础使用

<tui-alerts title="An info prompt"></tui-alerts>

<tui-alerts type="warn" title="An warn prompt" desc="Content of prompt. Content of prompt."></tui-alerts>

Slots

名称	说明
left	左侧显示内容
content	content内容区
right	右侧显示内容

Props

参数	类型	说明	默认值
type	String	类型：info, success, warn, waiting,clear	info
backgroundColor	String	背景色，如果设置type对应颜色失效	-
padding	Array	padding值，['20rpx','30rpx','20rpx','30rpx']=>[上，右，下，左]，nvue不支持简写	['20rpx', '30rpx']
radius	String	圆角大小	6rpx
iconColor	String	icon图标颜色	#fff
iconSize	Number	icon图标字体大小，单位px	24
closable	Boolean	是否可关闭	false
closeColor	String	关闭图标颜色	#fff
closeSize	Number	关闭图标大小，单位px	24
isLeft	Boolean	是否自定义左侧内容	false
isRight	Boolean	是否自定义右侧内容	false
title	String	警告提示标题	-
color	String	标题文本颜色	#fff
size	String	标题文本大小	14px
desc	String	警告提示描述	-
descColor	String	描述文本颜色	#fff
descSize	String	描述文本大小	12px
single	Boolean	描述文本单行展示，超出隐藏	false

Events

事件名	说明	回调参数
leftClick	点击左侧图标时触发	-
click	点击内容区时触发	-
close	点击关闭图标时触发	-

预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

线上程序扫码预览

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