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

  1. <template>
  2. <el-button :plain="true" @click="open2">success</el-button>
  3. <el-button :plain="true" @click="open3">warning</el-button>
  4. <el-button :plain="true" @click="open1">message</el-button>
  5. <el-button :plain="true" @click="open4">error</el-button>
  6. </template>
  7. <script lang="ts" setup>
  8. import { ElMessage } from 'element-plus'
  9. const open1 = () => {
  10. ElMessage('this is a message.')
  11. }
  12. const open2 = () => {
  13. ElMessage({
  14. message: 'Congrats, this is a success message.',
  15. type: 'success',
  16. })
  17. }
  18. const open3 = () => {
  19. ElMessage({
  20. message: 'Warning, this is a warning message.',
  21. type: 'warning',
  22. })
  23. }
  24. const open4 = () => {
  25. ElMessage.error('Oops, this is a error message.')
  26. }
  27. </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. 乘风破浪,遇见最佳跨平台跨终端框架.Net Core/.Net生态 - 官方扩展集锦(Microsoft.Extensions on Nuget)

    什么是Microsoft.Extensions .NET Platform Extensions是一套.Net官方的API集合,提供了一些常用的编程模式和实用工具,例如依赖项注入.日志记录.缓存.Ho ...

  2. Apache HttpClient 5 使用详细教程

    点赞再看,动力无限. 微信搜「程序猿阿朗 」. 本文 Github.com/niumoo/JavaNotes 和 未读代码博客 已经收录,有很多知识点和系列文章. 超文本传输协议(HTTP)可能是当今 ...

  3. K8s小白?应用部署太难?看这篇就够了!

    在云原生趋势下,容器和 Kubernetes 可谓是家喻户晓,许多企业内部的研发团队都在使用 Kubernetes 打造 DevOps 平台.从最早的容器概念到 Kubernetes 再到 DevOp ...

  4. django_day08_项目相关

    django_day08_项目相关 定义数据库表 from django.db import models # Create your models here. class User(models.M ...

  5. Java开发学习(二十九)----Maven依赖传递、可选依赖、排除依赖解析

    现在的项目一般是拆分成一个个独立的模块,当在其他项目中想要使用独立出来的这些模块,只需要在其pom.xml使用<dependency>标签来进行jar包的引入即可. <depende ...

  6. MySQL插入重复数据

    MySQL中批量insert into时防止更新插入重复数据去重的方法,主要是讲到了ignore,Replace,ON DUPLICATE KEY UPDATE三种方法 方案一:使用ignore关键字 ...

  7. FileInputStream字节输入流

    FileInputStream字节输入流 编码思想:首相顶一个FileInputStream字节输入流对象,fis设置为nul,在try/catch里面放入FileInputStream字节输入流对象 ...

  8. day38-IO流05

    JavaIO流05 4.常用的类04 4.4节点流和处理流03 4.4.8打印流-PrintStream和PrintWriter 打印流只有输出流,没有输入流 1.简单介绍及应用 PrintStrea ...

  9. js中new的原理

    面向对象 在了解new的原理之前,先简单地了解一下构造函数和对象. js可以通过构造函数创建对象: function Test() { } var t = new Test(); 构造函数的首字母大写 ...

  10. 【gRPC】C++下使用CMakeLists快速构建项目

    在gRPC中,编写.proto文件(protocol buffer文件)来定义RPC服务的接口是第一步 先通过proto的代码生成器编译生成pb.h.pb.cc.grpc.pb.h.grpc.pb.c ...