弹框组件的实现

296 阅读1分钟

弹框组件的实现; 实现思路: 1.封装一个Notice.vue的组件,主要放置弹框组件的模板样式; 2.接受父组件传递的参数:title、message、duration 3.data里面定义弹框的状态 4.实现两个方法一个是组件的显示一个是组件的隐藏;在组件显示的方法里面实现一个定时关闭的方法; 在隐藏的方法里面调用remove() remove()方法是在调用的自己实现的create方法里面 5.实现一个create方法;用来把弹框组件在body标签后面追加 实现方法1: 1.通过实例化组件,使用render方法。最后调用mount把虚拟DOM转化真实的DOM;如果mount把虚拟DOM转化真实的DOM;如果mount()方法 传入了参数,那么表示替换该节点, 2.将转化真实的DOM通过document.body.appendChild(vm,el)3.获取组件的实例给实例绑定remove()方法;调用document.body.removeChild(vm.el) 3.获取组件的实例给实例绑定remove()方法;调用document.body.removeChild(vm.el);最后 vm.destory()销毁组件,防止资源占用4.将组件实例返回returncomp;实现方法2//把组件传进入constCtor=Vue.extend(Component);//创建组件实例,挂载到domconstComp=newCtor(propsData:options).destory()销毁组件,防止资源占用 4.将组件实例返回 return comp; 实现方法2: //把组件传进入 const Ctor = Vue.extend(Component); //创建组件实例,挂载到dom const Comp = new Ctor({ propsData: options }).mount(); //将组件实例添加到body上 document.body.appendChild(Comp.el); Comp.remove = () => { //删除dom document.body.removeChild(Comp.el); //销毁组件 Comp.$destroy(); }; //返回Component组件实例 return Comp; 6.使用create方法: create(Notice, { title: "来搬砖", message: isValid ? "成功" : "失败", duration: 3000, }).show();