zoomImage.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <template>
  2. <div class="zoom-image">
  3. <img :src="url" @click="imagePreview(url)" />
  4. <div id="tbody"></div>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {};
  11. },
  12. props: ["url"],
  13. methods: {
  14. imagePreview(src) {
  15. console.log(src)
  16. let body = document.querySelector("#tbody");
  17. let mask = document.createElement("div");
  18. let img = document.createElement("img");
  19. img.src = src + "&width=1000";
  20. mask.classList.add("mask");
  21. this.setStyle(mask, img);
  22. this.setEventListener(body, mask);
  23. img.onload = function() {
  24. mask.appendChild(img);
  25. body.appendChild(mask);
  26. };
  27. },
  28. setStyle(mask, img) {
  29. mask.style.position = "fixed";
  30. mask.style.top = 0;
  31. mask.style.left = 0;
  32. mask.style.right = 0;
  33. mask.style.bottom = 0;
  34. mask.style.background = "rgba(0,0,0,0.8)";
  35. mask.style.zIndex = "99";
  36. img.style.position = "absolute";
  37. img.style.top = "50%";
  38. img.style.left = "50%";
  39. img.style.width = "100%";
  40. img.style.transform = "translate(-50%, -50%)";
  41. },
  42. setEventListener(body, mask) {
  43. mask.addEventListener("click", function() {
  44. body.removeChild(mask);
  45. });
  46. }
  47. }
  48. };
  49. </script>
  50. <style lang="scss" scoped>
  51. .zoom-image {
  52. width: 102px;
  53. height: 102px;
  54. padding: 5px;
  55. border-radius: 4px;
  56. border: 1px solid rgba(195, 199, 203, 1);
  57. display: inline-block;
  58. img {
  59. width: 100%;
  60. height: 100%;
  61. border-radius: 1px;
  62. }
  63. }
  64. </style>