用来显示「成功、警告、消息、错误」类的操作

<template>
<el-button :plain="true" @click="open2">success</el-button>
<el-button :plain="true" @click="open3">warning</el-button>
<el-button :plain="true" @click="open1">message</el-button>
<el-button :plain="true" @click="open4">error</el-button>
</template> <script lang="ts" setup>
import { ElMessage } from 'element-plus' const open1 = () => {
ElMessage('this is a message.')
}
const open2 = () => {
ElMessage({
message: 'Congrats, this is a success message.',
type: 'success',
})
}
const open3 = () => {
ElMessage({
message: 'Warning, this is a warning message.',
type: 'warning',
})
}
const open4 = () => {
ElMessage.error('Oops, this is a error message.')
}
</script>

element-plus 消息提示的更多相关文章

  1. element——message消息提示

    官方文档:http://element-cn.eleme.io/#/zh-CN/component/message 简单的用法,一句代码搞定.类型有success/warning/info/error ...

  2. element组件dialog关闭时Message消息提示抖动问题

    在页面内容较多,出现滚动条时使用element组件里的dialog组件,当关闭dialog组件的同时弹出Message消息提示时,Message会抖动一下. 在页面有滚动条的情况先打开dialog时, ...

  3. element消息提示封装

    官方的 <template> <el-button :plain="true" @click="open2">成功</el-but ...

  4. Message 消息提示

    常用于主动操作后的反馈提示.与 Notification 的区别是后者更多用于系统级通知的被动提醒. 基础用法 从顶部出现,3 秒后自动消失. Message 在配置上与 Notification 非 ...

  5. 【源码解读】js原生消息提示插件

    效果如下: 关闭message后前后message的衔接非常丝滑,这部分是我比较感兴趣的.带着这个问题先了解下DOM结构,顺便整理下作者的思路. 从DOM里我们可以看到所有的message都在一个容器 ...

  6. WPF自定义控件三:消息提示框

    需求:实现全局消息提示框 一:创建全局Message public class Message { private static readonly Style infoStyle = (Style)A ...

  7. 【C#】组件发布:MessageTip,轻快型消息提示窗

    -------------201610212046更新------------- 更新至2.0版,基本完全重写,重点: 改为基于原生LayeredWindow窗体和UpdateLayeredWindo ...

  8. 一个简单的消息提示jquery插件

    最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...

  9. Js添加消息提示数量

    接到个新需求,类似以下这种需求,得把它封装成一个插件 后端给返回一个这种数据 var data = [ { key:"020506", num:5 }, { key:"0 ...

  10. 自定义iOS 中推送消息 提示框

    看到标题你可能会觉得奇怪 推送消息提示框不是系统自己弹出来的吗? 为什么还要自己自定义呢? 因为项目需求是这样的:最近需要做 远程推送通知 和一个客服系统 包括店铺客服和官方客服两个模块 如果有新的消 ...

随机推荐

  1. 简单理解 Webpack,以及Web前端使用打包工具的原因

    Java 中的模块 传统的前端开发就是 JS.HTML.CSS 三件套.Web 没有像 Java 一样拥有优秀的模块机制,就是类与类之间可以分装在不同的包下,不同包下的类互相引用时通过import导入 ...

  2. Can't pickle local object '_createenviron.<locals>.encodekey'报错解决

    关于selenium传参报错问题,用下面是报错信息: Traceback (most recent call last): File "D:/code/read_book/main.py&q ...

  3. Currtid 函数与性能问题

    对于Oracle ,一条tuple 的 rowid正常是不会变化的(引发row movement的操作除外,如:跨分区迁移update,表收缩),因此,应用设计上可以方便的使用rowid,加快访问速度 ...

  4. MySQL半同步复制源码解析

    今天 DBA 同事问了一个问题,MySQL在半同步复制的场景下,当关闭从节点时使得从节点的数量 < rpl_semi_sync_master_wait_for_slave_count时,show ...

  5. Chrome 浏览器缓存的问题

    浏览器缓存的问题 Chrome 在浏览器中设置: 1 Ctrl + Shift + Delete 2 Ctrl + F5 强制刷新 3 F12 打开控制台 ---> Network ---> ...

  6. Linux病毒扫描工具ClamAV(Clam AntiVirus)安装使用

    在线检测木马病毒的网址:https://www.virustotal.com/gui/home/upload 一.简介 ClamAV(Clam AntiVirus)是Linux平台上的开源病毒扫描程序 ...

  7. Elastic:创建你的第一个Elastic alert

    文章转载自:https://blog.csdn.net/UbuntuTouch/article/details/105340379 在Elasticsearch可以提供给我们数据的存储及快速的搜索,但 ...

  8. Alertmanager结合Slack使用

    Slack作为一款即时通讯工具,协作沟通主要通过Channel(平台)来完成,用户可以在企业中根据用途添加多个Channel,并且通过Channel来集成各种第三方工具. 例如,我们可以为监控建立一个 ...

  9. 对vue中的data进行数据初始化

    this.$data:是表示当前的改变后的this中的数据 this.$options.data():是表示没有赋值前的this中的数据,表示 初始化的data 一般可以使用Object.assign ...

  10. Css3中自适应布局单位vh、vw

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...