两站图片滑动对比效果实现（VUE3）

在这里插入图片描述
像这种图片滑动对比的效果，网上还不少见吧，但是网上却不好找到完整现成的实现代码，我找到几个地方有类似的代码，但是都不好直接移植到代码里，因为很多都是使用原生html+css+js实现，太复杂了。反而不好应用到vue3中。
于是我借着他们的思路，自己实现了个。

前置条件

限制两张图片
图片大小必须一致，不一致会导致上层图片显示不全
底层图片必须存在，因为窗口的大小由他的大小决定

实现思路

将两张图片都看做是背景图，他们属于不同的层次
底层图片用相对定位，也就可以和其他元素一同正常展示，之后的所有元素都处于其包裹范围内，并且根据图片的大小确定整个样式的大小
上层图片用绝对定位，因为处于底层图片的包裹中，且大小是一样的，所以他们是完全重叠的，它的高度是和底层图片一致，但是宽度是可变的
利用input 的滑块模式 <input type=“range” v-model="width" />来改变上层图片的宽度，这里也就是利用了vue3的响应式。这是比原生方式实现的简便之处
由于input的原生样式无法改变，所以得额外做个滑块来实现自定义样式，然后其位置也受width的控制，实际上并不是点击该滑块来滑动的
input是出于最上层的，但是将其隐藏了，所以点击的时候看起来像是点击那个滑块，实际上点击的是input实现的滑动。
然后再修饰下其他细节，即可

接下来逐步分解出实现的效果，这样就更好理解文字的意思了

第一步，将两张图片分别呈现

在这里插入图片描述

<template><div id="bottomImg" class="bottomImg" :style="{ height: imgHeigth, width: imgWidth, backgroundImage: 'url(' + bottomImg + ')' }"><div class="upperImg" :style="{ backgroundImage: 'url(' + upperImg + ')', width: 100 - upperImgWidth + '%' }"></div></div>
</template>
<script lang="ts" setup>import { ref, onMounted } from "vue";const imgHeigth = ref("0px"); // 图片高度const imgWidth = ref("0px"); // 图片宽度const bottomImg = ref(new URL("@/images/bottomImg.jpg", import.meta.url).href); // 底图const upperImg = ref(new URL("@/images/upperImg.jpg", import.meta.url).href); // 上层图const upperImgWidth = ref(50); // 上层图宽度// 首次加载时初始化onMounted(() => {getImgSize();});// 获取图片尺寸function getImgSize() {//加载图片获取图片真实宽度和高度var image = new Image();image.onload = function () {imgHeigth.value = image.height + "px";imgWidth.value = image.width + "px";};image.src = bottomImg.value; //img.src 应该是放在 onload 方法后边的, 因为当image的src发生改变，浏览器就会跑去加载这个src里的资源,先告诉浏览器图片加载完要怎么处理，再让它去加载图片}
</script>
<style>.bottomImg {position: relative; /*  相对定位 */overflow: hidden; /*  隐藏超出部分 */}.upperImg {position: absolute; /*  绝对定位 */top: 0;right: 0; /* 从右边开始铺开图片 */height: 100%;z-index: 1;background-position: right top; /* 改变定位方式，默认是左上角，要改为右上角，这样才能实现底图在左边，上层图在右边的效果*/border-left: 2px solid rgb(255, 255, 255, 0.5); /* 显示左边框 */background-repeat: no-repeat; /*  不重复 */}
</style>

代码有详细注释，现在两张图片分别展示的效果有了，但是还没法滑动。

第二步，添加滑块，图片动起来

在这里插入图片描述
就是加了个滑块，双向绑定宽度：

        <!--滑块控制上层图片的宽度 --><input class="inputRange" type="range" v-model="upperImgWidth" min="0" max="100" />

样式

    .inputRange {position: absolute;height: 100%; /* 这样就能点击任何位置都能实现移动滑块，而不仅仅是滑块所在的位置才有效*/z-index: 3; /* 处于最高层次 */left: -4px; /*因为原始样式有边界，为了效果更好而调整的，这些都是实测效果，不重要*/touch-action: auto;width: calc(100% + 4px); /*因为原始样式有边界，为了效果更好而调整的，这些都是实测效果，不重要*//* opacity: 0; */ /*隐藏滑块，这里为了演示，就不隐藏先*/}

到这一步，效果已经有了，接下来就是样式的优化。

第三步，增加自定义的滑块

在这里插入图片描述
增加一个这样的滑块样式，其实他仅仅是个样式，它并不具备点击滑动的能力，他的位置是靠响应width的值来改变的

        <!-- 这是对外展示的滑块样式，仅仅是展示样式的，不然原生的样式不好看 --><span class="spanHandle" :style="{ left: 'calc(' + upperImgWidth + '% - 24px)' }"></span>

