有一个vue的页面,查询展示一个列表,列表有多个操作,这些操作会弹出el-dialog,有的dialog里面还有tab页,tab页面中还有弹出el-dialog,所有的dialog,tab全写在一个vue文件,非常庞大,现在还要加业务操作,请问接手后如何优化处理
有一个vue的页面,查询展示一个列表,列表有多个操作,这些操作会弹出el-dialog,有的dialog里面还有tab页,tab页面中还有弹出el-dialog,所有的dialog,tab全写在一个vue文件,非常庞大,现在还要加业务操作,请问接手后如何优化处理
对每一个完整功能划分成模块吧。 比如第一层el-dialog里面的内容,写一个单独的自定义组件出来。这样这块代码就从主Vue文件中独立出去。
当然,按照你描述的这种交互,很不合理。 这种无限弹窗的功能,用户用着也很难受,代码也不好维护。 一般弹窗都只有一层。而且弹窗里面的内容不会很复杂。建议向产品提提,第一个弹窗改成新开页面
思路是封装组件。
首先对于这个列表来说可以把它的每一项拆分成 Item
组件。
比如说 List.vue
可以长这样:
<template>
<div v-for="item in list">
<Item :key="item.id" {...item} />
</div>
</template>
接着对于同质化的组件,比如说 Dialog
,那么我们可以把它也封装一层。
比如说对于 Dialog.vue
:
<template>
<div class="dialog-comp">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'DialogComp',
props: {
title: {
type: String,
default: ''
}
}
}
</script>
至于说 Dialog
有 tab 页的情况,那么直接用 slot
来做定制化即可。
类似于:
<Dialog title="一个标题">
<Tab/>
</Dialog>
总而言之,对于这种重构,一般的思路是先拆分组件(先把容易拆的拆出去)--> 测试功能 --> 拆分组件 --> 测试功能 --> ... --> 重构完成。
10 回答11.1k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
2 回答4.7k 阅读✓ 已解决
我一般是会把一个
Dialog
作为一个组件来写。Dialog
嵌套Dialog
也是一个一个的弹窗组件。内部
Tab
组件的话,TabNavbar
会在Dialog
内维护。TabPaneContent
我会看复杂程度,如果负责度比较高我会把TabPaneContent
单独提出来作为一个组件来维护。类似于这样: