vue3图片对比组件_风再起时0x的博客-程序员ITS203

技术标签: 个人学习  vue  js  

在春风动力的官网里看到了这个效果,然后自己写了一个
效果:在这里插入图片描述
使用:

<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>
  <div
    class="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>
    <div
      class="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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_16151185/article/details/115767054

智能推荐

网学天地计算机组成与原理试题,哈工大2007年秋季学期计算机组成原理期末试题..._酒夏的博客-程序员ITS203

哈工大计算机考研全套视频和资料 真题 考点 典型题 命题规律独家视频讲解 详解 网学天地 www e 咨询 QQ 3505993547 哈工大 2007 年 秋 季学期 题号一二三四五六七八九十总分 分数 一 填空题 24 分 1 DMA 的数据块传送可分为 和阶段 2 设 n 16 不包括符号位 机器完成一次加和移位各需 100ns 则原码一位乘最多需ns 补码 Booth 算法最多需ns 3 ...

gcc编译常用选项_weixin_30848775的博客-程序员ITS203

gcc  -v  查看gcc编译器版本gcc  -o  指定输出文件名filegcc  -E  只预处理,不编译、汇编、链接gcc  -S  只编译,不汇编、链接gcc  -c  编译和汇编,不链接gcc  -m32  hello.c  -o  hello  用32位机器的编译器来编译这个文件  gcc-linux-objdump   -D  xxx.elf  &gt;...

五种常用手机Java编程软件_重庆千锋的博客-程序员ITS203

越来越多的朋友都对编程感兴趣,编程需要工具,所以大家也想知道有哪些好用的java编程工具,接下来系哦啊吧就为大家介绍几款常用的相关编程工具。1.JDKJDK-java开发工具包JDK是Java开发工具包,基本上每个研究java的人都首先在机器上安装JDK,那么他有哪些部件呢?下面是运行java时真正工作的四个文件夹:bin、include、lib、jrebin:是最重要的是编译器包括:java和jvm与头文件lib:类库jre:java运行时环境的交互一般用于java程序的开发,而jre只运行类而不编译

SpringBoot启动项目后执行初始化操作_CodeCat程序喵的博客-程序员ITS203

SpringBoot 在启动后如果想执行一些初始化操作,如将一些信息写入Redis缓存中,此时该怎么办?我在SpringBoot的文档中找到了如下方法:代码:import org.springframework.boot.*;import org.springframework.stereotype.*;@Componentpublic class MyBean implements CommandLineRunner { public void run(String... args)

用MATLAB实现线性规划问题的求解,用matlab求解线性规划问题_weixin_39778582的博客-程序员ITS203

1实验四 用MATLAB 求解线性规划问题一、实验目的:了解Matlab 的优化工具箱,能利用Matlab 求解线性规划问题。二、实验内容:线性规划的数学模型有各种不同的形式,其一般形式可以写为: 目标函数:nn x f x f x f z +++= 2211m i n约束条件: s n sn s s n n b x a x a x a b x a x a x a ≤+++≤+++22111121...

WebSocket:创建实例、发送和接收数据_FromNowOnUntilTheEnd的博客-程序员ITS203_iowebsocketchannel 发送数据

1、Web Sockets:能够在客户端和服务端之间发送非常少量的数据,而不必担心HTTP那样字节级的开销由于传递的数据包很小,因此WebSockets非常适合移动应用。缺点:制定协议的时间比制定JavaScript API的时间还要长。    1) URL模式:    未加密:ws://    已加密:wss://    2)创建WebSocket:先实例一个WebSocket对象...

随便推点

mysql备份锁表吗_mysql备份数据库 肿么锁表_Senvn的博客-程序员ITS203

mysqldump是mysql用于转存储数据库的实用程序。它主要产生一个SQL脚本,其中包含从头重新创建数据库所必需的命令CREATETABLE INSERT等。如果给mysqldump进行备份,从库上停止复制的sql线程然后mysqldump,这个是个很好的选择,因为停止复制就没有写,就不用担心锁表的问题 。下面提供两只备份方法:一、MyISAM引擎备份1. 由于MyISAM引擎为表级锁,因此,...

【微积分】导数,偏导数,方向导数与梯度_北境の守卫的博客-程序员ITS203

导数(derivative)偏导数(partial derivative)方向导数 (directional derivative)梯度 (gradient)Ref导数(derivative)导数,是我们最早接触的一元函数中定义的,可以在 xy 平面直角坐标系中方便的观察。当 Δx→0Δx→0\Delta x \to 0 时,P0P0P_0 处的导数就是该点...

PCL IO 操作_月照银海似蛟龙的博客-程序员ITS203_pcl::io::loadpcdfile

PCL IO 操作PCD文件介绍PCD文件介绍PCL以PCD文件形式保存点云。 (主要是为了保存n维点类型)其文件格式如下:每一个PCD文件都包含一个文件头,它确定和声明文件中存储的点云数据的某种特性。PCD文件头必须使用ASCII码来编码。PCD文件中指定的每一个文件头字段以及ASCII点数据都用一个新行(\n)分开了。从0.7版本开始,PCD文件头包含下面的这些字段VERSIO:指定PCD文件版本FEIELDS:指定一个点可以有的每一个维度和字段的名字。例如FEIELDS x y

4个超级实用的黑科技软件神器,让你爱不释手!_夏末嘞的博客-程序员ITS203

EyeLoveU一款免费的眼睛保护工具,主要功能分为两种提醒模式:定时提醒、智慧提醒,用户可以设定不同的提醒时间,或者工作持续多久后进入休息模式。Rolan一款轻量级系统启动器管理工具。支持添加一些常用系统功能,如打开控制面板、命令行、关闭显示器、关机、重启等,并且可以通过分类对图标进行管理。声享一个基于浏览器的制作PPT的专业工具,用户可以随时随地创建、编辑、录制和分...

线程的创建以及线程的本质_Loopers的博客-程序员ITS203

上节详细学习了进程的创建,通过实例学习了fork和vfork的区别。本节将学习线程的创建,只涉及应用层的线程,内核线程的创建在后面学习。应用线程的创建应用线程的创建,想必大家都有所了解。使用pthread_create库函数来创建应用线程。通过一个简单的例子来看下。我们先来看下pthread_create的参数,通过man pthread_createNAME pt...

GoogleAnalytics与FirebaseCloudMessage同时使用_最爱吃葡萄的博客-程序员ITS203

WhatWhyHow最简单的做法若Google不想导入到Firebase下需要进行json文件合并分别建立Google项目与Firebase项目注意使用同样的包名以在Firebase项目下载的google-servicesjson文件为基准修改json文件services节点数据WhatGoogleAnalytics是Google旗下分析工具,可用于统计APP信息,如屏幕信息、事件、并

推荐文章

热门文章

相关标签