【Uniapp】图片修复对比组件

★雨潇★

已于 2024-05-15 15:03:37 修改

阅读量604

点赞数 15

CC 4.0 BY-SA版权

分类专栏： Vue.js js 文章标签： uni-app 小程序前端 vue.js javascript

于 2024-05-15 14:43:56 首次发布

本文链接：https://blog.csdn.net/yasyList/article/details/138908098

效果图

在这里插入图片描述
不废话，直接上源码！

组件直接用

<template>
  <view
    class="img-comparison-container"
    :style="'width:' + width + 'rpx;height:' + height + 'rpx'"
  >
    <view class="before-image" :style="'width:' + x + 'rpx'">
      <view :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
        <image
          :src="beforeImageUrl"
          class="images"
          mode="aspectFill"
          data-type="before"
          @tap="previewImage"
        />
      </view>
      <view v-if="beforeText" class="before-text">
        {
   {
    beforeText }}
      </view>
    </view>
    <view class="after-image">
      <view :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
        <image
          :src="afterImageUrl"
          class="images"
          mode="aspectFill"
          data-type="after"
          @tap="previewImage"
        />
      </view>
      <view v-if="afterText" class="after-text">
        {
   {
    afterText }}
      </view>
    </view>
    <view
      class="slider-bar"
      :style="'left:' + x + 'rpx'"
      @touchmove="handleTouchMove"
      @touchstart="handleTouchStart"
      @touchend="handleTouchEnd"
    >
      <view class="slider-button"></view>
    </view>
  </view>
</template>

<script>
export default {
   
  props: