手动添加vue组件
手写一个消息提示组件挂载到vue实例,也是偷来的哈哈
//先在components 下新建一个Message.vue组件
//appear 特性设置节点的在初始渲染的过渡 <template> <transition name="move" appear=""> <div class="msg" v-if="visible">{{ message }}</div> </transition> </template> <script> export default { name: "Message", props: { message: { type: String, default: "我是一个消息提示" }, duration: { type: Number, default: 3000 }, visible: { type: Boolean, default: false } }, data() { return { list: ["大中国 yyds"] }; }, mounted() { this.autoClose(); }, methods: { //自动关闭消息提示组件 autoClose() { if (this.duration !== 0) { setTimeout(() => { this.close(); }, this.duration + 800); //800毫秒是过渡动画的时间 } }, //关闭组件 close() { //sync 修饰符 this.$emit("update:visible", false); } } }; </script> <style lang="less" scoped> .msg { position: fixed; top: 50px; left: 0; right: 0; width: 20%; padding: 5 20px; margin: auto; height: 40px; line-height: 40px; border-radius: 18px; background-color: #fff; font-size: 16px; text-align: center; color: #000; background-color: #2d8cf0; //动画进入时 &.move-enter, &.move-leave-to { opacity: 0; transform: translateY(-50px); } //动画持续时 &.move-enter-active, &.move-leave-active { transition: 0.8s linear; } } </style>
components 下新建message.js 完成挂载
import Vue from 'vue'
import Message from "./Message.vue";
const createMessage = (propsData) => {
//1.生成组件的构造器 propsData固定参数不可更改
const Ctor = Vue.extend(Message)
//2.创建组件实例,并执行挂载
const vm = new Ctor({
propsData
}).$mount();
//监听组件关闭事件
vm.$on('update:visible', flag => {
vm.visible = flag
})
//3.通过原生Dom api的方式把组件的根元素插入到文档(真实DOM)中
document.body.appendChild(vm.$el);
return vm;
}
export {
createMessage
}
在src下新建plugins文件夹 再建index.js文件完成注册
import Message from '@/components/Message.vue'
import {
createMessage
} from '@/components/message'
export default {
install(Vue) {
//注册Message组件
Vue.component(Message.name, Message)
//添加原型方法
Vue.prototype.$message = createMessage
}
}
最后就是在main.js 文件中引用
import My from './plugins'
Vue.use(My)