vue彈窗外掛程式實戰

2022-09-18 14:09:12 字數 1627 閱讀 6025

vue做移動端經常碰到彈窗的需求, 這裡寫乙個功能簡單的vue彈窗

}

元件html結構, 外層divposition:fixed定位, 內層div顯示彈窗內容

export default ,

time: ,

},data()

},methods: , this.time)}},

hide()

}}

popup.vue只有2個屬性: 文字和顯示時間。元件顯示隱藏由內部屬性visible控制,只暴露給外界open和hide2個方法,2個方法觸發對應的事件

測試一下

元件功能寫好了,但是這種呼叫方式顯得很累贅。舉個例子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)=> )

} return $vm

}

元件例項化後是新增在body上的,props不能寫在html裡需要js去控制,這裡寫個方法讓屬性預設值繼續發揮作用

// plugins/util.js

export const setprops = ($vm, options) =>

object.keys($vm.$options.props).foreach(k => )

const _options = _.assign({}, defaults, options)

for (let i in _options)

}

// plugins/popupplugin.js

import from './popupvm'

import from './util'

export default ,

hide() ,

//只配置文字

text(text) )}}

vue.prototype.$popup = popup

}}

在main.js內註冊外掛程式

import vue from 'vue'

import popupplugin from '@/plugins/popupplugin'

vue.use(popupplugin)

在vue框架內呼叫就非常方便了

vue彈窗外掛程式實戰

vue做移動端經常碰到彈窗的需求,這裡寫乙個功能簡單的vue彈窗 元件html結構,外層divposition fixed定位,內層div顯示彈窗內容 export default time data methods this.time hide popup.vue只有2個屬性 文字和顯示時間。元件...

lhgdialog彈窗外掛程式 氣泡提示

相容 ie6 firefox chrome safari opera以及ipad等移動裝置。並且ie6下也能支援現代瀏覽器的靜止定位 fixed 覆蓋下拉控制項 alpha通道png背景。function confirmdel oid function ordercallback data data...

封裝基於jq彈窗外掛程式

相信碼友們對於 fn.extexd extend 以及 fn.custom和 custom都有一定的了解 我闡述一下我自己對於 fn.custom和 custom的理解 有理解錯誤或是有更好的建議直接噴我就好!下面咱們進行簡單外掛程式的封裝 jquery為開發外掛程式提供了兩個方法,分別是 fn.i...