2021-09-30

el-dialog调用@close关闭弹框失效问题

<el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      class="noMarginBottom"
      :title="dialogParam.title"
      :visible.sync="dialogParam.isShowDialog"
      top="10px"
      v-if="dialogParam.isShowDialog"
      :width="dialogParam.width"
      append-to-body
      @close="close"
    >
      <div
        :style="{
          position: 'relative',
        }"
      >
        <scan-code v-if="dialogParam.name === 'ScanCode'"> </scan-code>
        <select-logistics-channels
          :CardNo="CardNo"
          @closeDialog="closeDialog"
          :allCountryList="allCountryList"
          v-if="dialogParam.name === 'SelectLogisticsChannels'"
        ></select-logistics-channels>
      </div>
    </el-dialog>

在这里是想实现关闭弹框调主页面的查询接口的。但实际上@close事件并没有被触发。
后来发现是因为v-if引起的，v-if似乎实在@close事件之前就执行了，相当于页面已经被销毁了
这个时候想要实现该效果，我是通过监听的方式实现的。

    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      class="noMarginBottom"
      :title="dialogParam.title"
      :visible.sync="dialogParam.isShowDialog"
      top="10px"
      v-if="dialogParam.isShowDialog"
      :width="dialogParam.width"
      append-to-body
    >
      <div
        :style="{
          position: 'relative',
        }"
      >
        <scan-code v-if="dialogParam.name === 'ScanCode'"> </scan-code>
        <select-logistics-channels
          :CardNo="CardNo"
          @closeDialog="closeDialog"
          :allCountryList="allCountryList"
          v-if="dialogParam.name === 'SelectLogisticsChannels'"
        ></select-logistics-channels>
      </div>
    </el-dialog>

  watch: {
    'dialogParam.isShowDialog': {
      handler() {
        if(this.dialogParam.isShowDialog==false){
          this.search()
        }
      },
      deep: true,
    },
  },

也能实现同样的效果