這篇文章帶給大家的內容是關於vue中彈窗插件的應用方法（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
vue做行動裝置經常碰到彈窗的需求, 這裡寫一個功能簡單的vue彈窗
<template>
<div>
<div>{{text}}</div>
</div>
</template>元件html結構,外層pposition:fixed定位, 內層p顯示彈跳窗內容
export default {
name: 'popup',
props: {
text: { //文字内容
type: String,
default: ''
},
time: { //显示的时长
type: Number,
default: 3e3
},
},
data(){
return {
visible: false
}
},
methods: {
open() {
this.visible = true
clearTimeout(this.timeout);
this.$emit('show')
if(this.time > 0){
this.timeout = setTimeout(() => {
this.hide()
}, this.time)
}
},
hide() {
this.visible = false
this.$emit('hide')
clearTimeout(this.timeout);
}
}
}popup.vue只有2個屬性: 文字和顯示時間。元件顯示隱藏由內部屬性visible控制，只暴露給外界open和hide2個方法，2個方法觸發對應的事件
測試一下
<template>
<popup></popup>
</template>
<script>
import Popup from '@/components/popup'
...
this.$refs.popup.open()
...
</script>
外掛程式
###元件功能寫好了，但是這種呼叫方式顯得很累贅。舉例layer.js的呼叫就是layer.open(...)沒有import，沒有ref，當然要先全域引用layer。我們寫的彈跳窗能不能這麼方便呢，為此需要把popup改寫成vue插件。 ###說是插件，但能配置屬性呼叫方法的還是元件本身，具體是實例化的元件，而且這個實例必須是全域單例，這樣不同vue檔喚起popup的時候才不會打架#### ##產生單例###// plugins/popupVm.js
import Popup from '@/components/popup'
let $vm
export const factory = (Vue)=> {
if (!$vm) {
let Popup = Vue.extend(PopupComponent)
$vm = new Popup({
el: document.createElement('p')
})
document.body.appendChild($vm.$el)
}
return $vm
}// plugins/util.js
export const setProps = ($vm, options) => {
const defaults = {}
Object.keys($vm.$options.props).forEach(k => {
defaults[k] = $vm.$options.props[k].default
})
const _options = _.assign({}, defaults, options)
for (let i in _options) {
$vm.$props[i] = _options[i]
}
}// plugins/popupPlugin.js
import { factory } from './popupVm'
import { setProps } from './util'
export default {
install(Vue) {
let $vm = factory(Vue);
const popup = {
open(options) {
setProps($vm, options)
//监听事件
typeof options.onShow === 'function' && $vm.$once('show', options.onShow);
typeof options.onHide === 'function' && $vm.$once('hide', options.onHide);
$vm.open();
},
hide() {
$vm.hide()
}，
//只配置文字
text(text) {
this.open({ text })
}
}
Vue.prototype.$popup = popup
}
}//main.js import Vue from 'vue' import PopupPlugin from '@/plugins/popupPlugin' Vue.use(PopupPlugin)
<script>
...
this.$popup.text('弹窗消息')
...
</script>以上是vue中彈跳窗插件的應用方法（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
