f062f7c9e6
新增 `ImageUpload` 组件用于文件选择与预览，并集成到 `UploadDialog` 中实现图片上传逻辑。 更新了 `Dialog` 组件以支持可选属性和 model 绑定，增强其灵活性和可用性。 引入 `lucide-vue-next` 图标库支持图标渲染。 重构图片配置页面，移除旧上传逻辑，使用新的弹窗方式进行图片上传操作。
74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<script setup lang='ts'>
|
|
import { onMounted, ref, toRefs } from 'vue'
|
|
import i18n from '@/locales/i18n'
|
|
|
|
interface Props {
|
|
title: string
|
|
desc?: string
|
|
cancelText?: string
|
|
submitText?: string
|
|
submitFunc?: () => void
|
|
cancelFunc?: () => void
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
cancelText: i18n.global.t('button.cancel'),
|
|
submitText: i18n.global.t('button.confirm'),
|
|
cancelFunc: () => {},
|
|
})
|
|
const visible = defineModel('visible', {
|
|
type: Boolean,
|
|
default: false,
|
|
})
|
|
|
|
const dialogRef = ref <HTMLDialogElement | null> (null)
|
|
function defaultCancelFunc() {
|
|
dialogRef.value?.close()
|
|
}
|
|
|
|
function showDialog() {
|
|
dialogRef.value?.showModal()
|
|
}
|
|
defineExpose({
|
|
showDialog,
|
|
closed,
|
|
})
|
|
|
|
onMounted(() => {
|
|
dialogRef.value?.addEventListener('close', () => {
|
|
visible.value = false
|
|
})
|
|
})
|
|
const { title, desc, cancelText, submitText, submitFunc, cancelFunc = defaultCancelFunc } = toRefs(props)
|
|
</script>
|
|
|
|
<template>
|
|
<dialog id="my_modal" ref="dialogRef" class="border-none modal">
|
|
<div class="modal-box">
|
|
<h3 v-if="title" class="text-lg font-bold">
|
|
{{ title }}
|
|
</h3>
|
|
<p v-if="desc" class="py-4">
|
|
{{ desc }}
|
|
</p>
|
|
<div>
|
|
<slot name="content" />
|
|
</div>
|
|
<div class="modal-action">
|
|
<form method="dialog" class="flex gap-3">
|
|
<!-- if there is a button in form, it will close the modal -->
|
|
<button class="btn" @click="cancelFunc">
|
|
{{ cancelText }}
|
|
</button>
|
|
<button class="btn" @click="submitFunc">
|
|
{{ submitText }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|