前言
一開始接觸到vue中的組件的時候，對于組件的理解還是不夠充分的，最近在開發個人博客項目中，一開始就沒準備使用一些現在比較流行的UI庫（畢竟是個人項目，多練練手還是好的），所以需要自己開發幾個全局組件，這里以MessageBox為例記錄下vue.js如何開發全局組件。所謂全局變量是針對vue實例下說的，即所有的vue實際都可以運用到這個組件，局部組件就是針對某個實例來說的，只有這個vue實例下才能發揮作用，下面話不多說了，來一看看詳細的介紹吧。
源碼
github地址：Talk is cheap. Show me the code.
本地下載地址：http://xiazai.VeVB.COm/201711/yuanma/vue-messagebox(VeVB.COm).rar
組件模板
// /src/components/MessageBox/index.vue<template> <div class="message-box" v-show="isShowMessageBox"> <div class="mask" @click="cancel"></div> <div 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> <div> <input type="text" v-model="inputValue" v-if="isShowInput" ref="input"> </div> <div 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> </div> </div> </div> </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.jsimport 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.jsimport MessageBox from './components/MessageBox/index';Vue.use(MessageBox);
頁面調用
按照之前定義好的方法，可以在各個頁面中愉快的調用該組件了。
this.$msgBox.showMsgBox({ title: '添加分類', content: '請填寫分類名稱', isShowInput: true}).then(async (val) => { // ... }).catch(() => { // ...}); 最后來張效果圖
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
