element消息提示封装
官方的
<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消息提示封装的更多相关文章
- element组件dialog关闭时Message消息提示抖动问题
在页面内容较多,出现滚动条时使用element组件里的dialog组件,当关闭dialog组件的同时弹出Message消息提示时,Message会抖动一下. 在页面有滚动条的情况先打开dialog时, ...
- 【源码解读】js原生消息提示插件
效果如下: 关闭message后前后message的衔接非常丝滑,这部分是我比较感兴趣的.带着这个问题先了解下DOM结构,顺便整理下作者的思路. 从DOM里我们可以看到所有的message都在一个容器 ...
- Js添加消息提示数量
接到个新需求,类似以下这种需求,得把它封装成一个插件 后端给返回一个这种数据 var data = [ { key:"020506", num:5 }, { key:"0 ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(五) 之 加好友,加群流程,消息管理和即时消息提示的实现
前言 前前一篇留了个小问题,在上一篇中忘了写了,就是关于LayIM已经封装好的上传文件或者图片的问题.对接好接口之后,如果上传速度慢,界面就会出现假死情况,虽然文件正在上传.于是我就简单做了个图标替代 ...
- 【Android代码片段之六】Toast工具类(实现带图片的Toast消息提示)
转载请注明出处,原文网址:http://blog.csdn.net/m_changgong/article/details/6841266 作者:张燕广 实现的Toast工具类ToastUtil封装 ...
- JS~Boxy和JS模版实现一个标准的消息提示框
面向对象的封装 面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...
- MFC上下浮动与渐入渐出消息提示框实现
类似QQ与360软件,消息提示有两种.上下浮动.渐入渐出. 1.上下浮动提示框实现 机制,定时器响应上下浮动消息. 主要API:MoveWindow. 源码如下UpDownTipDlg.h.UpDow ...
- 在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知
需求来源:向后台请求数据时后台挂掉了,后台响应就出现错误,不做处理界面就卡住了,这时需要在main.js中使用axios的响应拦截器在出现相应错误是给出提示.项目使用element-ui,就调用里面的 ...
- Message 消息提示
常用于主动操作后的反馈提示.与 Notification 的区别是后者更多用于系统级通知的被动提醒. 基础用法 从顶部出现,3 秒后自动消失. Message 在配置上与 Notification 非 ...
随机推荐
- centos中screen的使用
只是讲解几个简单的操作,例如,创建新窗口,切换到新窗口,删除窗口.(因为我要启动elk,所以需要使用到screen) 一.创建一个新窗口: 安装完成后,直接敲命令screen就可以启动它.但是这样启动 ...
- socket常见问题
socket编程中主动关闭VS被动关闭 tcp中server,client都可能是主动关闭方或者被动关闭方,现阐述下两者之间的关系: 客户端(client) ...
- oracle相关知识点
oracle数据库,实例名和数据库是一一对应的,oracle服务端可以启动多个实例,对应于多个数据库. 数据库可以通过sqlplus / as sysdba 进入默认SID的实例, 查看当前的实例名: ...
- jdk8环境下sprngboot/springmvc中JSR310新日期/时间类LocalDateTime显示效果带T
如图所示: 日期时间类中带了一个T,以上这种格式LocalDateTime格式化的时候默认日期时间格式:ISO.DATE_TIME(按笔者目前的知识理解是ISO8601规范中的日期时间格式化) 想要把 ...
- SpringBoot: 18.使用Scheduled 定时任务器(转)
Scheduled 定时任务器:是 Spring3.0 以后自带的一个定时任务器. 1.在pom.xml文件中添加Scheduled依赖 <!-- 添加spring定时任务 Scheduled ...
- 撸一个vue的双向绑定
1.前言 说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...
- JavaSE基础(十一)--Java数组
Java 数组 数组对于每一门编程语言来说都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同. Java 语言中提供的数组是用来存储固定大小的同类型元素. 数组特点: 其长度是确定的.数 ...
- MySQL之基础认识与操作
MySQL数据库 开发学习中,想满足一些需求,无疑需要经常与数据打交道,例如,我们在使用IO的一些技术的时候,常常需要将一些数据存储到外部文件,可能大家会问,我们初学的时候常常会简单的保存一些数据到 ...
- neo4j 将一个节点的属性复制到另一个节点上
在使用Python操作Neo4j数据库的时候,经常会遇到重复的节点,需要将一个节点的属性复制到另一个节点,之后将该节点删除. def copy_node_properties(source_node_ ...
- Python 解leetcode:48. Rotate Image
题目描述:把一个二维数组顺时针旋转90度: 思路: 对于数组每一圈进行旋转,使用m控制圈数: 每一圈的四个元素顺时针替换,可以直接使用Python的解包,使用k控制每一圈的具体元素: class So ...