自定义的vue插件,在我的理解中，分为两种:
1.注册成全局组件的形式
比如，你在main,js中Vue.use(yourPlugin) 然后在你的页面内可以这样使用
<template>
<div id="yourPage">
<yourPlugin></yourPlugin>
</div>
</template>
2.注册成全局函数的形式
同样在main.js中Vue.use(yourPlugin)
但是在你的页面内是使用函数的形式调用的,比如
<template>
</template>
<script>
export default {
mounted: {
this.$yourPlugin.show({ yourData })
}
}
</script>
第一种形式可以参考这位大大的 http://www.jianshu.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)
...
使用方法放在最上面那里
