欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue組件掛載到全局方法的示例代碼

 更新時(shí)間：2018年08月02日 13:43:21   作者：幽丶墨  
這篇文章主要介紹了vue組件掛載到全局方法的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在最近的項(xiàng)目中，使用了bootstrap-vue來(lái)開(kāi)發(fā)，然而在實(shí)際的開(kāi)發(fā)過(guò)程中卻發(fā)現(xiàn)這個(gè)UI提供的組件并不能打到我們預(yù)期的效果，像alert、modal等組件每個(gè)頁(yè)面引入就得重復(fù)引入，并不像element那樣可以通過(guò)this.$xxx來(lái)調(diào)用，那么問(wèn)題來(lái)了，如何通過(guò)this.$xxx來(lái)調(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 彈出框類(lèi)型 對(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)事件的一些處理，與其他處理組件的情況沒(méi)有什么區(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

其主要思想是通過(guò)調(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 能否通過(guò)點(diǎn)擊外部區(qū)域關(guān)閉彈框
  * @param {boolean} noCloseOnEsc 能否通過(guò)鍵盤(pán)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 組件是否銷(xiāo)毀 在官方并沒(méi)有找到手動(dòng)銷(xiāo)毀組件的方法，只能通過(guò)v-if來(lái)實(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)文章

最新評(píng)論