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