免费微信小程序_vue.js开发完成全局调用的Messag

阅读  ·  发布日期 2021-01-11 11:38  ·  admin
vue.js开发实现全局调用的MessageBox组件实例代码       最近学习了Vue.js,感觉组件这个地方知识点挺多的,而且很重要,所以决定记录下,下面这篇文章主要给大家介绍了关于利用vue.js开发实现全局调用的MessageBox组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。

一开始接触到vue中的组件的时候,对于组件的理解还是不够充分的,最近在开发个人博客项目中,一开始就没准备使用一些现在比较流行的UI库(毕竟是个人项目,多练练手还是好的),所以需要自己开发几个全局组件,这里以MessageBox为例记录下vue.js如何开发全局组件。所谓全局变量是针对vue实例下说的,即所有的vue实际都可以运用到这个组件,局部组件就是针对某个实例来说的,只有这个vue实例下才能发挥作用,下面话不多说了,来一看看详细的介绍吧。

源码

组件模板

// /ponents/MessageBox/index.vue
 template 
 div v-show="isShowMessageBox" 
 div @click="cancel" /div 
 div 
 svg aria-hidden="true" @click="cancel" 
 use xlink:href="#icon-delete" rel="external nofollow" /use 
 /svg 
 h3 {{ title }} /h3 
 p {{ content }} /p 
 div 
 input type="text" v-model="inputValue" v-if="isShowInput" ref="input" 
 /div 
 div 
 button @click="cancel" v-show="isShowCancelBtn" {{ cancelBtnText }} /button 
 button @click="confirm" v-show="isShowConfimrBtn" {{ confirmBtnText }} /button 
 /div 
 /div 
 /div 
 /template 
 script 
 export default {
 pro凡科抠图: {
 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官方文档中有。具体实现代码如下:

// /ponents/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(() = {
 // ...
}); 

最后来张效果图


总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对凡科的支持。