Alert 警告提示

警告提示，展现需要关注的信息。

使用场景

• 当某个页面需要向用户显示警告的信息时。
• 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基本使用

• 通过title和description设置组件的标题和描述内容
• 通过type设置主题类型，有primary,success,error,warning,info可选值
• 通过effect设置主题浅或深色调，有light(浅色 默认),dark(深色)可选值

<template>
	<view>
		<up-alert :title="title" type = "warning" :description = "description"></up-alert>
		<up-alert :title="title" type = "warning" effect="dark" :description = "description"></up-alert>
	</view>
</template>

<script setup>  
import { ref } from 'vue';  
  
// 响应式数据  
const title = ref('uview-ultra的目标是成为uni-app生态最优秀的UI框架');  
const description = ref('uview-ultra是uni-app生态专用的UI框架');  

</script>

<script>
export default {
	data() {
		return {
			title:'uview-ultra的目标是成为uni-app生态最优秀的UI框架',
			description:'uview-ultra是uni-app生态专用的UI框架'
		};
	},
	onLoad() {},
	methods: {
	}
};
</script>

图标

通过showIcon设置是否显示图标，作用是让信息类型更加醒目。

注意：当前版本图标为uview-ultra内置图标，根据type参数显示不同的图标，无法自定义。

<up-alert type="warning" :show-icon="true"></up-alert>

可关闭的警告提示

显示关闭按钮，点击可关闭警告提示。

• closable参数配置是否可关闭

<template>
	<view>
		<up-alert :title="title"  type = "warning" :closable="closable" :description = "description"></up-alert>
	
	</view>
</template>

<script setup>  
import { ref } from 'vue';  
import { onLoad, onShow } from '@dcloudio/uni-app';  
  
// 定义响应式数据  
const title = ref('uview-ultra的目标是成为uni-app生态最优秀的UI框架');  
const description = ref('uview-ultra是uni-app生态专用的UI框架');  
const closable = ref(true);  
  
// 使用 uni-app 的 onLoad 生命周期钩子  
onLoad(() => {  
  // 组件加载时执行的逻辑  
  console.log('组件加载了');  
});  
  
// 使用 uni-app 的 onShow 生命周期钩子  
onShow(() => {  
  // 组件显示时执行的逻辑  
  console.log('组件显示了');  
});  
</script>

<script>
export default {
	data() {
		return {
			title:'uview-ultra的目标是成为uni-app生态最优秀的UI框架',
			description:'uview-ultra是uni-app生态专用的UI框架',
			closable:true
		};
	},
	onLoad() {},
	methods: {
	}
};
</script>

右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码

 github  gitee

API

Props

参数	说明	类型	默认值	可选值
title	显示的文字	String	-	-
type	使用预设的颜色	String	warning	success | primary | error | info
description	辅助性文字，颜色比title浅一点，字号也小一点，可选	String	-	-
closable	关闭按钮(默认为叉号icon图标)	Boolean	false	true
showIcon	是否显示左边的辅助图标	Boolean	false	true
effect	多图时，图片缩放裁剪的模式	String	light(浅色)	dark(深色)
center	文字是否居中	Boolean	false	true
fontSize	字体大小	String | Number	14	-

Events

事件名	说明	回调参数
click	点击组件时触发	-