vue3图片对比组件

在春风动力的官网里看到了这个效果，然后自己写了一个
效果：
使用：

<he-contrast width="600"><template #left><img src="@/assets/img/VFX2-before.jpg" class="images" /></template><template #right><img src="@/assets/img/VFX2-after.jpg" class="images" /></template>
</he-contrast>

组件封装：

<template><divclass="PictureComparison":style="'width:' + width + 'px;height:' + height + 'px'"><div class="before-image" :style="'width:' + x + 'px'" @click.stop="goLeft"><div :style="'width:' + width + 'px;height:' + height + 'px'"><slot name="left"></slot></div></div><div class="after-image" @click.stop="goRight"><div :style="'width:' + width + 'px;height:' + height + 'px'"><slot name="right"></slot></div></div><divclass="divider-bar":style="'left:' + x + 'px'"@mousedown.prevent="onmouseDown()"></div></div>
</template><script>
import { reactive, toRefs } from "vue";
export default {props: {width: { type: String, default: "500" },height: { type: String, default: "300" },},setup(props) {const data = reactive({isDown: false, //鼠标是否正按住moveX: 0, //鼠标移动的位置x: props.width / 2, //设置位置});const onmouseDown = () => {data.isDown = true;data.x = event.target.offsetLeft;var disX = event.clientX - event.target.offsetLeft;document.onmousemove = function (event) {if (data.isDown == false) {return;}data.x = event.clientX - disX;if (data.x >= props.width) {data.x = props.width;} else if (data.x <= 0) {data.x = 0;}};document.onmouseup = function () {data.isDown = false;document.onmousemove = document.onmouseup = null;return false;};};const goLeft = () => {data.x = 0;};const goRight = () => {data.x = props.width;};return {...toRefs(data),onmouseDown,goLeft,goRight,};},
};
</script><style lang="less" scoped>
.PictureComparison {position: relative;display: inline-block;margin: 0 auto;min-height: 273px;margin-bottom: 40px;overflow: hidden;.before-image {position: absolute;top: 0;left: 0;z-index: 1;width: 50%;overflow: hidden;}.after-image {position: absolute;top: 0;left: 0;z-index: 0;}.divider-bar {cursor: move;position: absolute;width: 1px;left: 50%;top: 0px;background: white;height: 100%;display: block;z-index: 2;box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);&::after {content: "<|>";position: absolute;color: #ccc;text-align: center;line-height: 18px;width: 40px;height: 20px;background: #fff;border-radius: 10px;top: 50%;left: 50%;transform: translate(-50%, -50%);}}
}
</style>

最后推荐一个前端开发好用的导航网站：www.888i8.cn

vue3图片对比组件相关推荐

Vue3+ Vue-cli (2) 组件篇
目录一.全局组件定义和复用性讲解二.Vue3中的局部组件三.父子组件的静态和动态传值四.组件传值时的校验操作五.组件中重要机制 - 单项数据流六.Non-props使用技巧七.组件中通过 ...
v-viewer：vue3图片查看器
v-viewer:一个方便易用的vue3 图片查看器 v-viewer中文文档一.安装 1.npm/yarn 安装 npm install v-viewer@next or yarn add vie ...
vue3.0 父组件调用子组件方法及获取子组件的值
vue3.0 父组件调用子组件方法及获取子组件的值通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异,但是思路还是一样 ...
七十三、Vue项目城市详细页的动态路由，Banner布局和公用图片画廊组件拆分
2020/11/04. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
Vue性能优化：图片与组件，如何实现按需加载?
Vue性能优化:图片与组件,如何实现按需加载? 前沿:按需加载是性能优化其中的一个环节,可以是图片的按需加载,也就是lazyload来实现按需加载的场景,也可以是组件库的引入,只需部分组件的使用而无需 ...
python找图片不同_用openCV和Python 实现图片对比,并标识出不同点的方式
最近项目中需要实现两组图片对比,并能将两者的区别标识出来. 在网上搜索一大堆找到一篇大神的文章,最终实现该功能,在这里记录下: 想要实现此demo,首先我们得确保电脑上已安装 openCV 和 Pyt ...
微信小程序|开发实战篇之九-image-picker图片选择器组件及其子组件
开发实战篇之九前言 1.grid格子组件 1.1 grid骨架文件wxml 1.2 grid的js文件分析 1.3 grid-item的wxml文件分析 1.4 grid-item的wxss文件分析 ...
python图像对比_python+PIL实现图片对比（一）
前提前阵子报了个班,学了一些android UI自动化相关的东西,于是想到第一家单位在做android手机自动化的时候,有用到图片对比,来确定是否点到指定的页面,遂想在appium+python做U ...
vue3 内置组件keep-alive用法的全面介绍
vue3 内置组件keep-alive用法的全面介绍基础用法首先看一个反面例子 const app = Vue.createApp({template: `<button v-for=&qu ...
HarmonyOS第三方组件——鸿蒙图片裁剪组件ohos-Image-Cropper
前言基于安卓的平台的图片裁剪组件(https://github.com/ArthurHub/Android-Image-Cropper),实现了鸿蒙平台的迁移和重构,代码已经开源到(https:// ...

vue3图片对比组件

vue3图片对比组件相关推荐

最新文章

热门文章