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

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

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

#使用场景

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

#平台差异说明

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 点击组件时触发 -


相关文章
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
32 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
138 10
|
2月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
119 5
|
2月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
130 2
|
2月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
86 1
|
2月前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
41 0
|
2月前
|
移动开发 小程序
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
82 0
|
2月前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
50 0
|
2月前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
94 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
135 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)