TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
664
2.8m

警告 xAlert ​

在线预览
在线模拟尺寸:

介绍 ​

样式丰富常用警告提醒

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-alert/x-alert.uvue

使用 ​

ts

<x-alert></x-alert>

Props 属性 ​

名称说明类型默认值
status类型
warn:警告
success:成功
error:错误
info:信息
primary:正常主题
xAlertStatusType"primary"
icon警告图标,不填写取status默认图标
填写以填写为准
string""
iconSize警告图标大小
string"20"
closeIcon关闭图标
string"close-line"
showClose显示还是隐藏关闭按钮
booleantrue
fontSize文字大小
string"15"
color主题色，如果不填写以status为准
string""
fontColor文字颜色，如果不填写以status为准
string""
darkColor暗黑主题颜色，如果不填写自动计算
string""
fontDarkColor暗黑文字颜色，如果不填写自动计算
string""
skin它是建立在你没有提供color时才有效。
如果提供了color是以你color为背景最终色。
thin浅色模式，
normal标准背景色
string"thin"
round圆角
数组数字时
[全部]
[顶左，顶右，底右，底左]
[顶左，底右]
[顶左，顶右，底右]
空数组时取全局值
Array():string[] => [] as string[]
border边线
数组数字时
数组数字时
[全部]
[左，上，右，下]
[左右，上下]
[左，上，右]
空数组时取全局值
Array():string[] => [] as string[]
borderColor边框颜色
格式同border边线。
空数组时取全局值
Array():string[] => [] as string[]
darkBorderColor如果不填写，自动计算
Array():string[] => [] as string[]
borderStyle边线类型，默认solid,可以为none
string'solid'
margin间隙[x]全部,[x,x]左右，上下,[x,x,x]左上右,[x,x,x,x]左上右下
空数组时取全局值
Array():string[] => ['16', '0', '16', '16'] as string[]
padding内间隙[x]全部,[x,x]左右，上下,[x,x,x]左上右,[x,x,x,x]左上右下
空数组时取全局值
Array():string[] => ['16', '12'] as string[]
height自定义高度，可以是数字，单位或者百分比,auto
string"auto"
width宽，单位合法即可数字，字符串带单位，百分比,auto
string"auto"

Events 事件 ​

名称参数说明
close-关闭时触发
click-组件被点击时触发

Slots 插槽 ​

名称说明数据
left左边图标插槽-
default默认插槽内容-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/zhanshi/alert

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">警告 xAlert</x-text>
			<x-text color="#999999">
				样式丰富，用于警告信息的提醒。
			</x-text>
		</x-sheet>
		<x-alert>默认为thin浅色样式，可以自适应暗黑</x-alert>
		<x-alert skin='normal'>也可以把skin改成normal变成纯背景</x-alert>
		<x-alert icon="building-fill" skin='normal' color="#000000">也可以把skin改成normal变成纯背景</x-alert>
		<x-alert icon="building-fill" skin='normal' color="#dee3e7">也可以把skin改成normal变成纯背景</x-alert>
		
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">可以使用默认的状态来管理颜色</x-text>
		</x-sheet>
		<x-alert icon="file-word-2-fill" status="success" skin='normal'>自定义图标</x-alert>
		<x-alert status="error" skin='normal'>错误提醒</x-alert>
		<x-alert status="warn" closeIcon="arrow-right-line" skin='normal'>警告提醒</x-alert>
		<x-alert icon="money-cny-circle-fill" color="#728398" skin='normal'>自定义背景色</x-alert>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">比如改些圆角，边线啥的,样式丰富请自行设计</x-text>
		</x-sheet>
		<x-alert status="warn" skin='normal' :round="['6']">警告提醒</x-alert>
		<x-alert status="error" skin='normal' :round="['12','0']">改下圆角</x-alert>
		<x-alert :border="['2']" >加个小边框</x-alert>
		<x-alert :border="['2']" :showClose="false"  :borderColor="['#89c0ff']" :darkBorderColor="['#3b5066']">加个小边框,隐藏关闭</x-alert>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>

</script>

<style>

</style>
最近更新