自定義的vue插件,在我的理解中，分為兩種:
1.注冊成全局組件的形式
比如，你在main,js中Vue.use(yourPlugin) 然后在你的頁面內(nèi)可以這樣使用
<template>
<div id="yourPage">
<yourPlugin></yourPlugin>
</div>
</template>
2.注冊成全局函數(shù)的形式
同樣在main.js中Vue.use(yourPlugin)
但是在你的頁面內(nèi)是使用函數(shù)的形式調(diào)用的,比如
<template>
</template>
<script>
export default {
mounted: {
this.$yourPlugin.show({ yourData })
}
}
</script>
第一種形式可以參考這位大大的 http://www.reibang.com/p/d6855556cd75
主要記錄一下第二種
js文件修改為
import temp from './temp.vue'
const pluginModel= {
install (Vue, options) {
// Vue.component(temp.name, temp)
const Plugin= Vue.extend(temp)
let pluginBox= document.querySelector('.plugin-box')
function $pluginModel() {}
$pluginModel.show = (data) => {
return new Promise((resolve) => {
if (!pluginBox) {
pluginBox= new Plugin()
pluginBox.$mount()
document.querySelector('body').appendChild(pluginBox.$el)
}
pluginBox.show(data)
resolve()
})
}
Vue.prototype.$pluginModel= $pluginModel
}
}
export default pluginModel
vue文件基本不變
<template lang="html" name="fade">
<div class="plugin-box" v-if="isShow" @click="hide">
<h1>瞧一瞧看一看啦哈</h1>
</div>
</template>
<script>
export default {
name: 'plugin',
data () {
return {
isShow: false
}
},
methods: {
show: function (data) {
this.isShow= true
},
hide: function () {
this.isShow= false
}
}
}
</script>
<style lang="css">
</style>
然后在main.js中引入js文件并Vue.use(yourPlugin)
...
import yourPlugin from './yourPlugin.js'
Vue.use(yourPlugin)
...
使用方法放在最上面那里
