Vue2 element-ui2.12 MessageBox自动关闭API

需求：点击页面一个按钮，弹出一个弹窗A，点击弹窗A的按钮，弹出弹窗B。

用的是messageBox，出现的问题，一次只能弹出一个弹窗，所以点击弹窗A按钮必须关闭弹窗A，再打开弹窗B。

代码：

export default {
  ...
  data(){...}
  methods: {
      // 点击页面按钮弹窗A出现
      handleBtnClick() {
        this.$alert(`
          

            

              
参数名称：TEStimony
              
                新增
              
            
            

              

                
码值
码值描述
初始码值
是否显示
操作
              
              

                
码值
码值描述
初始码值
是否显示
                
编辑
              
              

                
码值
码值描述
初始码值
是否显示
                
编辑
              
            
            

              

                
上一页
                
1
99999
                
共2页
                
下一页
                
到第
页
                
确定
              
            
          
        `, '码值设置', {
          dangerouslyUseHTMLString: true,
          customClass: 'four-setting-window',
          showCancelButton: true,
          showConfirmButton: false,
          center: true,
          callback:function(){}
        });
      },
      openInnerWindow(innerTit){
        let that = this;
        this.$alert(`
          

            

              

                类型名称：12312313213
              
              

                类型名称：
              
              

                类型名称：
              
            
          
        `, innerTit, {
          dangerouslyUseHTMLString: true,
          customClass: 'four-setting-window',
          showCancelButton: true,
          showConfirmButton: true,
          center: true,
          callback:function(){
            that.handleTableEdit();
          }
        });
      },
      openInnerBox(innerTit){
        //console.log(this.$msgbox);
        this.$msgbox.close();
        this.openInnerWindow(innerTit);
      }
    },
    created(){
      window.openInnerBox = this.openInnerBox.bind(this);
    }
}

用MessageBox展示HTML段，里面的HMTL没办法使用element-ui,必须使用最原始的写法。

后来才发现还有弹框形式，就是element-ui Dialog 对话框,非常符合这个需求。