Skip to content
On this page
你当前查看的文档是tmui3.2.0(已不再支持NVUE)
[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

展示组件

警告 TmAlert

样式丰富常用警告提醒

🌶️ 示例

查看模拟效果
示例模板
vue
<template>
	<view>
		<tm-sheet>
			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">警告 tmAlert</tm-text>
			<tm-text color="#999999">
				样式丰富,用于警告信息的提醒。
			</tm-text>
		</tm-sheet>
		<tm-alert>默认为thin浅色样式,可以自适应暗黑</tm-alert>
		<tm-alert skin='normal'>也可以把skin改成normal变成纯背景</tm-alert>
		<tm-alert icon="thumb-up-line" skin='normal' color="#000000">也可以把skin改成normal变成纯背景</tm-alert>
		<tm-alert icon="thumb-up-line" skin='normal' color="#dee3e7">也可以把skin改成normal变成纯背景</tm-alert>

		<tm-sheet>
			<tm-text font-size="32" class=" text-weight-b ">可以使用默认的状态来管理颜色</tm-text>
		</tm-sheet>
		<tm-alert icon="alarm-line" status="success" skin='normal'>自定义图标</tm-alert>
		<tm-alert status="error" skin='normal'>错误提醒</tm-alert>
		<tm-alert status="warn" closeIcon="arrow-right-line" skin='normal'>警告提醒</tm-alert>
		<tm-alert icon="money-cny-circle-fill" color="#728398" skin='normal'>自定义背景色</tm-alert>
		<tm-sheet>
			<tm-text font-size="32" class=" text-weight-b ">比如改些圆角,边线啥的,样式丰富请自行设计</tm-text>
		</tm-sheet>
		<tm-alert status="warn" skin='normal' :round="['6']">警告提醒</tm-alert>
		<tm-alert status="error" skin='normal' :round="['12', '0']">改下圆角</tm-alert>
		<tm-alert :border="['2']">加个小边框</tm-alert>
		<tm-alert :border="['2']" :showClose="false" :borderColor="['#89c0ff']"
			:darkBorderColor="['#3b5066']">加个小边框,隐藏关闭</tm-alert>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue"
</script>

<style></style>

🌶️ 兼容性

平台兼容

H5uniAPP小程序version
☑️☑️☑️☑️

🌱 参数

参数名类型默认值描述
statusstring"primary"类型warn:警告success:成功error:错误info:信息primary:正常主题
iconstring""警告图标,不填写取status默认图标填写以填写为准
iconSizestring"28"警告图标大小
closeIconstring"close-line"-
showClosebooleantrue显示还是隐藏关闭按钮
fontSizestring"28"文字大小
colorstring""主题色,如果不填写以status为准
fontColorstring""文字颜色,如果不填写以status为准
darkColorstring""暗黑主题颜色,如果不填写自动计算
fontDarkColorstring""暗黑文字颜色,如果不填写自动计算
skinstring"thin"它是建立在你没有提供color时才有效。如果提供了color是以你color为背景最终色。thin浅色模式,normal标准背景色
roundstring|number|Array<string|number>16圆角数组数字时[全部][顶左,顶右,底右,底左][顶左,底右][顶左,顶右,底右]空数组时取全局值
borderstring|number|Array<string|number>():string[]=>[]边线数组数字时数组数字时[全部][左,上,右,下][左右,上下][左,上,右]空数组时取全局值
borderColorstring|Array<string>():string[]=>[]边框颜色格式同border边线。空数组时取全局值
darkBorderColorstring|Array<string>():string[]=>[]如果不填写,自动计算
borderStylestring'solid'边线类型,默认solid,可以为none
marginstring|number|Array<string|number>():string[]=>['24','0','24','24']asstring[]间隙[x]全部,[x,x]左右,上下,[x,x,x]左上右,[x,x,x,x]左上右下空数组时取全局值
paddingstring|number|Array<string|number>():string[]=>['28','20']asstring[]内间隙[x]全部,[x,x]左右,上下,[x,x,x]左上右,[x,x,x,x]左上右下空数组时取全局值
heightstring"auto"自定义高度,可以是数字,单位或者百分比,auto
widthstring"auto"宽,单位合法即可数字,字符串带单位,百分比,auto

🌹 事件

事件名参数返回数据描述
close--关闭时触发
click--组件被点击时触发

🌽 slot插槽

插槽名数据描述
left-左边图标插槽
default--

🥗 ref方法

方法名参数返回值描述