vue插件开发是使用过程中不可缺少的一项,可以提高开发效率,减少重复开发,下面就是插件开发的几个步骤:
首先在src下新建plugin文件夹,下面新建toast.vue和toast.js文件
testToast.vue文件代码
<template>
<div>
<p class="rtoast" v-if="show">{{msg}}</p>
</div>
</template>
<script>
export default {
name: "test-toast",
data() {
return {
msg: "hello,world",
show: false
};
},
methods: {
toastShow() {
this.show = true;
}
}
};
</script>
<style>
.rtoast {
width: 200px;
height: 100px;
text-align: center;
}
</style>
testToast.js文件代码
import testToast from ‘./testToast.vue‘
let test = {}
test.install = function (Vue) {
Vue.prototype.$message = ‘Hello I am test.js‘
Vue.prototype.$Method = function (arr) {
return ‘成功调用‘
}
Vue.component(testToast.name, testToast) // testPanel.name 组件的name属性
}
export default test
mian.js引入,装载 import test from ‘./plugin/testToast.js‘ Vue.use(test)
然后在其他组件中引入使用
只需要在模板中插入:
原文:https://www.cnblogs.com/wmydb/p/12666379.html