How to control when the pop-up layer close button is clicked, the pop-up layer page will be closed. It is forbidden to click the shadow part of the pop-up layer to close the pop-up layer page. How to achieve the effect!
Modal attribute footer-hide is set to true, hide the bottom of the default modal, use slot to insert a custom bottom button, let's take a look at this implementation!
Don't talk nonsense, just go to the code:
<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 part of the code:
export default { data () { return { msgloading: false, msgData: [] //Receipt information msgColumns: [ { title:'Return result', key:'message', width: 580 }, { title:'Receipt time' , key:'date', align:'center', width: 200 }, { title:'Receipt code',
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
});
},
},
}
The resulting effect is as follows:
