128 lines
3.1 KiB
Vue
128 lines
3.1 KiB
Vue
<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> |