电子商务网站自助建站,百姓网上海招聘,wordpress配合七牛云,北京哪里做网站图片叠加拖拽对比展示效果实现——Vue版 项目中遇见一个需求#xff1a;2张图片按竖线分割#xff0c;左右两侧分别展示对应图片#xff0c;通过滚动条拖动对应展示图片区域#xff1b;; 网上搜索了下#xff0c;没有找到直接可用的组件#xff0c;这里自己封装了一个次功…图片叠加拖拽对比展示效果实现——Vue版 项目中遇见一个需求2张图片按竖线分割左右两侧分别展示对应图片通过滚动条拖动对应展示图片区域; 网上搜索了下没有找到直接可用的组件这里自己封装了一个次功能组件后面会附上完整代码。希望可以帮助到由此需求的小伙伴 文章目录 图片叠加拖拽对比展示效果实现——Vue版一、实现效果预览二、HTML 部分1. 组件包含头部插槽、底部插槽、切换比较图片组2. 代码示例 三、JS 部分1. 包含组件传参左侧图片地址、右侧图片地址、事件处理等2. JS 部分代码如下 四、 CSS 样式代码六、完整使用示例 一、实现效果预览 二、HTML 部分
1. 组件包含头部插槽、底部插槽、切换比较图片组 2. 代码示例 templatediv classimage-comparator!-- 头部插槽 --slot nameheader/slot!-- 切换对比图片 下一组、上一组 --div classprev clickprevFuni classel-icon-arrow-left/i/divdiv classnext clicknextFuni classel-icon-arrow-right/i/div!-- 核心标签代码 --div classcontainer mouseenterstartDrag mousemoveonDrag mouseupendDrag mouseleaveendDragdiv classimage-wrapper:style{ clipPath: inset(0 ${100 - (dividerPosition / containerWidth * 100)}% 0 0) }img srchttps://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg classimage//divdiv classdivider :style{ left: ${dividerPosition}px }/divdiv classimage-wrapper :style{ clipPath: inset(0 0 0 ${(dividerPosition / containerWidth * 100)}%) }img srchttps://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg classimage//div/div!-- 底部插槽 --slot namefooter/slot/div
/template三、JS 部分 1. 包含组件传参左侧图片地址、右侧图片地址、事件处理等 2. JS 部分代码如下 scriptexport default {name: imageComparator,props: {leftImgUrl: {type: String,},rightImgUrl: {type: String,},},data() {return {containerWidth: 500,dividerPosition: 250,dragging: false,containerRect: null,};},methods: {updateContainerWidth() {this.containerWidth this.$el.querySelector(.container).clientWidth;},startDrag(event) {this.dragging true;this.containerRect this.$el.querySelector(.container).getBoundingClientRect();},onDrag(event) {if (this.dragging this.containerRect) {let newPosition event.clientX - this.containerRect.left;if (newPosition 0) newPosition 0;if (newPosition this.containerRect.width) newPosition this.containerRect.width;this.dividerPosition newPosition;}},endDrag() {this.dragging false;this.containerRect null;},prevFun() {this.$emit(prevFun);},nextFun() {this.$emit(nextFun);},},mounted() {this.updateContainerWidth();window.addEventListener(resize, this.updateContainerWidth);},beforeDestroy() {window.removeEventListener(resize, this.updateContainerWidth);},};/script四、 CSS 样式代码
style scoped langless
.image-comparator {width: 90%;/*max-width: 600px;*/margin: 0 auto;.container {position: relative;width: 100%;height: 600px;overflow: hidden;}.image-wrapper {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}.image {width: 100%;height: 100%;object-fit: cover;}.divider {position: absolute;top: 0;bottom: 0;width: 2px;background-color: black;cursor: ew-resize;z-index: 10;}.prev, .next {position: absolute;top: 50%;transform: translateY(-50%);z-index: 100;cursor: pointer;font-size: 40px;color: white;background-color: rgba(0, 0, 0, 0.5);padding: 10px;border-radius: 50%;transition: all 0.3s ease;left: 10px;:hover {background-color: rgba(0, 0, 0, 0.8);color: #0bf4cb;}.next {right: 10px;left: auto;}}
}/style ## 五、总结
本文着重介绍了Vue2 封装的图片分割展示组件如果小伙伴项目是V3 可以自行修改Vue 组件即可还有写组件传参地方需要的话自行改为动态参数即可这里父组件不做过多介绍以免浪费小伙伴看代码时间 六、完整使用示例 以下是一个完整的 代码示例 templatediv classimage-comparator!-- 头部插槽 --slot nameheader/slot!-- 切换对比图片 下一组、上一组 --div classprev clickprevFuni classel-icon-arrow-left/i/divdiv classnext clicknextFuni classel-icon-arrow-right/i/div!-- 核心标签代码 --div classcontainer mouseenterstartDrag mousemoveonDrag mouseupendDrag mouseleaveendDragdiv classimage-wrapper:style{ clipPath: inset(0 ${100 - (dividerPosition / containerWidth * 100)}% 0 0) }img srchttps://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg classimage//divdiv classdivider :style{ left: ${dividerPosition}px }/divdiv classimage-wrapper :style{ clipPath: inset(0 0 0 ${(dividerPosition / containerWidth * 100)}%) }img srchttps://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg classimage//div/div!-- 底部插槽 --slot namefooter/slot/div
/templatescript
export default {name: imageComparator,props: {leftImgUrl: {type: String,},rightImgUrl: {type: String,},},data() {return {containerWidth: 500,dividerPosition: 250,dragging: false,containerRect: null,};},methods: {updateContainerWidth() {this.containerWidth this.$el.querySelector(.container).clientWidth;},startDrag(event) {this.dragging true;this.containerRect this.$el.querySelector(.container).getBoundingClientRect();},onDrag(event) {if (this.dragging this.containerRect) {let newPosition event.clientX - this.containerRect.left;if (newPosition 0) newPosition 0;if (newPosition this.containerRect.width) newPosition this.containerRect.width;this.dividerPosition newPosition;}},endDrag() {this.dragging false;this.containerRect null;},prevFun() {this.$emit(prevFun);},nextFun() {this.$emit(nextFun);},},mounted() {this.updateContainerWidth();window.addEventListener(resize, this.updateContainerWidth);},beforeDestroy() {window.removeEventListener(resize, this.updateContainerWidth);},};
/script
style scoped langless
.image-comparator {width: 90%;/*max-width: 600px;*/margin: 0 auto;.container {position: relative;width: 100%;height: 600px;overflow: hidden;}.image-wrapper {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}.image {width: 100%;height: 100%;object-fit: cover;}.divider {position: absolute;top: 0;bottom: 0;width: 2px;background-color: black;cursor: ew-resize;z-index: 10;}.prev, .next {position: absolute;top: 50%;transform: translateY(-50%);z-index: 100;cursor: pointer;font-size: 40px;color: white;background-color: rgba(0, 0, 0, 0.5);padding: 10px;border-radius: 50%;transition: all 0.3s ease;left: 10px;:hover {background-color: rgba(0, 0, 0, 0.8);color: #0bf4cb;}.next {right: 10px;left: auto;}}
}/style 看到这里的小伙伴欢迎点赞、评论收藏
如有前端相关疑问请评论区留言博主会在第一时间解答
