yangchunlong/orico-officialWebsite-ts-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 🚀 图片增加删除功能

Browse Source
This commit is contained in:
yangchunlong
2025-09-17 14:37:55 +08:00
parent 1090351df7
commit 9110df9711
2 changed files with 31 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components.d.ts vendored
View File

@@ -12,11 +12,8 @@ declare module "vue" {
ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
ElButton: typeof import("element-plus/es")["ElButton"];
ElCarousel: typeof import("element-plus/es")["ElCarousel"];
ElCarouselItem: typeof import("element-plus/es")["ElCarouselItem"];
ElCheckbox: typeof import("element-plus/es")["ElCheckbox"];
ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"];
ElColorPicker: typeof import("element-plus/es")["ElColorPicker"];
ElContainer: typeof import("element-plus/es")["ElContainer"];
ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
ElDialog: typeof import("element-plus/es")["ElDialog"];
@@ -38,7 +35,6 @@ declare module "vue" {
ElOption: typeof import("element-plus/es")["ElOption"];
ElPagination: typeof import("element-plus/es")["ElPagination"];
ElRadio: typeof import("element-plus/es")["ElRadio"];
ElRadioButton: typeof import("element-plus/es")["ElRadioButton"];
ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
ElSelect: typeof import("element-plus/es")["ElSelect"];
@@ -50,7 +46,6 @@ declare module "vue" {
ElTabs: typeof import("element-plus/es")["ElTabs"];
ElTag: typeof import("element-plus/es")["ElTag"];
ElTooltip: typeof import("element-plus/es")["ElTooltip"];
ElTree: typeof import("element-plus/es")["ElTree"];
ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
ElUpload: typeof import("element-plus/es")["ElUpload"];
IEpArrowDown: typeof import("~icons/ep/arrow-down")["default"];

66
src/components/Editor/index.vue
View File

@@ -120,13 +120,9 @@
<div class="image-preview-container">
<div class="image-order-badge">{{ img.sortOrder + 1 }}</div>
<img :src="img.tempUrl" :alt="`图片 ${img.sortOrder + 1}`" class="preview-img" />
<el-button
:icon="Delete"
size="small"
type="default"
class="circle-delete-btn"
@click.stop="removeImage(img.customUid)"
></el-button>
<div style="display: flex; justify-content: flex-end; padding: 6px">
<el-button size="small" type="default" @click.stop="removeImage(img.customUid)">删除</el-button>
</div>
</div>
<div class="image-info">
<span class="image-name">{{ img.name }}</span>
@@ -150,7 +146,7 @@
</template>
<script setup name="Editor">
import { Delete } from "@element-plus/icons-vue";
// import { Delete } from "@element-plus/icons-vue";
import { QuillEditor, Quill } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
@@ -781,33 +777,33 @@ defineExpose({
}
// 圆形删除按钮
.circle-delete-btn {
position: absolute;
top: -8px;
right: -8px;
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
margin: 0;
color: white;
background-color: #ff4d4f;
border: none;
border-radius: 50%;
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
transition: all 0.2s;
&:hover {
color: white;
background-color: #d93025;
transform: scale(1.1);
}
.el-icon {
font-size: 14px;
}
}
// .circle-delete-btn {
// position: absolute;
// top: -8px;
// right: -8px;
// z-index: 500;
// display: flex;
// align-items: center;
// justify-content: center;
// width: 28px;
// height: 28px;
// padding: 0;
// margin: 0;
// color: white;
// background-color: #ff4d4f;
// border: none;
// border-radius: 50%;
// box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
// transition: all 0.2s;
// &:hover {
// color: white;
// background-color: #d93025;
// transform: scale(1.1);
// }
// .el-icon {
// font-size: 14px;
// }
// }
.image-info {
display: flex;
align-items: center;