【sgFileLink】自界说组件：基于el-link、el-icon标签构建文件超链接组件， ...

sgFileLink源代码

1. <template>
2.   <div :class="$options.name">
3.     <el-link @click.stop="clickFile(data)">
4.       <img :src="getSrc(data)" /><span>{{ getBannerFileName(data) }}</span></el-link
5.     >
6.     <el-link
7.       class="remove-btn"
8.       v-if="clearable_"
9.       icon="el-icon-delete"
10.       :underline="false"
11.       @click.stop="remove(data)"
12.     />
14.     <el-image ref="image" style="display: none" src="" :preview-src-list="[previewSrc]" />
15.     <sgVideoDialog :data="data_sgVideoDialog" v-model="show_sgVideoDialog" />
16.     <sgAudioDialog :data="data_sgAudioDialog" v-model="show_sgAudioDialog" />
17.   </div>
18. </template>
19. <script>
20. import sgVideoDialog from "@/vue/components/admin/sgVideoDialog";
21. import sgAudioDialog from "@/vue/components/admin/sgAudioDialog";
22. import $com from "@/js/com";
23. export default {
24.   name: "sgFileLink",
25.   components: { sgVideoDialog, sgAudioDialog },
26.   data() {
27.     return {
28.       data_sgVideoDialog: {},
29.       show_sgVideoDialog: false,
30.       data_sgAudioDialog: {},
31.       show_sgAudioDialog: false,
33.       previewSrc: null,
34.       clearable_: null,
35.     };
36.   },
37.   props: ["data", "clearable"],
38.   computed: {},
39.   watch: {
40.     clearable: {
41.       handler(newValue, oldValue) {
42.         this.clearable_ = newValue === "" || newValue;
43.       },
44.       deep: true, //深度监听
45.       immediate: true, //立即执行
46.     },
47.   },
48.   created() {},
49.   mounted() {},
50.   destroyed() {},
51.   methods: {
52.     remove(data) {
53.       this.$emit(`remove`, data);
54.     },
55.     clickFile(d) {
56.       $com.clickFile(d, this);
57.     },
58.     getSrc(d) {
59.       typeof d === `string` && (d = JSON.parse(d));
60.       let fileName = d.name;
61.       let suffix = fileName.split(".").slice(-1)[0];
62.       return $com.getFlieThumbSrc({ suffix });
63.     },
64.     getBannerFileName(d) {
65.       return $com.getBannerFileName(d);
66.     },
67.   },
68. };
69. </script>
70. <style lang="scss" scoped>
71. .sgFileLink {
72.   >>> .el-link {
73.     transition: 0.2s;
74.     line-height: normal;
76.     img {
77.       width: 16px;
78.       height: 16px;
79.       object-position: center;
80.       object-fit: contain;
81.       transform: translateY(2px);
82.     }
83.     span {
84.       word-wrap: break-word;
85.       word-break: break-all;
86.       white-space: break-spaces;
87.     }
88.   }
89.   .remove-btn {
90.     transition: 0.382s;
91.     opacity: 0;
92.     pointer-events: none;
93.     transform: translateX(-100%);
94.   }
95.   &:hover {
96.     .remove-btn {
97.       opacity: 1;
98.       pointer-events: auto;
99.       transform: translateX(0%);
100.     }
101.   }
102. }
103. </style>

复制代码

应用

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。