详解如何在vue+element-ui的项目中封装dialog组件

2023-07-08 10:03:03 179

1、问题起源

由于Vue基于组件化的设计，得益于这个思想，我们在Vue的项目中可以通过封装组件提高代码的复用性。根据我目前的使用心得，知道Vue拆分组件至少有两个优点：

1、代码复用。

2、代码拆分

在基于element-ui开发的项目中，可能我们要写出一个类似的调度弹窗功能，很容易编写出以下代码：

上述代码存在的问题非常多，首先当我们的弹窗越来越多的时候，我们会发现此时需要定义越来越多的变量去控制这个弹窗的显示或者隐藏。

由于当我们的弹窗的内部还有业务逻辑需要处理，那么此时会有相当多的业务处理代码夹杂在一起（比如我调用中国地图我需要用高德地图或者百度地图，而调用美国、英国地图我只能用谷歌地图，这会使得两套业务逻辑分别位于一个文件，严重加大了业务的耦合度）

我们按照分离业务，降低耦合度的原则，将代码按以下思路进行拆分：

1、View.vue

2、ChinaMapDialog.vue

3、由于此处仅仅展示伪代码，且和ChinaMapDialog.vue表达的含义一致，为避免篇幅过长USAMapDialog.vue和UKMapDialog.vue已省略

2、问题分析

我们通过对这几个弹窗的分析，对刚才的设计进行抽象发现，这里面都有一个共同的部分，那就是我们对dialog的操作代码都是可以重用的代码，如果我们能够编写出一个抽象的弹窗，
然后在恰当的时候将其和业务代码进行组合，就可以实现1+1=2的效果。

3、设计

由于Vue在不改变默认的mixin原则（默认也最好不要改变，可能会给后来的维护人员带来困惑）的情况下，如果在混入过程中发生了命名冲突，默认会将方法合并（数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先），因此，mixin无法改写本来的实现，而我们期望的是，父类提供一个比较抽象的实现，子类继承父类，若子类需要改表这个行为，子类可以重写父类的方法（多态的一种实现）。

因此我们决定使用vue-class-component这个库，以类的形式来编写这个抽象弹窗。

importVuefrom"vue";
importComponentfrom"vue-class-component";
@Component({
name:"AbstractDialog",
})
exportdefaultclassAbstractDialogextendsVue{}

3.1事件处理

查看Element-UI的官方网站，我们发现ElDialog对外抛出4个事件，因此，我们需要预先接管这4个事件。
因此需要在我们的抽象弹窗里预设这个4个事件的handler（因为对于组件的行为的划分，而对于弹窗的处理本来就应该从属于弹窗本身，因此我并没有通过$listeners去穿透外部调用时的监听方法）

importVuefrom"vue";
importComponentfrom"vue-class-component";
@Component({
name:"AbstractDialog",
})
exportdefaultclassAbstractDialogextendsVue{
open(){
console.log("弹窗打开，我啥也不做");
}

close(){
console.log("弹窗关闭，我啥也不做");
}

opened(){
console.log("弹窗打开，我啥也不做");
}

closed(){
console.log("弹窗关闭，我啥也不做");
}
}

3.2属性处理

dialog有很多属性，默认我们只需要关注的是before-close和title两者，因为这两个属性从职责上划分是从属于弹窗本身的行为，所以我们会在抽象弹窗里面处理开关和title的任务

importVuefrom"vue";
importComponentfrom"vue-class-component";
@Component({
name:"AbstractDialog",
})
exportdefaultclassAbstractDialogextendsVue{
visible=false;

t="";

loading=false;

//定义这个属性的目的是为了实现既可以外界通过传入属性改变dialog的属性，也支持组件内部预设dialog的属性
attrs={};

gettitle(){
returnthis.t;
}

setTitle(title){
this.t=title;
}
}

3.3slots的处理

查看Element-UI的官方网站，我们发现，ElDialog有三个插槽，因此，我们需要接管这三个插槽

1、对header的处理

importVuefrom"vue";
importComponentfrom"vue-class-component";
@Component({
name:"AbstractDialog",
})
classAbstractDialogextendsVue{
/*
构建弹窗的Header
*/
_createHeader(h){
//判断在调用的时候，外界是否传入header的插槽，若有的话，则以外界传入的插槽为准
varslotHeader=this.$scopedSlots["header"]||this.$slots["header"];
if(typeofslotHeader==="function"){
returnslotHeader();
}
//若用户没有传入插槽，则判断用户是否想改写Header
varrenderHeader=this.renderHeader;
if(typeofrenderHeader==="function"){
return{renderHeader(h)}

; } //如果都没有的话,返回undefined，则dialog会使用我们预设好的title } }

2、对body的处理

importVuefrom"vue";
importComponentfrom"vue-class-component";
@Component({
name:"AbstractDialog",
})
classAbstractDialogextendsVue{
/**
*构建弹窗的Body部分
*/
_createBody(h){
//判断在调用的时候，外界是否传入default的插槽，若有的话，则以外界传入的插槽为准
varslotBody=this.$scopedSlots["default"]||this.$slots["default"];
if(typeofslotBody==="function"){
returnslotBody();
}
//若用户没有传入插槽，则判断用户想插入到body部分的内容
varrenderBody=this.renderBody;
if(typeofrenderBody==="function"){
returnrenderBody(h);
}
}
}

3、对footer的处理

由于dialog的footer经常都有一些相似的业务，因此，我们需要把这些重复率高的代码封装在此，若在某种时候，用户需要改写footer的时候，再重写，否则使用默认行为

importVuefrom"vue";
importComponentfrom"vue-class-component";
@Component({
name:"BaseDialog",
})
exportdefaultclassBaseDialogextendsVue{
showLoading(){
this.loading=true;
}

closeLoading(){
this.loading=false;
}

onSubmit(){
this.closeDialog();
}

onClose(){
this.closeDialog();
}

/**
*构建弹窗的Footer
*/
_createFooter(h){
varfooter=this.$scopedSlots.footer||this.$slots.footer;
if(typeoffooter=="function"){
returnfooter();
}
varrenderFooter=this.renderFooter;
if(typeofrenderFooter==="function"){
return{renderFooter(h)}

; } returnthis.defaultFooter(h); } defaultFooter(h){ return(

{ this.onSubmit(); }} > 保存

{ this.onClose(); }} > 取消

最后，我们再通过JSX将我们编写的这些代码组织起来，就得到了我们最终想要的抽象弹窗
代码如下：

详解如何在vue+element-ui的项目中封装dialog组件

1、问题起源

2、问题分析

3、设计

3.1事件处理

3.2属性处理

3.3slots的处理

4.应用

4.1组件调用

4.2使用CompositionAPI

总结

随机推荐

详解如何在vue+element-ui的项目中封装dialog组件

1、问题起源

2、问题分析

3、设计

3.1事件处理

3.2属性处理

3.3slots的处理

4.应用

4.1组件调用

4.2使用CompositionAPI

总结

热门推荐

随机推荐