如何控制当点击弹出层 关闭按钮 ，弹出层页面才关闭。禁止 点击弹出层的阴影部分 关闭弹出层页面 效果如何实现啦！
Modal属性footer-hide设置为true，隐藏默认的modal底部，使用slot插入自定义的底部按钮，接下来我们来看看这个实现！
废话不多说，直接上代码：
<Modal
title="任务信息"
width="980"
v-model="modalMsgPlain"
@on-ok="modalSumit"
@on-cancel="modalCancel"
class-name="vertical-center-modal">
<Table height="600" border ref="selection" :columns="msgColumns" :data="msgData" :loading="msgloading">
<template slot-scope="{ row }" slot="name">
<strong>{
{ row.name }}</strong>
</template>
<template slot-scope="{ row, index }" slot="action">
</template>
</Table>
</Modal>
vue部分代码：
export default {
data () {
return {
msgloading: false,
msgData: [] //回执信息
msgColumns: [
{
title: '返回结果',
key: 'message',
width: 580
},
{
title: '回执时间',
key: 'date',
align: 'center',
width: 200
},
{
title: '回执代码',
key: 'code',
align: 'center',
width: 200
}
],
}
},
methods: {
getMsgDataData (orderId, showDel) {
if (this.msgloading) return
this.msgloading = true
message('/order/message', {'row_id': id, 'table_name': 'google', 'showDel': false }).then(function (response) {
this.msgData = response.data.data
this.msgloading = false
});
},
},
}
生成的效果如下：
