ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【sgFileLink】自界说组件：基于el-link、el-icon标签构建文件超链接组件， [打印本页]
作者: 科技颠覆者    时间: 2024-12-11 17:55
标题: 【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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4