vue元件掛載到全域性方法的示例程式碼
阿新 • • 發佈:2019-01-01
在最近的專案中,使用了bootstrap-vue來開發,然而在實際的開發過程中卻發現這個UI提供的元件並不能打到我們預期的效果,像alert、modal等元件每個頁面引入就得重複引入,並不像element那樣可以通過this.
xxx來呼叫起我們定義的元件或對我們所使用的UI框架的元件呢。
以bootstrap-vue
1、定義一個vue檔案實現對原元件的再次封裝
main.vue
<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 彈框內容
* @param {tstring} type 彈出框型別 對應bootstrap-vue中variant 可選值有:'primary'、'secondary'、'success'、'danger'、'warning'、'info'、'light'、'dark'預設值為 'info'
* @param {boolean} autoClose 是否自動關閉彈出框
* @param {number} duration 彈出框存在時間(單位:秒)
* @param {function} closed 彈出框關閉,手動及自動關閉都會觸發
*/
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>
這裡主要就是對元件引數、回撥事件的一些處理,與其他處理元件的情況沒有什麼區別
2、定義一個js檔案掛載到Vue上,並和我們定義的元件進行互動
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
其主要思想是通過呼叫這個方法給元件傳值,然後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 展示內容
* @param {boolean} hideHeaderClose 是否展示右上角關閉按鈕 預設展示
* @param {string} cancelTitle 取消按鈕文字
* @param {string} okTitle 確定按鈕文字
* @param {boolean} noCloseOnBackdrop 能否通過點選外部區域關閉彈框
* @param {boolean} noCloseOnEsc 能否通過鍵盤Esc按鍵關閉彈框
* @param {function} change 事件觸發順序: 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 點選'確定'按鈕
* @param {function} cancel 點選'取消'按鈕
* @param {Boolean} destroy 元件是否銷燬 在官方並沒有找到手動銷燬元件的方法,只能通過v-if來實現
*/
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
最後
為了幫助大家讓學習變得輕鬆、高效,給大家免費分享一大批資料,幫助大家在成為全棧工程師,乃至架構師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習交流圈:866109386.歡迎大家進群交流討論,學習交流,共同進步。
當真正開始學習的時候難免不知道從哪入手,導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握,學習時頻繁踩坑,最終浪費大量時間,所以有有效資源還是很有必要的。
最後祝福所有遇到瓶疾且不知道怎麼辦的前端程式設計師們,祝福大家在往後的工作與面試中一切順利。