vue彈窗外掛程式實戰

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

}

export default ,

time: ,
},data()
},methods: , this.time)}},
hide() 
}}

測試一下

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

// 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
}}

import vue from 'vue'

import popupplugin from '@/plugins/popupplugin'
vue.use(popupplugin)

2018-12-19 15:55

棲息地 閱讀(

...)

編輯收藏

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...