Vue2 element-ui2.12 MessageBox自动

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

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

代码：

export default {
  ...
  data(){...}
  methods: {
      // 点击页面按钮弹窗A出现
      handleBtnClick() {
        this.$alert(`
          <div class="four-setting-win">
            <div class="clearfix">
              <p class="tit-content">参数名称：TEStimony</p>
              <button type="button" class="el-button el-button--default el-button--small el-button--primary ">
                <span>新增</span>
              </button>
            </div>
            <ul>
              <li class="list head clearfix">
                <p>码值</p><p>码值描述</p><p>初始码值</p><p>是否显示</p><p>操作</p>
              </li>
              <li class="list clearfix">
                <p>码值</p><p>码值描述</p><p>初始码值</p><p>是否显示</p>
                <p><a onclick="openInnerBox('编辑选项')" class="edit-btn">编辑</a></p>
              </li>
              <li class="list clearfix">
                <p>码值</p><p>码值描述</p><p>初始码值</p><p>是否显示</p>
                <p><a onclick="openInnerBox('编辑选项')" class="edit-btn">编辑</a></p>
              </li>
            </ul>
            <div class="pagenation">
              <ol class="clearfix">
                <li class="btn-li">上一页</li>
                <li class="page-num"><p class="acitved">1</p><p>99999</p></li>
                <li>共2页</li>
                <li class="btn-li">下一页</li>
                <li class="page-input-box"><p>到第</p><input type="Number" class="win-input"/><p>页</p></li>
                <li class="btn-li">确定</li>
              </ol>
            </div>
          </div>
        `, '码值设置', {
          dangerouslyUseHTMLString: true,
          customClass: 'four-setting-window',
          showCancelButton: true,
          showConfirmButton: false,
          center: true,
          callback:function(){}
        });
      },
      openInnerWindow(innerTit){
        let that = this;
        this.$alert(`
          <div class="four-setting-inner-content">
            <div class="edit-box">
              <div class="one-div clearfix">
                <span class="tit">类型名称：</span><span>12312313213</span>
              </div>
              <div class="one-div clearfix">
                <span class="tit">类型名称：</span><input type="text" class="edit-input"/>
              </div>
              <div class="one-div clearfix">
                <span class="tit">类型名称：</span><input type="text" class="edit-input"/>
              </div>
            </div>
          </div>
        `, 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 对话框,非常符合这个需求。