68 lines
1.3 KiB
Vue
68 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<a-modal v-bind="$attrs" v-model="visible" :title="title">
|
||
|
|
<slot></slot>
|
||
|
|
<template slot="footer">
|
||
|
|
<a-space class="operators" :size="20">
|
||
|
|
<a-button type="success" @click="onSave" :loading="confirmLoading">Save</a-button>
|
||
|
|
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||
|
|
</a-space>
|
||
|
|
</template>
|
||
|
|
</a-modal>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: Boolean
|
||
|
|
},
|
||
|
|
okHandler: {
|
||
|
|
type: Function
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
visible: this.value,
|
||
|
|
confirmLoading: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
visible(val) {
|
||
|
|
this.$emit('input', val)
|
||
|
|
},
|
||
|
|
value(val) {
|
||
|
|
this.visible = val
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async onSave() {
|
||
|
|
if (this.okHandler instanceof Function) {
|
||
|
|
try {
|
||
|
|
this.confirmLoading = true
|
||
|
|
await this.okHandler()
|
||
|
|
this.visible = false
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error)
|
||
|
|
} finally {
|
||
|
|
this.confirmLoading = false
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.visible = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onCancel() {
|
||
|
|
this.visible = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.operators {
|
||
|
|
.ant-btn {
|
||
|
|
width: 92px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|