uniapp中uview组件库的AlertTips 警告提示使用方法

目录

#使用场景

#平台差异说明

#基本使用

#图标

#可关闭的警告提示

#API

#Props

#Events


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

#使用场景

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

#平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序

#基本使用

  • 通过titledescription设置组件的标题和描述内容,如果内容和标题同时存在,标题字体会被加粗加大

  • 通过type设置主题类型,有primary,success,error,warning,info可选值

    <template> <u-alert-tips type="warning" :title="title" :description="description"></u-alert-tips> </template> <script> export default { data() { title: '登高望远', description: '欲穷千里目,更上一层楼' } } </script>

#图标

通过show-icon设置是否显示图标,作用是让信息类型更加醒目。

注意 :当前版本图标为uView内置图标,根据type参数显示不同的图标,无法自定义。

复制代码
<u-alert-tips type="warning" :show-icon="true"></u-alert-tips>

#可关闭的警告提示

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

  • close-text参数配置关闭的文字,默认为一个叉的icon图标。close-abletrue时有效
  • close-able参数配置是否允许关闭的文字或图标

注意

由于props传参的限制,您需要监听组件的close事件,并在此此事件中设置show参数为false,才能关闭组件。

复制代码
<template>
	<u-alert-tips :show="show" type="error" @close="show = false" :title="title" :close-able="true"></u-alert-tips>
	
	<u-alert-tips type="error" :title="title" close-text="close" :description="description" :close-able="true"></u-alert-tips>
</template>

<script>
	export default {
		data() {
			title: '寻隐者不遇',
			description: '松下问童子,言师采药去。只在此山中,云深不知处。',
			show: true
		}
	}
</script>

#API

#Props

参数 说明 类型 默认值 可选值
title 显示的文字 String - -
description 辅助性文字,颜色比title浅一点,字号也小一点,可选 String - -
close-able 关闭按钮(默认为叉号icon图标) Boolean false true
type 使用预设的颜色 String warning success / primary / error / info
close-text 用文字替代关闭图标,close-abletrue时有效 String - -
show-icon 是否显示左边的辅助图标 Boolean false true
show 显示或隐藏组件 Boolean true false
icon 1.5.8 左侧的图标名称,如设置typeshow-icon值,会有一个默认的图标 String - -
icon-style 1.5.8 自定义图标的样式,对象形式 Object - -
title-style 1.5.8 自定义标题的样式,对象形式 Object - -
desc-style 1.5.8 自定义内容的样式,对象形式 Object - -

#Events

事件名 说明 回调参数
close 点击关闭按钮时触发,需在此回调设置showfalse -
click 点击组件时触发 -
相关推荐
小徐_233328 分钟前
uni-app 也能使用 App.vue?wot-starter 是这样实现的!
前端·uni-app
2501_9159184132 分钟前
App 苹果 上架全流程解析 iOS 应用发布步骤、App Store 上架流程
android·ios·小程序·https·uni-app·iphone·webview
哆啦A梦15881 小时前
uniapp分包实现
前端·vue.js·uni-app·vue3
2501_916007471 小时前
苹果上架全流程详解,iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
jingling5552 小时前
uniapp | 实现微信小程序端的分包处理
微信小程序·小程序·uni-app
约翰先森不喝酒2 小时前
uni-app 网络请求封装实战:打造高效、可维护的HTTP请求框架
uni-app
2501_915921432 小时前
iOS App 性能监控与优化实战 如何监控CPU、GPU、内存、帧率、耗电情况并提升用户体验(uni-app iOS开发调试必备指南)
android·ios·小程序·uni-app·iphone·webview·ux
2501_915921433 小时前
前端开发工具有哪些?常用前端开发工具、前端调试工具、前端构建工具与效率提升工具对比与最佳实践
android·前端·ios·小程序·uni-app·iphone·webview
哆啦A梦15888 小时前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app
2501_9159184111 小时前
HTTPS 端口号详解 443 端口作用、iOS 抓包方法、常见 HTTPS 抓包工具与网络调试实践
android·网络·ios·小程序·https·uni-app·iphone