展示组件
警告 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>
🌶️ 兼容性
平台兼容
H5 | uniAPP | 小程序 | version |
---|---|---|---|
☑️ | ☑️ | ☑️ | ☑️ |
🌱 参数
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
status | string | "primary" | 类型warn:警告success:成功error:错误info:信息primary:正常主题 |
icon | string | "" | 警告图标,不填写取status默认图标填写以填写为准 |
iconSize | string | "28" | 警告图标大小 |
closeIcon | string | "close-line" | - |
showClose | boolean | true | 显示还是隐藏关闭按钮 |
fontSize | string | "28" | 文字大小 |
color | string | "" | 主题色,如果不填写以status为准 |
fontColor | string | "" | 文字颜色,如果不填写以status为准 |
darkColor | string | "" | 暗黑主题颜色,如果不填写自动计算 |
fontDarkColor | string | "" | 暗黑文字颜色,如果不填写自动计算 |
skin | string | "thin" | 它是建立在你没有提供color时才有效。如果提供了color是以你color为背景最终色。thin浅色模式,normal标准背景色 |
round | string|number|Array<string|number> | 16 | 圆角数组数字时[全部][顶左,顶右,底右,底左][顶左,底右][顶左,顶右,底右]空数组时取全局值 |
border | string|number|Array<string|number> | ():string[]=>[] | 边线数组数字时数组数字时[全部][左,上,右,下][左右,上下][左,上,右]空数组时取全局值 |
borderColor | string|Array<string> | ():string[]=>[] | 边框颜色格式同border边线。空数组时取全局值 |
darkBorderColor | string|Array<string> | ():string[]=>[] | 如果不填写,自动计算 |
borderStyle | string | 'solid' | 边线类型,默认solid,可以为none |
margin | string|number|Array<string|number> | ():string[]=>['24','0','24','24']asstring[] | 间隙[x]全部,[x,x]左右,上下,[x,x,x]左上右,[x,x,x,x]左上右下空数组时取全局值 |
padding | string|number|Array<string|number> | ():string[]=>['28','20']asstring[] | 内间隙[x]全部,[x,x]左右,上下,[x,x,x]左上右,[x,x,x,x]左上右下空数组时取全局值 |
height | string | "auto" | 自定义高度,可以是数字,单位或者百分比,auto |
width | string | "auto" | 宽,单位合法即可数字,字符串带单位,百分比,auto |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
close | - | - | 关闭时触发 |
click | - | - | 组件被点击时触发 |
🌽 slot插槽
插槽名 | 数据 | 描述 |
---|---|---|
left | - | 左边图标插槽 |
default | - | - |
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|