index.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <el-image
  3. :src="`${realSrc}`"
  4. fit="cover"
  5. :style="`width:${realWidth};height:${realHeight};`"
  6. :preview-src-list="realSrcList"
  7. >
  8. <template #error>
  9. <div class="image-slot">
  10. <el-icon><picture-filled /></el-icon>
  11. </div>
  12. </template>
  13. </el-image>
  14. </template>
  15. <script setup>
  16. import { isExternal } from "@/utils/validate";
  17. const props = defineProps({
  18. src: {
  19. type: String,
  20. required: true
  21. },
  22. width: {
  23. type: [Number, String],
  24. default: ""
  25. },
  26. height: {
  27. type: [Number, String],
  28. default: ""
  29. }
  30. });
  31. const realSrc = computed(() => {
  32. let real_src = props.src.split(",")[0];
  33. if (isExternal(real_src)) {
  34. return real_src;
  35. }
  36. return import.meta.env.VITE_APP_BASE_API + real_src;
  37. });
  38. const realSrcList = computed(() => {
  39. let real_src_list = props.src.split(",");
  40. let srcList = [];
  41. real_src_list.forEach(item => {
  42. if (isExternal(item)) {
  43. return srcList.push(item);
  44. }
  45. return srcList.push(import.meta.env.VITE_APP_BASE_API + item);
  46. });
  47. return srcList;
  48. });
  49. const realWidth = computed(() =>
  50. typeof props.width == "string" ? props.width : `${props.width}px`
  51. );
  52. const realHeight = computed(() =>
  53. typeof props.height == "string" ? props.height : `${props.height}px`
  54. );
  55. </script>
  56. <style lang="scss" scoped>
  57. .el-image {
  58. border-radius: 5px;
  59. background-color: #ebeef5;
  60. box-shadow: 0 0 5px 1px #ccc;
  61. :deep(.el-image__inner) {
  62. transition: all 0.3s;
  63. cursor: pointer;
  64. &:hover {
  65. transform: scale(1.2);
  66. }
  67. }
  68. :deep(.image-slot) {
  69. display: flex;
  70. justify-content: center;
  71. align-items: center;
  72. width: 100%;
  73. height: 100%;
  74. color: #909399;
  75. font-size: 30px;
  76. }
  77. }
  78. </style>