自己封装插件,可以简单理解成是一种比封装组件更高级的代码复用。
新增文件
在 components / common / toast 文件夹下,新增文件 Toast.vue 和 index.js ,代码如下:
Toast.vue
一个模板文件。
<template>
<div class="toast" v-show="isShow">
<div>{{message}}</div>
</div>
</template>
<script>
export default {
name: "Toast",
data() {
return {
message: "",
isShow: false
};
},
methods: {
show(message = "默认文字", duration = 1500) {
this.isShow = true;
this.message = message;
setTimeout(() => {
this.isShow = false;
this.message = "";
}, duration);
}
}
};
</script>
<style scoped>
.toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 8px 10px;
color: #fff;
z-index: 99;
background-color: rgba(0, 0, 0, 0.6);
}
</style>
index.js
当在别的地方引用 toast 后,Vue.use 时会执行该文件中的的 install 。
import Toast from './Toast'
import Vue from 'vue'
const obj = {}
obj.install = function (Vue) {
// 创建组件构造器
const toastConstructor = Vue.extend(Toast)
// new的方式。根据组件构造器,可以创建一个组件对象
const toast = new toastConstructor()
// 将组件对象手动挂载到某一个元素上
toast.$mount(document.createElement('div'))
// toast.$el对应的就是DIV
document.body.appendChild(toast.$el)
Vue.prototype.$toast = toast
}
export default obj
引入插件
因为这个可以作为全局插件引用,所以在 main.js 引入。如果不是全局插件,可以在某个具体页面中引入。
import toast from './components/common/toast'
Vue.use(toast)
使用插件
把参数传过去,即可通过一行代码调用插件。
var message = "123456";
this.$toast.show(message, 1500);