vue多层dialog,tab页面如何优化重构?

有一个vue的页面,查询展示一个列表,列表有多个操作,这些操作会弹出el-dialog,有的dialog里面还有tab页,tab页面中还有弹出el-dialog,所有的dialog,tab全写在一个vue文件,非常庞大,现在还要加业务操作,请问接手后如何优化处理

阅读 2.4k
3 个回答

我一般是会把一个 Dialog 作为一个组件来写。Dialog 嵌套 Dialog 也是一个一个的弹窗组件。

内部 Tab 组件的话,TabNavbar 会在 Dialog 内维护。TabPaneContent 我会看复杂程度,如果负责度比较高我会把 TabPaneContent 单独提出来作为一个组件来维护。

类似于这样:

<dialog title="Dialog">
  <tabs>
    <tab-pane label="TabA" name="a">
      <TabPaneContentA />
    </tab-pane>
    <tab-pane label="TabB" name="b">
      <TabPaneContentB />
    </tab-pane>
    <tab-pane label="TabC" name="c">
      <TabPaneContentC />
    </tab-pane>
  </tabs>
  <!-- 如果有嵌套Dialog -->
  <OtherDialogComponent />
</dialog>

对每一个完整功能划分成模块吧。 比如第一层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>

总而言之,对于这种重构,一般的思路是先拆分组件(先把容易拆的拆出去)--> 测试功能 --> 拆分组件 --> 测试功能 --> ... --> 重构完成。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题