vue页面中处理大量对话框

背景

最近项目中一个页面要用到很多个对话框(7-8个左右), 而且每个对话框的结构是不一样的, 有的底部需要确定-取消按钮,有的只要确定按钮, 有的啥都不要, 样式都不同, 对话框也有自己的内部逻辑，要控制对话框的显示隐藏visible.sync，一个对话框就要声明一个控制显示的变量，管理这些变量会增多不少脏代码。某些场景对话框要顺序弹出关闭，比如dialog1填完一些表单数据后，拿到接口数据后，关闭当前对话框，弹出dialog2，并获取dialog1的接口数据。

*按照一开始在data声明变量控制对话框的显示隐藏, A组件这样写:

<template>
    <div>
        <el-dialog :visible.sync="dialogVisible.dialog1" >...html结构</el-dialog>
        <el-dialog :visible.sync="dialogVisible.dialog2" >...html结构</el-dialog>
        <el-dialog :visible.sync="dialogVisible.dialog3" >...html结构</el-dialog>
        <el-dialog :visible.sync="dialogVisible.dialog4" >...html结构</el-dialog>
        <el-dialog :visible.sync="dialogVisible.dialog5" >...html结构</el-dialog>   
        ...other code
    </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: {
        dialog1: false,
        dialog2: false,
        dialog3: false,
        dialog4: false,
        dialog5: false,
        dialog6: false,
        dialog7: false,
        dialog8: false,
        dialog9: false,
      }
    }，
    method: {
        showDialog1() {
            this.dialog1 = true;
        }，
        showDialog2() {
            this.dialog2 = true;
        }，
    }
  }
}
</script>
// 然后整个组件加起来1000多行, 有时候一个el-dialog单html结构就100多行, 维护是十分痛苦的

要解决的问题

不需要关注对话框显示隐藏
通过指令的方式唤起一个对话框
对话框按顺序显示和数据传递

解决过程

我的做法是基于el-dialog组件把对话框封装成全局弹窗组件, 提供了一个方法invoke呼出对话框并返回promise, 在对话框的内部可以resolve或reject该promise, 这样就可以链式then呼出下一个对话框,并且通过promise传值。

下面是根据我的业务场景实现的全局对话框:

目录结构
.dialog
|____dialog.js
|____dialog.vue



// dialog.vue
<template>
  <el-dialog :visible.sync="visible" :title="title" @close="close" @open="open":width="width">
    <functionalComponent :params="params" :render="render" ></functionalComponent>
  </el-dialog>
</template>
<script>
const functionalComponent = {
  functional: true,
  props: {
    render: Function,
    params: Object
  },
  render(h, ctx) {
    const params = { ...ctx.props.params };
    return ctx.props.render(h, params);
  }
}
const noop = () => {};
export default {
  data() {
    return {
      title: '',
      width: '50%',
      render: noop,
      cancel: noop,
      open: noop, // '目前业务只用到了el-dialog中的close&open事件,可以扩展
      close: noop,
      visible: false,
      resolver: {},
      params: {},
    };
  },
  methods: {
    invoke(config) {
      this.initParams(config);
      return new Promise((resolve, reject) => {
        this.resolver = { resolve, reject };
      })
    },
    initParams(config) {
      this.visible = true;
      this.title = config.title;
      this.width = config.width;
      this.render = config.render;
      this.open = config.open;
      this.close = () => {
          this.close();
          this.hide();
      };
      this.cancel = () => {
          this.canel();
          this.hide();
      }
      this.params = config.params;
    }
    hide() {
      this.visible = false;
    },
    resolve(v) {
      this.resolver.resolve(v);
    },
    reject(err) {
      this.resolver.reject(new Error(err));
    },
  },
  components: {
      functionalComponent,
  }
}
</script>

// dialog.js
import Dialog from './dialog.vue';
import router from '@/router';
import store from '@/store'
import Vue from 'vue';
const noop = () => {};
let dialogInstance = null;
// 挂载Dialog并获得实例
const newInstance = properties => {
    const props = properties || {};
    const Instance = new Vue({
        data: props,
        store, // 因为这个是一个单独的Vue实例，跟root实例是隔离的，所以这里需要把store和router上去
        router,
        render: h => h(Dialog, {
            props
        })
    });
    const component = Instance.$mount();
    document.body.appendChild(component.$el);
    return Instance.$children[0];
};
// 全局只有一个实例, 每次invoke的时候只是在更换functionalComponent的内容,且返回新的promise(pending态)
const getDialogInstance = () => {
    dialogInstance = dialogInstance || newInstance();
    return dialogInstance;
}