下面的样式不是重点，自己调整都是可以的，只需要注意使用绝对定位，z-index小于input即可。

  .spanHandle {position: absolute; /*绝对定位还是一样的*/z-index: 2; /* 样式很多，都不是关键的，只有这里，需要注意层次要低于inputRange*/height: 48px;width: 48px;position: center;font-size: 24px;border: 1px;border-radius: 50%;top: calc(90% - 24px);background-color: rgb(255, 255, 255, 0.5);}.spanHandle:before {left: 5px;transform: rotate(-45deg);}.spanHandle:after {right: -5px;transform: rotate(135deg);}.spanHandle:after,.spanHandle:before {border-left: 2px solid;border-top: 2px solid;content: "";height: 10px;position: absolute;top: 50%;transform-origin: 0 0;width: 10px;}

然后把上一步的opacity: 0;启用即可隐藏原始的input滑块

第四步，添加label和上层图片为空时的效果，这一步是可选的

效果就不贴了，就跟开头时差不多

完整代码

<template><div id="bottomImg" class="bottomImg" :style="{ height: imgHeigth, width: imgWidth, backgroundImage: 'url(' + bottomImg + ')' }"><span class="imgLabel">{{ bottomLabel }}</span><div v-if="upperImg" class="upperImg" :style="{ backgroundImage: 'url(' + upperImg + ')', width: 100 - upperImgWidth + '%' }"><span class="imgLabel">{{ upperLabel }}</span></div><div v-else class="upperUndefined" :style="{ width: 100 - upperImgWidth + '%' }"><span class="undefinedSpan">暂无结果</span></div><!-- 这是对外展示的滑块样式，仅仅是展示样式的，不然原生的样式不好看 --><span class="spanHandle" :style="{ left: 'calc(' + upperImgWidth + '% - 24px)' }"></span><!--滑块控制上层图片的宽度 --><input class="inputRange" type="range" v-model="upperImgWidth" min="0" max="100" /></div>
</template>
<script lang="ts" setup>import { ref, onMounted } from "vue";const imgHeigth = ref("0px"); // 图片高度const imgWidth = ref("0px"); // 图片宽度const bottomImg = ref(new URL("@/images/bottomImg.jpg", import.meta.url).href); // 底图const upperImg = ref(new URL("@/images/upperImg.jpg", import.meta.url).href); // 上层图const upperImgWidth = ref(50); // 上层图宽度const bottomLabel = ref("底图"); // 底图标签const upperLabel = ref("上层图"); // 上层图标签// 首次加载时初始化onMounted(() => {getImgSize();});// 获取图片尺寸function getImgSize() {//加载图片获取图片真实宽度和高度var image = new Image();image.onload = function () {imgHeigth.value = image.height + "px";imgWidth.value = image.width + "px";};image.src = bottomImg.value; //img.src 应该是放在 onload 方法后边的, 因为当image的src发生改变，浏览器就会跑去加载这个src里的资源,先告诉浏览器图片加载完要怎么处理，再让它去加载图片}
</script>
<style>.bottomImg {position: relative; /*  相对定位 */overflow: hidden; /*  隐藏超出部分 */}.upperImg {position: absolute; /*  绝对定位 */top: 0;right: 0; /* 从右边开始铺开图片 */height: 100%;z-index: 1;background-position: right top; /* 改变定位方式，默认是左上角，要改为右上角，这样才能实现底图在左边，上层图在右边的效果*/border-left: 2px solid rgb(255, 255, 255, 0.5); /* 显示左边框 */background-repeat: no-repeat; /*  不重复 */}.inputRange {position: absolute;height: 100%; /* 这样就能点击任何位置都能实现移动滑块，而不仅仅是滑块所在的位置才有效*/z-index: 3; /* 处于最高层次 */left: -4px; /*因为原始样式有边界，为了效果更好而调整的，这些都是实测效果，不重要*/touch-action: auto;width: calc(100% + 4px); /*因为原始样式有边界，为了效果更好而调整的，这些都是实测效果，不重要*/opacity: 0; /*隐藏滑块，这里为了演示，就不隐藏先*/}.spanHandle {position: absolute; /*决定定位还是一样的*/z-index: 2; /* 样式很多，都不是关键的，只有这里，需要注意层次要低于inputRange*/height: 48px;width: 48px;position: center;font-size: 24px;border: 1px;border-radius: 50%;top: calc(90% - 24px);background-color: rgb(255, 255, 255, 0.5);}.spanHandle:before {left: 5px;transform: rotate(-45deg);}.spanHandle:after {right: -5px;transform: rotate(135deg);}.spanHandle:after,.spanHandle:before {border-left: 2px solid;border-top: 2px solid;content: "";height: 10px;position: absolute;top: 50%;transform-origin: 0 0;width: 10px;}.imgLabel {font-size: 20px;color: aliceblue;text-shadow: 1px 1px #533d4a, 2px 2px #533d4a;}.upperUndefined {position: absolute;top: 0;right: 0;height: 100%;z-index: 1;font-size: 60px;background-color: rgb(255, 255, 255, 0.8);background-position: right top;border-left: 2px solid rgb(255, 255, 255, 0.5);}
</style>

封装成组件

上面的示例都是死的，封装成组件，就可以切换图片展示：
在这里插入图片描述

组件代码

<template><div id="bottomImg" class="bottomImg" :style="{ height: imgHeigth, width: imgWidth, backgroundImage: 'url(' + props.bottomImg + ')' }"><span class="imgLabel">{{ props.bottomLabel }}</span><div v-if="props.upperImg" class="upperImg" :style="{ backgroundImage: 'url(' + props.upperImg + ')', width: 100 - upperImgWidth + '%' }"><span class="imgLabel">{{ props.upperLabel }}</span></div><div v-else class="upperUndefined" :style="{ width: 100 - upperImgWidth + '%' }"><span class="undefinedSpan">暂无结果</span></div><span class="spanHandle" :style="{ left: 'calc(' + upperImgWidth + '% - 24px)' }"></span><input class="inputRange" type="range" v-model="upperImgWidth" min="0" max="100" /></div>
</template>
<script lang="ts" setup>import { ref, watch, onMounted } from "vue";const imgHeigth = ref("0px");const imgWidth = ref("0px");const upperImgWidth = ref(50);const props = defineProps({bottomImg: {type: String,default: "",},upperImg: {type: String,default: "",},bottomLabel: {type: String,default: "原图",},upperLabel: {type: String,default: "效果图",},});// 跟踪底层图片的变化，因为底层图片是基础watch(() => props.bottomImg,() => {getImgSize();upperImgWidth.value = 50;});// 首次加载时初始化onMounted(() => {getImgSize();});function getImgSize() {//加载图片获取图片真实宽度和高度var image = new Image();image.onload = function () {imgHeigth.value = image.height + "px";imgWidth.value = image.width + "px";};image.src = props.bottomImg; //img.src 应该是放在 onload 方法后边的, 因为当image的src发生改变，浏览器就会跑去加载这个src里的资源,先告诉浏览器图片加载完要怎么处理，再让它去加载图片}
</script>
<style>.bottomImg {position: relative;overflow: hidden;}.upperImg {position: absolute;top: 0;right: 0;height: 100%;z-index: 1;background-position: right top;border-left: 2px solid rgb(255, 255, 255, 0.5);}.imgLabel {font-size: 20px;color: aliceblue;text-shadow: 1px 1px #533d4a, 2px 2px #533d4a;}.upperUndefined {position: absolute;top: 0;right: 0;height: 100%;z-index: 1;font-size: 60px;background-color: rgb(255, 255, 255, 0.8);background-position: right top;border-left: 2px solid rgb(255, 255, 255, 0.5);}.undefinedSpan {display: flex;width: 100%;height: 100%;align-items: center;justify-content: center;color: #999;overflow: hidden;}.inputRange {position: absolute;height: 100%;z-index: 3;left: -4px;touch-action: auto;width: calc(100% + 4px);opacity: 0;}.spanHandle {position: absolute;z-index: 2;height: 48px;width: 48px;position: center;font-size: 24px;border: 1px;border-radius: 50%;top: calc(90% - 24px);background-color: rgb(255, 255, 255, 0.5);}.spanHandle:before {left: 5px;transform: rotate(-45deg);}.spanHandle:after {right: -5px;transform: rotate(135deg);}.spanHandle:after,.spanHandle:before {border-left: 2px solid;border-top: 2px solid;content: "";height: 10px;position: absolute;top: 50%;transform-origin: 0 0;width: 10px;}
</style>

调用示例代码

<template><div><div><button @click="changeBottomImg">切换底图</button><button @click="removeUpperImg">去除上层图</button><button @click="changeUpperImg">切换上层图</button></div><TwoImgCompare :bottom-img="bottomImg" bottom-label="原图" :upper-img="upperImg" upper-label="结果图"></TwoImgCompare></div>
</template>
<script lang="ts" setup>import TwoImgCompare from "@/components/twoImgCompare.vue";import { ref } from "vue";const bottomImg = ref(new URL("@/images/bottomImg.jpg", import.meta.url).href); // 底图const upperImg = ref(new URL("@/images/upperImg.jpg", import.meta.url).href); // 上层图// 切换底图const changeBottomImg = () => {bottomImg.value = new URL("@/images/bottomImg2.jpg", import.meta.url).href;};// 去除上层图const removeUpperImg = () => {upperImg.value = "";};// 切换上层图const changeUpperImg = () => {upperImg.value = new URL("@/images/upperImg2.jpg", import.meta.url).href;};
</script>