重学vue2 1、手写弹出框插件

实现弹窗组件

  • 弹窗这类组件的特点是它们在当前vue实例之外独⽴存在,通常挂载于body;它们是通过JS动态创建的,
  • 不需要在任何组件中声明。常⻅使⽤姿势:
	this.$create({
		title: '起早学习',
		message: '提示信息',
		duration: 1000
	}).show();
如何实现$create函数?
  1. 需要一个构造函数
    • 借鸡生蛋(使用new Vue方式获取)
    • 使用vue.extend方法获取
  2. 获取组件的实例
    • new Vue()方法返回组件实例
    • vue.extend() new获取
  3. 挂载
    • $mound()

废话不多说,上代码

  1. 借鸡生蛋
// 创建函数接收要创建组件定义
function create(Component, props) {
// 创建⼀个Vue新实例
const vm = new Vue({
   render(h) {
   		// render函数将传⼊组件配置对象转换为虚拟dom
   		console.log(h(Component, { props }));
   		return h(Component, { props });
    }
}).$mount(); //执⾏挂载函数,但未指定挂载⽬标,表示只执⾏初始化⼯作
// 将⽣成dom元素追加⾄body
document.body.appendChild(vm.$el);
// 给组件实例添加销毁⽅法
const comp = vm.$children[0];
comp.remove = () => {
   document.body.removeChild(vm.$el);
   vm.$destroy();
};
return comp; }
// 暴露调⽤接⼝
export default create;

2.extend

const Ctor=Vue.extend(Component)
//propsData选项传递属性
const comp=new Ctor({propsData:props})
comp.$mound()
document.body.appendChild(comp.$el);
 .remove = () => {
	document.body.removeChild(comp.$el);
	comp.$destroy();
 };
  • 使用插件进一步封装便于使用
export default{
	install(Vue){
		Vue.prototype.$notice=function(options){
			return create(Notice,options)	
		}
	}
}
展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值