update

src/components/XImage/Index.vue

@@ -0,0 +1,73 @@
+<script setup>
+import {ref} from "vue";
+import {Modal} from "@arco-design/web-vue";
+
+const emits = defineEmits(['delete']);
+const {width, height, aspect} = defineProps({
+    width: {
+        type: String,
+        default: '80px'
+    },
+    height: {
+        type: String,
+        default: '80px'
+    },
+    aspect: {
+        type: Boolean,
+        default: false,
+    }
+});
+const previewVisible = ref(false);
+const deleteImage = () => {
+    Modal.info({
+        title: "删除确认",
+        content: "确认删除这张素材吗?",
+        hideCancel: false,
+        onOk: () => {
+            emits('delete');
+        }
+    });
+}
+</script>
+
+<template>
+    <div class="x-image-box" :style="{aspectRatio: aspect ? '1 / 1' : ''}">
+        <a-image
+            fit="contain"
+            v-model:preview-visible="previewVisible"
+            @preview-visible-change="(v)=>previewVisible=v"
+            v-bind="$attrs"
+            :width="width"
+            :height="height">
+        </a-image>
+
+        <div class="mask">
+            <icon-eye @click="previewVisible=true" class="icon" style="color: #fff"/>
+            <icon-delete @click="deleteImage" class="icon" style="color: #fff"/>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.x-image-box {
+    @apply cursor-pointer relative box-border rounded-[6px] overflow-hidden;
+    outline: 1px solid #E5E6EB;
+    width: v-bind(width);
+    height: v-bind(height);
+
+    &:hover .mask {
+        background-color: rgba(0, 0, 0, .4);
+
+        .icon {
+            display: block;
+        }
+    }
+
+    .mask {
+        @apply size-full absolute left-0 top-0 duration-500 flex justify-center items-center gap-[10px];
+        .icon {
+            display: none;
+        }
+    }
+}
+</style>