uView Alert 提示

简介: uView Alert 提示

用于页面中展示重要的提示信息。

基础用法#

Alert 组件不属于浮层元素,不会自动消失或关闭。

Alert 组件提供四种类型,由 type 属性指定,默认值为 info

success alert

info alert

warning alert

error alert

主题#

Alert 组件提供了两个不同的主题:lightdark

通过设置 effect 属性来改变主题,默认为 light

success alert

info alert

warning alert

error alert

自定义关闭按钮#

你可以自定义关闭按钮为文字或其他符号。

你可以设置 Alert 组件是否为可关闭状态, 关闭按钮的内容以及关闭时的回调函数同样可以定制。 closable 属性决定 Alert 组件是否可关闭, 该属性接受一个 Boolean,默认为 false。 你可以设置 close-text 属性来代替右侧的关闭图标, 需要注意的是 close-text 必须是一个字符串。 当 Alert 组件被关闭时会触发 close 事件。

unclosable alert

customized close-text

Gotcha

alert with callback

使用图标#

你可以通过为 Alert 组件添加图标来提高可读性。

通过设置 show-icon 属性来显示 Alert 的 icon,这能更有效地向用户展示你的显示意图。

success alert

info alert

warning alert

error alert

文字居中#

使用 center 属性来让文字水平居中。

success alert

info alert

warning alert

error alert

文字描述#

为 Alert 组件添加一个更加详细的描述来使用户了解更多信息。

除了必填的 title 属性外,你可以设置 description 属性来帮助你更好地介绍,我们称之为辅助性文字。 辅助性文字只能存放文本内容,当内容超出长度限制时会自动换行显示。

with description

This is a description.

带图标和描述#

在最后, 这是一个带有图标和描述的例子。

success alert

more text description

info alert

more text description

warning alert

more text description

error alert

more text description

Alert API#

Attributes#

名称 说明 类型 默认值
title Alert 标题。 string
type Alert 类型。 enum info
description 描述性文本 string
closable 是否可以关闭 boolean true
center 文字是否居中 boolean false
close-text 自定义关闭按钮文本 string
show-icon 是否显示类型图标 boolean false
effect 主题样式 enum light

Events#

名称 描述 类型
close 关闭 Alert 时触发的事件 Function

Slots#

名称 描述
default Alert 内容描述
title 标题的内容
相关文章
|
3月前
|
JavaScript
Vue3警告提示(Alert)
这是一个基于 Vue 的警告提示组件 Alert,提供了成功、信息、警告和错误四种样式,并支持自定义内容、图标及操作项。
Vue3警告提示(Alert)
|
3月前
Vue3信息提示(Modal)
这是一个基于 Vue2 的信息提示模态框组件,支持多种弹窗类型(如 info、success、error 等),并提供丰富的自定义属性,包括按钮文本、按钮类型、居中方式等。该组件可根据内容自动调整高度,并兼容不同按钮样式配置。预览效果展示了不同类型的模态框及其样式。代码中详细介绍了组件的实现方式和使用方法。
Vue3信息提示(Modal)
|
3月前
Vue2信息提示(Modal)
这是一个基于 Vue3 的信息提示模态框(Modal)组件,提供了丰富的自定义属性,包括标题、内容、宽度、按钮文本等。它支持两种模式:确认提示框(confirm)和信息提示框(info),并有六种不同的展示效果。模态框可以水平垂直居中或固定高度水平居中显示,支持加载中状态。该组件模仿了 ant-design-vue 的样式,适用于各种场景下的信息提示。
Vue2信息提示(Modal)
|
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等问题。
|
6月前
|
移动开发 JavaScript 小程序
uView Tooltip 长按提示
uView Tooltip 长按提示
58 1
|
6月前
|
移动开发 JavaScript 小程序
uView Alert 警告提示
uView Alert 警告提示
75 0
|
JavaScript
ElementUI this.$message is not a function 解决方法
ElementUI this.$message is not a function 解决方法
189 0
|
JavaScript
vue 提示 this.getOptions is not a function 报错
vue 提示 this.getOptions is not a function 报错
525 0
vue 提示 this.getOptions is not a function 报错
|
JavaScript
js:toastr弹出提示信息
js:toastr弹出提示信息
js:toastr弹出提示信息