【sgFileLink】自定义组件:基于el-link、el-icon标签构建文件超链接组件,支持垃圾桶删除、点击预览视频/音频/图片/PDF格式文件

sgFileLink源代码

html 复制代码
<template>
  <div :class="$options.name">
    <el-link @click.stop="clickFile(data)">
      <img :src="getSrc(data)" /><span>{{ getBannerFileName(data) }}</span></el-link
    >
    <el-link
      class="remove-btn"
      v-if="clearable_"
      icon="el-icon-delete"
      :underline="false"
      @click.stop="remove(data)"
    />

    <el-image ref="image" style="display: none" src="" :preview-src-list="[previewSrc]" />
    <sgVideoDialog :data="data_sgVideoDialog" v-model="show_sgVideoDialog" />
    <sgAudioDialog :data="data_sgAudioDialog" v-model="show_sgAudioDialog" />
  </div>
</template>
<script>
import sgVideoDialog from "@/vue/components/admin/sgVideoDialog";
import sgAudioDialog from "@/vue/components/admin/sgAudioDialog";
import $com from "@/js/com";
export default {
  name: "sgFileLink",
  components: { sgVideoDialog, sgAudioDialog },
  data() {
    return {
      data_sgVideoDialog: {},
      show_sgVideoDialog: false,
      data_sgAudioDialog: {},
      show_sgAudioDialog: false,

      previewSrc: null,
      clearable_: null,
    };
  },
  props: ["data", "clearable"],
  computed: {},
  watch: {
    clearable: {
      handler(newValue, oldValue) {
        this.clearable_ = newValue === "" || newValue;
      },
      deep: true, //深度监听
      immediate: true, //立即执行
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    remove(data) {
      this.$emit(`remove`, data);
    },
    clickFile(d) {
      $com.clickFile(d, this);
    },
    getSrc(d) {
      typeof d === `string` && (d = JSON.parse(d));
      let fileName = d.name;
      let suffix = fileName.split(".").slice(-1)[0];
      return $com.getFlieThumbSrc({ suffix });
    },
    getBannerFileName(d) {
      return $com.getBannerFileName(d);
    },
  },
};
</script>
<style lang="scss" scoped>
.sgFileLink {
  >>> .el-link {
    transition: 0.2s;
    line-height: normal;

    img {
      width: 16px;
      height: 16px;
      object-position: center;
      object-fit: contain;
      transform: translateY(2px);
    }
    span {
      word-wrap: break-word;
      word-break: break-all;
      white-space: break-spaces;
    }
  }
  .remove-btn {
    transition: 0.382s;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
  }
  &:hover {
    .remove-btn {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0%);
    }
  }
}
</style>

应用

html 复制代码
<sgFileLink :data="{ ...scope.row, clearable: true }" @remove="remove(scope.row, scope.$index)" />
相关推荐
gnip5 小时前
Jst执行上下文栈和变量对象
前端·javascript
拉不动的猪5 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do5 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
DT——6 小时前
前端登录鉴权详解
前端·javascript
界面开发小八哥7 小时前
数据可视化图表库LightningChart JS v8.0上线:全新图例系统 + 数据集重构
javascript·信息可视化·数据可视化·lightningchart
烛阴7 小时前
【TS 设计模式完全指南】从“入门”到“劝退”,彻底搞懂单例模式
javascript·设计模式·typescript
正义的大古7 小时前
OpenLayers常用控件 -- 章节六:全屏控件教程
前端·javascript·html·openlayers
音视频牛哥8 小时前
打造一款高稳定、低延迟、跨平台RTSP播放器的技术实践
音视频·rtsp播放器·rtsp player·rtsp播放器录像·rtsp h.265·rtsp hevc·rtsp播放器h.265
水印云8 小时前
2025精选5款AI视频转文字工具,高效转录秒变文字!
人工智能·音视频
菊风 Juphoon9 小时前
13问详解VoLTE视频客服:菊风带你从基础到应用,厘清所有疑惑
音视频