vue.js组件知识点挺多的，而且很重要，本文就给大家介绍关于利用vue.js开发实现全局调用的messagebox组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧，希望能帮助到大家。
组件模板
// /src/components/messagebox/index.vue
<template>
<p class="message-box" v-show="isshowmessagebox">
<p class="mask" @click="cancel"></p>
<p class="message-content">
<svg class="icon" aria-hidden="true" @click="cancel">
<use xlink:href="#icon-delete" rel="external nofollow" ></use>
</svg>
<h3 class="title">{{ title }}</h3>
<p class="content">{{ content }}</p>
<p>
<input type="text" v-model="inputvalue" v-if="isshowinput" ref="input">
</p>
<p class="btn-group">
<button class="btn-default" @click="cancel" v-show="isshowcancelbtn">{{ cancelbtntext }}</button>
<button class="btn-primary btn-confirm" @click="confirm" v-show="isshowconfimrbtn">{{ confirmbtntext }}</button>
</p>
</p>
</p>
</template>
<script>
export default {
props: {
title: {
type: string,
default: '标题'
},
content: {
type: string,
default: '这是弹框内容'
},
isshowinput: false,
inputvalue: '',
isshowcancelbtn: {
type: boolean,
default: true
},
isshowconfimrbtn: {
type: boolean,
default: true
},
cancelbtntext: {
type: string,
default: '取消'
},
confirmbtntext: {
type: string,
default: '确定'
}
},
data () {
return {
isshowmessagebox: false,
resolve: '',
reject: '',
promise: '' // 保存promise对象
};
},
methods: {
// 确定,将promise断定为resolve状态
confirm: function () {
this.isshowmessagebox = false;
if (this.isshowinput) {
this.resolve(this.inputvalue);
} else {
this.resolve('confirm');
}
this.remove();
},
// 取消,将promise断定为reject状态
cancel: function () {
this.isshowmessagebox = false;
this.reject('cancel');
this.remove();
},
// 弹出messagebox,并创建promise对象
showmsgbox: function () {
this.isshowmessagebox = true;
this.promise = new promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
// 返回promise对象
return this.promise;
},
remove: function () {
settimeout(() => {
this.destroy();
}, 300);
},
destroy: function () {
this.$destroy();
document.body.removechild(this.$el);
}
}
};
</script>
<style lang="scss" scoped>
// 此处省略 ...
</style>
给组件添加全局功能
vue.js官方文档中有开发插件的介绍。具体实现代码如下：
// /src/components/messagebox/index.js
import msgboxvue from './index.vue';
// 定义插件对象
const messagebox = {};
// vue的install方法，用于定义vue插件
messagebox.install = function (vue, options) {
const messageboxinstance = vue.extend(msgboxvue);
let currentmsg, instance;
const initinstance = () => {
// 实例化vue实例
currentmsg = new messageboxinstance();
let msgboxel = currentmsg.$mount().$el;
document.body.appendchild(msgboxel);
};
// 在vue的原型上添加实例方法，以全局调用
vue.prototype.$msgbox = {
showmsgbox (options) {
if (!instance) {
initinstance();
}
if (typeof options === 'string') {
currentmsg.content = options;
} else if (typeof options === 'object') {
object.assign(currentmsg, options);
}
return currentmsg.showmsgbox();
}
};
};
export default messagebox;
全局使用
// src/main.js
import messagebox from './components/messagebox/index';
vue.use(messagebox);
页面调用
按照之前定义好的方法，可以在各个页面中愉快的调用该组件了。
this.$msgbox.showmsgbox({
title: '添加分类',
content: '请填写分类名称',
isshowinput: true
}).then(async (val) => {
// ...
}).catch(() => {
// ...
});
最后来张效果图
希望大家对vue.js组件知识由一个更清晰的掌握，大家赶紧动手操作一下吧。
相关推荐：
什么是vue.js组件？vue.js组件用法汇总
深入探讨vue.js组件和组件通信
详细介绍c#消息提示框messagebox的使用
以上就是vue.js实现全局调用messagebox组件的详细内容。