fix

src/component/HomePage/index/model/collection/more.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="more">
+		<i class="fi fi-br-menu-dots-vertical" @click.stop="openList"></i>
+		<div class="more_box" v-show="show">
+			<div class="item" v-if="moreList.includes('edit')" @click.stop="setMore('edit')">
+				<i class="fi fi-rr-edit"></i>
+				<div class="text">{{ $t('more.edit') }}</div>
+			</div>
+			<div class="item" v-if="moreList.includes('enlargement')" @click.stop="setMore('enlargement')">
+				<i class="fi fi-bs-expand-arrows-alt"></i>
+				<div class="text">{{ $t('more.enlargement') }}</div>
+			</div>
+			<div class="item" v-if="moreList.includes('down')" @click.stop="setMore('down')">
+				<i class="fi fi-br-download"></i>
+				<div class="text">{{ $t('more.down') }}</div>
+			</div>
+			<div class="item" v-if="moreList.includes('delete')" @click.stop="setMore('delete')">
+				<span class="icon iconfont icon-shanchu operate_icon"></span>
+				<div class="text">{{ $t('more.delete') }}</div>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import { downloadIamge } from "@/tool/util";
+
+export default defineComponent({
+    components:{
+    },
+	props:{
+		moreList:{type:Array,default:()=>[]},
+		item:{type:Object,default:()=>{}},
+		index:{type:Number,default:0},
+	},
+	emits:['deleteFile','scaleImage'],
+    setup(props,{emit}) {
+        const store = useStore();
+		const data = reactive({
+			show:false
+		})
+		
+		const dataDom = reactive({
+		})
+		const openList = ()=>{
+			data.show = true
+			document.addEventListener('click',setShow)
+		}
+		const setShow = ()=>{
+			data.show = false
+			document.removeEventListener('click',setShow)
+		}
+		const setMore = (str:any)=>{
+			if(str == 'delete'){
+				emit("deleteFile",props.item);
+			}else if(str == 'edit'){
+				emit("scaleImage",props.index);
+			}else if(str == 'down'){
+				console.log(props.item);
+				downloadIamge(props.item.url)
+			}else if(str == 'enlargement'){
+				emit("scaleImage",props.index);
+			}
+			setShow()
+		}
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			openList,
+			setMore,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .more{
+		position: relative;
+		width: 100%;
+		height: 100%;
+		> .fi{
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: rgba(0,0,0,.7);
+			color: #fff;
+			border-radius: .6rem;
+		}
+		> .more_box{
+			position: absolute;
+			background: rgba(0,0,0,.7);
+			right: 0;
+			margin-top: .5rem;
+			color: #fff;
+			border-radius: .6rem;
+			padding: 1rem 0;
+			font-size: 1.4rem;
+			// width: 12rem;
+			text-align: left;
+			> .item{
+				display: flex;
+				align-items: center;
+				padding: 1rem 1.3rem;
+				> i,> span{
+					margin-right: 1rem;
+				}
+				> .text{
+					white-space: nowrap;
+				}
+				&:hover{
+					background: rgba(0,0,0,.3);
+				}
+			}
+		}
+	}
+</style>