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