uview-plus

# 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-plus的目标是成为uni-app生态最优秀的UI框架');  
const description = ref('uview-plus是uni-app生态专用的UI框架');  

</script>


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

# 图标

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

注意：当前版本图标为uview-plus内置图标，根据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-plus的目标是成为uni-app生态最优秀的UI框架');  
const description = ref('uview-plus是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-plus的目标是成为uni-app生态最优秀的UI框架',
			description:'uview-plus是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 -
transitionMode3.4.98 过渡动画模式 String fade -
duration 3.4.98 自动关闭延时(毫秒)，设置为0或负数则不自动关闭 Number 0 -
icon 3.4.98 自定义图标名称，优先级高于type默认图标 String - -
modelValue/v-model 3.4.98 绑定值，控制是否显示 Boolean true false

# Events

事件名 说明 回调参数
click 点击组件时触发 -
close 手动点击关闭件时触发 -
closed 3.4.98 自动关闭时触发 -

← Toast 消息提示 →