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,
},
},
也能实现同样的效果