【sgFileLink】自界说组件：基于el-link、el-icon标签构建文件超链接组件，
https://i-blog.csdnimg.cn/direct/ad2f67a6cb714fff836a684dc55abfdd.pngsgFileLink源代码
<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="" />
<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);
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>
应用
<sgFileLink :data="{ ...scope.row, clearable: true }" @remove="remove(scope.row, scope.$index)" />
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]