export default {
    invoke({
        title = '',
        render = noop,
        close = noop,
        open = noop,
        params = {},
        width = '50%'
    } = {}) {
        return getDialogInstance().invoke({title, render, open, close, params, width})
    },
    hide() {
        getDialogInstance().hide();
    },
    resolve(v) {
        getDialogInstance().resolve(v);
    },
    reject(err) {
        getDialogInstance().reject(err);
    },
}

使用方式

全局引入:
import Dialog from '@/components/dialog';
Vue.prototype.$dialog = Dialog;

在views文件目录下：
.dialog
|____dialog1.vue
|____dialog2.vue
|____dialog3.vue
|____index.vue

// dialog1.vue
<template>
  <div>
    ...假设很多行代码
    <button @click="showNextDialog">显示下一个对话框并传递数据</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'jiaxin'
    }
  },
  methods: {
    showNextDialog() {
    // 使用定时器模拟http请求，2秒后显示下一个对话框
      setTimeout(() => {
        this.$dialog.resolve(this.name);
      }, 2000);
    }
  },
}
</script>

// dialog2.vue
<template>
  <div>
    ...假设很多行代码
    <button @click="showNextDialog">显示下一个对话框并传递数据</button>
  </div>
</template>
<script>
export default {
  props: {
    name: String
  },
  methods: {
    showNextDialog() {
    // 使用定时器模拟http请求，2秒后显示下一个对话框
      setTimeout(() => {
        this.$dialog.resolve(10);
      }, 2000);
    }
  },
}
</script>

// dialog3.vue
<template>
  <div>
    ...假设很多行代码
    <button @click="closeDialog">关闭对话框</button>
  </div>
</template>
<script>
  export default {
    props: {
      hobby: String,
      age: String,
    },
    methods: {
      closeDialog () {
        setTimeout(() => {
          console.log(this.body);
          this.$dialog.hide(); // 关闭对话框
        }, 1000);
      }
    },
  }
</script>

// index.vue
<template>
    <div>
        ...假设这里有几百行结构
        <button @click="showDialog1">显示对话框1</button>
    </div>
</template>
<script>
import Dialog1 from './dialog1';
import Dialog2 from './dialog2';
import Dialog3 from './dialog3';
  export default {
    data() {
      return {
        hobby: 'eat'
      }
    },
    methods: {
        async showDialog1() {
            const name = await this.$dialog.invoke({
                title: '对话框1',
                render: (h) => h(Dialog1),
            });
            const age = await this.$dialog.invoke({
                title: '对话框2',
                render: (h) => <Dialog2 name={name}></Dialog2>,
            });

            this.$dialog.invoke({
                title: '对话框3',
                params: {
                    hobby: this.hobby,
                },
                render: (h, { hobby }) => <Dialog3 hobby={hobby} age={age} />
            });
        },
    }
  }
</script>
// 顺序是显示对话框1，对话框2，对话框3,通过promise的then链式调用

使用自定义指令美化this.$dialog.resolve()

当我们在http请求完成成功后才会显示下一个对话框，并且把请求数据带给下一个对话框，如果返回一个promise， this.$dialog.resolve()在promise成功后才会执行, 否则直接把binding的值传递给下个对话框

Vue.directive('dialog', {
  inserted: (el, binding, vnode) => {
    el.onclick = () => {
      const bind = binding.value;
      const bindingVal = typeof bind === 'function' ? bind() : bind;
      const resolve = vnode.context.$dialog.resolve;
      if (bindingVal instanceof Promise) {
        bindingVal.then(resolve);
      } else {
        resolve(bindingVal);
      }
    }
  }
})

// dialog1.vue
<template>
  <div>
    ...假设很多行代码
    <button v-dialog="showNextDialog">显示下一个对话框并传递数据</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'jiaxin'
    }
  },
  methods: {
      showNextDialog() {
        return new Promise(rs => setTimeout(rs, 2000));
      }
  },
}
// 此时效果是一样, 当然可以对this.$dialog.hide()做同样的处理，这里就不说了
</script>

总结

上面封装的dialog全局方法并不适用于所有场景，主要是针对我这边的业务，不过方向是对的，主要是用promise来实现实现异步呼出对话框和数据之间的通信。解决了上面所说的问题。

demo地址