Vue消息提示this.$message方法使用解读
作者：老李四
这篇文章主要介绍了Vue消息提示this.$message方法使用,具有很好的参考价值,希望对大家有所帮助,
Vue消息提示this.$message方法
HTML
<el-button @click="saveData">弹窗</el-button>
JavaScript
saveData（）{
this.$message({undefined
message:“这是弹框消息”,
type:‘success'
})
// type 取值 ‘success'(成功) /warning(警告)/info(消息)/error(错误)/
}element 的 this.$message( ) 消息提示实现
在vue项目中，直接通过js代码 this.$message( )就可以调出消息提示组件，这是如何实现的呢
主要分为以下几步
1.用 Vue.extend 创建组件的模板（构造函数）
2.创建一个函数，在函数内部， 实例化组件并进行挂载到相应元素上
3.将创建的这个函数绑定到Vue原型上，就可以通过this .访问了
上代码，
如下目录结构
在main.js中
import Vue from "vue";
import message from "./main.vue";
// 1.用 Vue.extend 创建组件的模板（构造函数）
let messageConstructor = Vue.extend(message);
let instance;
const Message = function(options) {// options是传入的参数配置 {message: '成功',type: "success"offset: 80}
// 2.实例化组件
instance = new messageConstructor({ data: options }); // 把options导入data中
// 3.组件挂载
instance.$mount();
document.body.appendChild(instance.$el);
// 设置offset
let verticalOffset = options.offset || 20;
instance.verticalOffset = verticalOffset;
instance.duration = options.duration || 3000;
return instance;
};
export default Message;在main.vue中
<template>
<div v-show="visible"
:class="['my-message', 'my-message-' + type, center ? 'is-center' : '']"
:style="positionStyle"
>
<slot>
<p>{{ message }}</p>
</slot>
<i v-if="showClose" class="el-icon-close" @click="close"></i>
</div>
</template>
<script>
export default {
name: "Message",
data() {
return {
visible:false,
verticalOffset: 20,
duration: 3000,
timer: null,
center: false,
showClose: false,
closed: false,
};
},
mounted() {
this.autoClose();
},
beforeDestroy() {
clearTimeout(this.timer);
},
watch: {
closed(newVal) {
if (newVal) {
this.visible = false;
}
}
},
computed: {
positionStyle() {
return {
top: `${this.verticalOffset}px`,
};
},
},
methods: {
autoClose() {
this.timer = setTimeout(() => {
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
}, this.duration);
},
close() {
this.closed = true;
clearTimeout(this.timer);
}
},
};
</script>
<style>
.my-message {
min-width: 380px;
border: 1px solid #ebeef5;
border-radius: 4px;
position: fixed;
left: 50%;
top: 20px;
transform: translateX(-50%);
background-color: #edf2fc;
transition: opacity 0.3s, transform 0.4s, top 0.4s;
overflow: hidden;
display: flex;
align-items: center;
padding: 0 15px;
}
p {
}
.my-message-info {
color: #909399;
}
.my-message-success {
background: #f2f9ec;
color: #67c23a;
border-color: #e4f2da;
}
.my-message-warning {
background: #fcf6ed;
color: #e6a23c;
border-color: #f8ecda;
}
.my-message-error {
background: #fcf0f0;
color: #f56c6c;
border-color: #f9e3e2;
}
.is-center {
justify-content: center;
}
</style>在index.js中
import Vue from "vue"; import Message from './src/main' Vue.prototype.$message = Message
ok了，大晚上的有点困，有些地方有些潦草，有时间再改下。。。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。