官方的

<template>
<el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open3">警告</el-button>
<el-button :plain="true" @click="open1">消息</el-button>
<el-button :plain="true" @click="open4">错误</el-button>
</template> <script>
export default {
methods: {
open1() {
this.$message('这是一条消息提示');
},
open2() {
this.$message({
message: '恭喜你,这是一条成功消息',
type: 'success'
});
}, open3() {
this.$message({
message: '警告哦,这是一条警告消息',
type: 'warning'
});
}, open4() {
this.$message.error('错了哦,这是一条错误消息');
}
}
}
</script>

二次封装

    // 操作成功提醒(success)
success(command) {
let message = {
add: '新增成功',
upd: '修改成功',
del: '删除成功'
}
this.$message.success(command && message[command] || '操作成功')
return true
},
// 操作失败提醒(faild)
faild(command) {
let message = {
add: '新增失败',
upd: '修改失败',
del: '删除失败',
}
this.$message.error(command && message[command] || '操作失败')
return true
}

组件里面调用

this.success('add')
this.success('del')
this.faild('upd')

全局引用的话放在minx里面就可以了

element消息提示封装的更多相关文章

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

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

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

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

  3. Js添加消息提示数量

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

  4. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(五) 之 加好友,加群流程,消息管理和即时消息提示的实现

    前言 前前一篇留了个小问题,在上一篇中忘了写了,就是关于LayIM已经封装好的上传文件或者图片的问题.对接好接口之后,如果上传速度慢,界面就会出现假死情况,虽然文件正在上传.于是我就简单做了个图标替代 ...

  5. 【Android代码片段之六】Toast工具类(实现带图片的Toast消息提示)

    转载请注明出处,原文网址:http://blog.csdn.net/m_changgong/article/details/6841266  作者:张燕广 实现的Toast工具类ToastUtil封装 ...

  6. JS~Boxy和JS模版实现一个标准的消息提示框

    面向对象的封装 面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...

  7. MFC上下浮动与渐入渐出消息提示框实现

    类似QQ与360软件,消息提示有两种.上下浮动.渐入渐出. 1.上下浮动提示框实现 机制,定时器响应上下浮动消息. 主要API:MoveWindow. 源码如下UpDownTipDlg.h.UpDow ...

  8. 在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知

    需求来源:向后台请求数据时后台挂掉了,后台响应就出现错误,不做处理界面就卡住了,这时需要在main.js中使用axios的响应拦截器在出现相应错误是给出提示.项目使用element-ui,就调用里面的 ...

  9. Message 消息提示

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

随机推荐

  1. MyEclipse环境的项目改为在Eclipse中运行爬坑记【我】

      新检出一个web项目,同事都是运行在MyEclipse中的,我用Eclipse启动, 1.首先是许多jar包报错: 处理方法为 remove掉,然后 选 WEB-INF 下的所有 jar 重新添加 ...

  2. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_05-freemarker基础-List指令

    controller填充数据 @RequestMapping("/freemarker") @Controller public class FreemarkerControlle ...

  3. python用户评论标签匹配的解决方法

    python用户评论标签匹配的解决方法 这篇文章主要为大家详细介绍了python用户评论标签匹配的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 我们观察用户评论发现:属性词往往和情感词伴 ...

  4. Delphi10.2安装过程详解

    下载好的Delphi10.2是iso镜像,使用虚拟光驱,快速装载后,提示安装   运行setup.exe安装程序,选择安装语言——点击OK,最好关闭网络和退出其他软件   勾选同意条款,点击next ...

  5. iOS实现图片无限轮播之使用第三方库SDCycleScrollView(转)

    下载链接:github不断更新地址:https://github.com/gsdios/SDCycleScrollView #import "ViewController.h" # ...

  6. 安卓运行linux应用程序

    安卓是可以运行linux应用程序的,安卓系统原来就基于Linux.但是安卓已经把linux改头换面了.具体方法是安装Termux软件,然后就可以运行pkg命令安装软件包了,希望可以帮助到大家.

  7. C语言递归之在每个树行中找最大值

    题目描述 您需要在二叉树的每一行中找到最大的值. 示例 输入: / \ / \ \ 输出: [, , ] 题目要求 /** * Definition for a binary tree node. * ...

  8. 最新 快乐阳光java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.快乐阳光等10家互联网公司的校招Offer,因为某些自身原因最终选择了快乐阳光.6.7月主要是做系统复习.项目复盘.Leet ...

  9. vscode插件Project Manager

    参考链接:https://www.jianshu.com/p/b11532b91414

  10. 《鸟哥的Linux私房菜:基础学习篇》第二部分读书笔记

    一.Linux的文件权限与目录配置 1. Linux用户身份与用户组记录的文件:默认情况下,/etc/passwd记录所有的系统账号与一般身份账号及root的相关信息,/etc/shadow记录个人的 ...