vue3.0+ts+antdesginVue 图件预览，下载，分享（组合）

点击预览

点击分享

<template>
  <div>
    <div class="previewBox" v-for="(item,index) of imageList" :key="index">
      <a-image style="margin-bottom:15px" width="100%" :src="item.filePath" alt="" :preview="{
        visible: item.visible,
        onVisibleChange: (visible, prevVisible) => {
          if(!visible){
            item.visible = false
          } 
        },
      }"/>
      <div class="mask">
        <i class="iconfont-cpl icon-cplyulan" title="预览" @click.stop="item.visible = true"/>
        <i class="iconfont-cpl icon-cplxiazai" title="下载" @click.stop="downLoadData(item.id)"/>
        <i class="iconfont-cpl icon-cpl-_lianjie" title="分享" @click.stop="share(item.id)"/>  
      </div>
    </div>

    <a-modal v-model:visible="visible" title="分享" @ok="handleOk">
      <p class="signWord">获得链接的所有人，可查看图件</p>
      请选择时效：
      <a-radio-group v-model:value="value">
        <a-radio :value="1">1天</a-radio>
        <a-radio :value="7">7天</a-radio>
        <a-radio :value="0">永久</a-radio>
      </a-radio-group>
    </a-modal>
  </div>
</template>

ts:

<script lang="ts">
import { defineComponent, watch, ref, h, nextTick } from 'vue';
import {fileManagementApi} from '/@/api/fileManagementApi';
import { message,Modal } from 'ant-design-vue';
export default defineComponent({
  props:{
    imageList:{
      type:Array,
      default:()=>{
        return []
      }
    }
  },
  setup(props){
    watch(()=>props.imageList,(val)=>{
       for(let item of val){
         item.visible = false
       }
    })

    const visible = ref<boolean>(false);
    const value = ref(1);
    const shareId = ref('')

    // 下载
    async function downLoadData(id){
       let res = await fileManagementApi.downloadOssFile(id);
       if(res.success){
         if(res.obj){
           window.open(res.obj)
         }
       } else {
         message.error(res.msg)
       }
    }

    // 分享
    async function share(id){
       visible.value = true;
       shareId.value = id;
    }

    async function handleOk(){
      let res = await fileManagementApi.shareOssFile(shareId.value,value.value);
      if(res.success){
        Modal.success({
          title: '生成链接',
          okText:'复制',
          content: h('div', {}, [
            h('p',{id:'share'}, res.obj),
            h('input',{id:'input',style:"position: absolute;top: 0;left: 0;opacity: 0;z-index: -10"}),
          ]),
          onOk() {
            // 实现点击复制按钮，copy文本
            let text = (document as any).getElementById('share').innerText;
            let input = (document as any).getElementById('input');
            input.value = text; 
            input.select();
            document.execCommand("copy");
            nextTick(()=>{
              visible.value = false;
            })
          },
        });
      } else {
        message.error(res.msg)
      }
    }
    return{
      downLoadData,
      share,
      visible,
      value,
      handleOk
    }
  }
})
</script>

css:

<style lang="less" scoped>
.previewBox{
  position: relative;
  .mask{
    width: 100%;
    height: calc(100% - 20px);
    background: rgba(0,0,0,0.5);
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    i{
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin-right: 8px;
    }
  }
}
.previewBox:hover .mask{
  display: flex;
    align-items: center;
    justify-content: center;
}
.signWord{
  font-size: 1rem;
  color: #666;
}
</style>