全屏图片展示，自定义左遮罩

2024-01-02 13:26:52

在 Vue 3 中，我们可以利用 Vue 的自定义组件功能，封装一个图片展示组件，该组件包括自定义左遮罩，并实现通过拖动左右两端改变组件宽度来实现图片在组件中被遮罩。

实现这种效果需要用到Vue 3 的 Ref API 来获取遮罩元素，并绑定拖动事件监听函数。然后，利用 CSS 的 transform 属性改变遮罩元素的宽度，实现图片的遮罩效果。

下面是该组件的实现代码：

<template>
  <div class="image-viewer">
    <div class="image-container">
      <img :src="imageSrc" alt="Image" ref="image">
    </div>
    <div class="mask" ref="mask"></div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const image = ref()
    const mask = ref()

    const startX = 0
    const endX = 0

    const handleMouseDown = (e) => {
      startX = e.clientX
      endX = startX
      mask.value.style.width = `${endX}px`
    }

    const handleMouseMove = (e) => {
      if (startX === 0 || endX === 0) return

      endX = e.clientX
      const width = endX - startX
      mask.value.style.width = `${width}px`
    }

    const handleMouseUp = () => {
      startX = 0
      endX = 0
      mask.value.style.width = '0px'
    }

    return {
      image,
      mask,
      handleMouseDown,
      handleMouseMove,
      handleMouseUp
    }
  }
}
</script>

<style>
.image-viewer {
  position: relative;
  width: 100%;
  height: 100%;
}

.image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image {
  object-fit: contain;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: black;
}
</style>