vue組件掛載到全局方法的示例代碼
在最近的項(xiàng)目中,使用了bootstrap-vue來開發(fā),然而在實(shí)際的開發(fā)過程中卻發(fā)現(xiàn)這個(gè)UI提供的組件并不能打到我們預(yù)期的效果,像alert、modal等組件每個(gè)頁面引入就得重復(fù)引入,并不像element那樣可以通過this.$xxx來調(diào)用,那么問題來了,如何通過this.$xxx來調(diào)用起我們定義的組件或?qū)ξ覀兯褂玫腢I框架的組件呢。
以bootstrap-vue中的Alert組件為例,分一下幾步進(jìn)行:
1、定義一個(gè)vue文件實(shí)現(xiàn)對(duì)原組件的再次封裝
main.vue
<template> <b-alert class="alert-wrap pt-4 pb-4" :show="isAutoClose" :variant="type" dismissible :fade="true" @dismiss-count-down="countDownChanged" @dismissed="dismiss" > {{msg}} </b-alert> </template> <script> export default { /** * 參考: https://bootstrap-vue.js.org/docs/components/alert * @param {string|number} msg 彈框內(nèi)容 * @param {tstring} type 彈出框類型 對(duì)應(yīng)bootstrap-vue中variant 可選值有:'primary'、'secondary'、'success'、'danger'、'warning'、'info'、'light'、'dark'默認(rèn)值為 'info' * @param {boolean} autoClose 是否自動(dòng)關(guān)閉彈出框 * @param {number} duration 彈出框存在時(shí)間(單位:秒) * @param {function} closed 彈出框關(guān)閉,手動(dòng)及自動(dòng)關(guān)閉都會(huì)觸發(fā) */ props: { msg: { type: [String, Number], default: '' }, type: { type: String, default: 'info' }, autoClose: { type: Boolean, default: true }, duration: { type: Number, default: 3 }, closed: { type: Function, default: null } }, methods: { dismiss () { this.duration = 0 }, countDownChanged (duration) { this.duration = duration } }, computed: { isAutoClose () { if (this.autoClose) { return this.duration } else { return true } } }, watch: { duration () { if (this.duration === 0) { if (this.closed) this.closed() } } } } </script> <style scoped> .alert-wrap { position: fixed; width: 600px; top: 80px; left: 50%; margin-left: -200px; z-index: 2000; font-size: 1.5rem; } </style>
這里主要就是對(duì)組件參數(shù)、回調(diào)事件的一些處理,與其他處理組件的情況沒有什么區(qū)別
2、定義一個(gè)js文件掛載到Vue上,并和我們定義的組件進(jìn)行交互
index.js
import Alert from './main.vue' import Vue from 'vue' let AlertConstructor = Vue.extend(Alert) let instance let seed = 1 let index = 2000 const install = () => { Object.defineProperty(Vue.prototype, '$alert', { get () { let id = 'message_' + seed++ const alertMsg = options => { instance = new AlertConstructor({ propsData: options }) index++ instance.id = id instance.vm = instance.$mount() document.body.appendChild(instance.vm.$el) instance.vm.$el.style.zIndex = index return instance.vm } return alertMsg } }) } export default install
其主要思想是通過調(diào)用這個(gè)方法給組件傳值,然后append到body下
3、最后需要在main.js中use一下
import Alert from '@/components/alert/index' Vue.use(Alert)
4、使用
this.$alert({msg: '歡迎━(*`∀´*)ノ亻!'})
5、confrim的封裝也是一樣的
main.vue
<template> <b-modal v-if="!destroy" v-model="isShow" title="溫馨提示" @change="modalChange" @show="modalShow" @shown="modalShown" @hide="modalHide" @hidden="modalHidden" @ok="modalOk" @cancel="modalCancel" :centered="true" :hide-header-close="hideHeaderClose" :no-close-on-backdrop="noCloseOnBackdrop" :no-close-on-esc="noCloseOnEsc" :cancel-title="cancelTitle" :ok-title="okTitle"> <p class="my-4">{{msg}}</p> </b-modal> </template> <script> export default { /** * 參考: https://bootstrap-vue.js.org/docs/components/modal * @param {boolean} isShow 是否顯示modal框 * @param {string|number} msg 展示內(nèi)容 * @param {boolean} hideHeaderClose 是否展示右上角關(guān)閉按鈕 默認(rèn)展示 * @param {string} cancelTitle 取消按鈕文字 * @param {string} okTitle 確定按鈕文字 * @param {boolean} noCloseOnBackdrop 能否通過點(diǎn)擊外部區(qū)域關(guān)閉彈框 * @param {boolean} noCloseOnEsc 能否通過鍵盤Esc按鍵關(guān)閉彈框 * @param {function} change 事件觸發(fā)順序: show -> change -> shown -> cancel | ok -> hide -> change -> hidden * @param {function} show before modal is shown * @param {function} shown modal is shown * @param {function} hide before modal has hidden * @param {function} hidden after modal is hidden * @param {function} ok 點(diǎn)擊'確定'按鈕 * @param {function} cancel 點(diǎn)擊'取消'按鈕 * @param {Boolean} destroy 組件是否銷毀 在官方并沒有找到手動(dòng)銷毀組件的方法,只能通過v-if來實(shí)現(xiàn) */ props: { isShow: { type: Boolean, default: true }, msg: { type: [String, Number], default: '' }, hideHeaderClose: { type: Boolean, default: false }, cancelTitle: { type: String, default: '取消' }, okTitle: { type: String, default: '確定' }, noCloseOnBackdrop: { type: Boolean, default: true }, noCloseOnEsc: { type: Boolean, default: true }, change: { type: Function, default: null }, show: { type: Function, default: null }, shown: { type: Function, default: null }, hide: { type: Function, default: null }, hidden: { type: Function, default: null }, ok: { type: Function, default: null }, cancel: { type: Function, default: null }, destroy: { type: Boolean, default: false } }, methods: { modalChange () { if (this.change) this.change() }, modalShow () { if (this.show) this.show() }, modalShown () { if (this.shown) this.shown() }, modalHide () { if (this.hide) this.hide() }, modalHidden () { if (this.hidden) this.hidden() this.destroy = true }, modalOk () { if (this.ok) this.ok() }, modalCancel () { if (this.cancel) this.cancel() } } } </script>
index.js
import Confirm from './main.vue' import Vue from 'vue' let ConfirmConstructor = Vue.extend(Confirm) let instance let seed = 1 let index = 1000 const install = () => { Object.defineProperty(Vue.prototype, '$confirm', { get () { let id = 'message_' + seed++ const confirmMsg = options => { instance = new ConfirmConstructor({ propsData: options }) index++ instance.id = id instance.vm = instance.$mount() document.body.appendChild(instance.vm.$el) instance.vm.$el.style.zIndex = index return instance.vm } return confirmMsg } }) } export default install
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vuejs2.0 如何利用proxyTable實(shí)現(xiàn)跨域請(qǐng)求
本篇文章主要介紹了Vuejs2.0 如何利用proxyTable實(shí)現(xiàn)跨域請(qǐng)求,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08vue2 設(shè)置router-view默認(rèn)路徑的實(shí)例
今天小編就為大家分享一篇vue2 設(shè)置router-view默認(rèn)路徑的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue+elementUl導(dǎo)入文件方式(判斷文件格式)
這篇文章主要介紹了vue+elementUl導(dǎo)入文件方式(判斷文件格式),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08VUE引入DataV報(bào)錯(cuò)解決實(shí)戰(zhàn)記錄
在使用vue開發(fā)大屏?xí)r,發(fā)現(xiàn)了一個(gè)很好用的可視化組件庫DataV,下面這篇文章主要給大家介紹了關(guān)于VUE引入DataV報(bào)錯(cuò)解決的實(shí)戰(zhàn)記錄,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04vue3組件化開發(fā)常用API知識(shí)點(diǎn)總結(jié)
Vue是目前Web前端最流行的開發(fā)框架技術(shù),?下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)常用API的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06Vue的指令中實(shí)現(xiàn)傳遞更多參數(shù)
這篇文章主要介紹了Vue的指令中實(shí)現(xiàn)傳遞更多參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05vue項(xiàng)目中使用vue-layer彈框插件的方法
這篇文章主要介紹了vue項(xiàng)目中使用vue-layer彈框插件的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03vue菜單欄聯(lián)動(dòng)內(nèi)容頁面tab的實(shí)現(xiàn)示例
本文主要介紹了vue菜單欄聯(lián)動(dòng)內(nèi)容頁面tab的實(shí)現(xiàn)示例,左側(cè)菜單欄與右側(cè)內(nèi)容部分聯(lián)動(dòng),當(dāng)點(diǎn)擊左側(cè)的菜單,右側(cè)會(huì)展示對(duì)應(yīng)的tab,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01