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

sgFileLink源代码

<template><div :class="$options.name"><el-link @click.stop="clickFile(data)"><img :src="getSrc(data)" /><span>{{ getFileNameAndSize(data) }}</span></el-link><el-linkclass="remove-btn"type="danger"v-if="clearable_"icon="el-icon-delete":title="`移除${data.name}`":underline="false"@click.stop="remove(data)"/><el-imageref="image"style="display: none"src="":initial-index="initialIndex":preview-src-list="previewSrcList"/><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,previewSrcList: null,initialIndex: 0,clearable_: null,};},props: ["data", "clearable", "files"],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, { files: this.files });},getSrc(d) {typeof d === `string` && (d = JSON.parse(d));let fileName = d.name;let suffix = fileName.split(".").slice(-1)[0];return $com.getFlieThumbSrc({ suffix });},getFileNameAndSize(d) {return $com.getFileNameAndSize(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);margin-right: 5px;}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>

应用

<sgFileLink :data="{ ...scope.row, clearable: true }" @remove="remove(scope.row, scope.$index)" />