index.vue 1.9 KB

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