uView Alert 警告提示

简介: uView Alert 警告提示

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

#使用场景

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

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

  • 通过titledescription设置组件的标题和描述内容
  • 通过type设置主题类型,有primary,success,error,warning,info可选值
  • 通过effect设置主题浅或深色调,有light(浅色 默认),dark(深色)可选值
<template>
  <view>
    <u-alert :title="title" type = "warning" :description = "description"></u-alert>
    <u-alert :title="title" type = "warning" effect="dark" :description = "description"></u-alert>
  </view>
</template>
<script>
export default {
  data() {
    return {
      title:'uView的目标是成为uni-app生态最优秀的UI框架',
      description:'uView是uni-app生态专用的UI框架'
    };
  },
  onLoad() {},
  methods: {
  }
};
</script>

copy

#图标

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

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

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

copy

#可关闭的警告提示

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

  • closable参数配置是否可关闭
<template>
  <view>
    <u-alert :title="title"  type = "warning" :closable="closable" :description = "description"></u-alert>
  
  </view>
</template>
<script>
export default {
  data() {
    return {
      title:'uView的目标是成为uni-app生态最优秀的UI框架',
      description:'uView是uni-app生态专用的UI框架',
      closable:true
    };
  },
  onLoad() {},
  methods: {
  }
};
</script>
相关文章
|
前端开发 JavaScript
富文本编辑器wangEdiotr,编辑内容后,重新打开报错Uncaught (in promise) Error: Cannot find a descendant at path
富文本编辑器wangEdiotr,编辑内容后,重新打开报错Uncaught (in promise) Error: Cannot find a descendant at path
1742 0
|
3月前
|
JavaScript
Vue3警告提示(Alert)
这是一个基于 Vue 的警告提示组件 Alert,提供了成功、信息、警告和错误四种样式,并支持自定义内容、图标及操作项。
Vue3警告提示(Alert)
|
3月前
|
资源调度 JavaScript iOS开发
基于vue 2.x的移动端网页弹窗插件wc-messagebox(支持Alert,Confirm,Toast,Loading)
这篇文章介绍了一个基于Vue 2.x开发的移动端网页弹窗插件`wc-messagebox`,支持Alert、Confirm、Toast和Loading功能,并且提供了如何安装、配置和使用这些弹窗功能的详细说明。
基于vue 2.x的移动端网页弹窗插件wc-messagebox(支持Alert,Confirm,Toast,Loading)
|
3月前
|
JavaScript 开发者
在Vue中引入Message,弹窗提示错误信息
这篇文章讲述了在Vue CLI项目中如何处理异常,通过引入Message组件实现弹窗提示错误信息,帮助开发者排查和解决webpack等问题。
|
4月前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
607 0
|
JavaScript
【VUE异常】el-popconfirm失效,@confirm事件不生效,点击没有任何反应,刷新页面才能点击
【VUE异常】el-popconfirm失效,@confirm事件不生效,点击没有任何反应,刷新页面才能点击
311 0
|
6月前
uView Alert 提示
uView Alert 提示
61 0
|
6月前
MessageBox 弹框 全局方法$msgbox, $alert, $confirm 和 $prompt常用代码片段
MessageBox 弹框 全局方法$msgbox, $alert, $confirm 和 $prompt常用代码片段
|
6月前
|
前端开发 JavaScript
不使用alert弹窗,显示提示信息
不使用alert弹窗,显示提示信息
|
JavaScript
ElementUI this.$message is not a function 解决方法
ElementUI this.$message is not a function 解决方法
185 0