63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<el-dialog
|
||
|
|
:model-value="visible"
|
||
|
|
:title="title"
|
||
|
|
width="600px"
|
||
|
|
@update:model-value="handleClose"
|
||
|
|
>
|
||
|
|
<slot></slot>
|
||
|
|
<template #footer>
|
||
|
|
<span class="dialog-footer">
|
||
|
|
<el-button @click="handleCancel">取消</el-button>
|
||
|
|
<el-button type="primary" @click="handleConfirm" :loading="loading">
|
||
|
|
{{ confirmText }}
|
||
|
|
</el-button>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'FormDialog',
|
||
|
|
props: {
|
||
|
|
visible: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: '对话框'
|
||
|
|
},
|
||
|
|
confirmText: {
|
||
|
|
type: String,
|
||
|
|
default: '确定'
|
||
|
|
},
|
||
|
|
loading: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emits: ['update:visible', 'confirm', 'cancel'],
|
||
|
|
methods: {
|
||
|
|
handleClose() {
|
||
|
|
this.$emit('update:visible', false)
|
||
|
|
},
|
||
|
|
handleCancel() {
|
||
|
|
this.$emit('cancel')
|
||
|
|
this.handleClose()
|
||
|
|
},
|
||
|
|
handleConfirm() {
|
||
|
|
this.$emit('confirm')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.dialog-footer {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
</style>
|