vue3怎么使用useMouseInElement实现图片局部放大预览效果

其他教程   发布日期:2023年10月03日   浏览次数:696

本文小编为大家详细介绍“vue3怎么使用useMouseInElement实现图片局部放大预览效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3怎么使用useMouseInElement实现图片局部放大预览效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

1、首先要安装@vueuse/core

  1. npm i @vueuse/core

2、实现过程如下:

  1. <template>
  2. <div class="goods-image">
  3. <!-- 大图 -->
  4. <div v-show="show" class="large" :></div>
  5. <!-- 中图 -->
  6. <div class="middle" ref="target">
  7. <img :src="images[currIndex]" alt="">
  8. <!-- 遮罩色块 -->
  9. <div v-show="show" class="layer" :></div>
  10. </div>
  11. <!-- 小图 -->
  12. <ul class="small">
  13. <li v-for="(img,i) in images" :key="img" :class="{active:i===currIndex}">
  14. <img @mouseenter="currIndex=i" :src="img" alt="">
  15. </li>
  16. </ul>
  17. </div>
  18. </template>
  19. <script>
  20. import { reactive, ref, watch } from 'vue'
  21. import { useMouseInElement } from '@vueuse/core'
  22. export default {
  23. name: 'HelloWorld',
  24. props: {
  25. images: {
  26. type: Array,
  27. default: () => ['https://yanxuan-item.nosdn.127.net/a6939f41c48fa9e9c8f7a7ed855351f1.jpg',
  28. 'https://yanxuan-item.nosdn.127.net/0cdfd546f8675669b87716114ad5900a.jpg',
  29. 'https://yanxuan-item.nosdn.127.net/240983ccc935146a4795e3990d30468d.jpg',
  30. 'https://yanxuan-item.nosdn.127.net/d46e005025a5d3b73c4781d31b327558.jpg',
  31. 'https://yanxuan-item.nosdn.127.net/330913911087b44b0d817dd78233165f.png',]
  32. }
  33. },
  34. setup (props) {
  35. // 当前预览图的索引
  36. const currIndex = ref(0)
  37. // 1. 是否显示遮罩和大图
  38. const show = ref(false)
  39. // 2. 遮罩的坐标(样式)
  40. const layerPosition = reactive({
  41. left: 0,
  42. top: 0
  43. })
  44. // 3. 大图背景定位(样式)
  45. const largePosition = reactive({
  46. backgroundPositionX: 0,
  47. backgroundPositionY: 0
  48. })
  49. // 4. 使用useMouseInElement得到基于元素左上角的坐标和是否离开元素数据
  50. const target = ref(null)
  51. const { elementX, elementY, isOutside } = useMouseInElement(target)
  52. watch([elementX, elementY, isOutside], () => {
  53. // 5. 根据得到数据设置样式数据和是否显示数据
  54. show.value = !isOutside.value
  55. // 计算坐标
  56. const position = { x: 0, y: 0 }
  57. if (elementX.value < 100) position.x = 0
  58. else if (elementX.value > 300) position.x = 200
  59. else position.x = elementX.value - 100
  60. if (elementY.value < 100) position.y = 0
  61. else if (elementY.value > 300) position.y = 200
  62. else position.y = elementY.value - 100
  63. // 给样式赋值
  64. layerPosition.left = position.x + 'px'
  65. layerPosition.top = position.y + 'px'
  66. largePosition.backgroundPositionX = -2 * position.x + 'px'
  67. largePosition.backgroundPositionY = -2 * position.y + 'px'
  68. })
  69. return { currIndex, show, layerPosition, largePosition, target }
  70. }
  71. }
  72. </script>
  73. <style scoped lang="less">
  74. .goods-image {
  75. width: 480px;
  76. height: 400px;
  77. position: relative;
  78. display: flex;
  79. z-index: 500;
  80. .large {
  81. position: absolute;
  82. top: 0;
  83. left: 412px;
  84. width: 400px;
  85. height: 400px;
  86. box-shadow: 0 0 10px rgba(0,0,0,0.1);
  87. background-repeat: no-repeat;
  88. background-size: 800px 800px;
  89. background-color: #f8f8f8;
  90. }
  91. .middle {
  92. width: 400px;
  93. height: 400px;
  94. background: #f5f5f5;
  95. position: relative;
  96. cursor: move;
  97. img{
  98. width: 100%;
  99. height: 100%;
  100. }
  101. //cursor: pointer;
  102. .layer {
  103. width: 200px;
  104. height: 200px;
  105. background: rgba(0,0,0,.2);
  106. left: 0;
  107. top: 0;
  108. position: absolute;
  109. }
  110. }
  111. .small {
  112. width: 80px;
  113. li {
  114. width: 68px;
  115. height: 68px;
  116. margin-left: 12px;
  117. margin-bottom: 15px;
  118. cursor: pointer;
  119. img{
  120. width: 100%;
  121. height: 100%;
  122. }
  123. &:hover,&.active {
  124. border: 2px solid #27BA9B;
  125. }
  126. }
  127. }
  128. }
  129. </style>

3、使用:在其他的.vue文件中导入组件即可使用

例如:

  1. import HelloWorld from "@/components/HelloWorld.vue";
  2. <HelloWorld ></HelloWorld>

以上就是vue3怎么使用useMouseInElement实现图片局部放大预览效果的详细内容,更多关于vue3怎么使用useMouseInElement实现图片局部放大预览效果的资料请关注九品源码其它相关文章!