You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
1.3 KiB
76 lines
1.3 KiB
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '50%',
|
|
},
|
|
okHandle: {
|
|
type: Boolean,
|
|
default: () => {},
|
|
},
|
|
})
|
|
const emits = defineEmits(['update:visible', 'ok', 'cancel'])
|
|
|
|
const cancel = () => {
|
|
show.value = false
|
|
emits('cancel')
|
|
}
|
|
|
|
const show = ref(false)
|
|
|
|
watch(
|
|
() => props.visible,
|
|
(newVal) => {
|
|
show.value = newVal
|
|
},
|
|
{
|
|
// 对于对象需要深度监听
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<el-dialog
|
|
v-model="show"
|
|
center
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:show-close="false"
|
|
destroy-on-close
|
|
append-to-body
|
|
:title="title"
|
|
:width="width"
|
|
:before-close="cancel"
|
|
>
|
|
<slot />
|
|
<template #footer>
|
|
<div v-if="$slots.footer" class="dialog-footer">
|
|
<slot name="footer" />
|
|
</div>
|
|
<div v-else class="dialog-footer">
|
|
<ft-button :click-handle="cancel">
|
|
取消
|
|
</ft-button>
|
|
<ft-button type="primary" :click-handle="okHandle">
|
|
确认
|
|
</ft-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|