|
|
@@ -0,0 +1,182 @@
|
|
|
+<template>
|
|
|
+ <div class="compare-pic" ref="compare-pic">
|
|
|
+ <img :class="`img-item img-item-0`" :src="imgs[0]" />
|
|
|
+ <div
|
|
|
+ class="beetween-ctrls"
|
|
|
+ @mousedown="handleMousedown"
|
|
|
+ @touchstart="handleMousedown"
|
|
|
+ :style="{ left: `${newPosition}%` }"
|
|
|
+ >
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="circle-ctrls">
|
|
|
+ <div class="animation-circle"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="`img-item img-item-1`"
|
|
|
+ :style="{
|
|
|
+ 'background-image': `url(${imgs[1]})`,
|
|
|
+ width: `${100 - newPosition}%`,
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ imgs: Array
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ newPosition: 50,
|
|
|
+ maxWidth: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleMousedown (event) {
|
|
|
+ this.onDragStart(event)
|
|
|
+ window.addEventListener('mousemove', this.onDragging)
|
|
|
+ window.addEventListener('touchmove', this.onDragging)
|
|
|
+ window.addEventListener('mouseup', this.onDragEnd)
|
|
|
+ window.addEventListener('touchend', this.onDragEnd)
|
|
|
+ window.addEventListener('contextmenu', this.onDragEnd)
|
|
|
+ },
|
|
|
+ onDragEnd () {
|
|
|
+ window.removeEventListener('mousemove', this.onDragging)
|
|
|
+ window.removeEventListener('touchmove', this.onDragging)
|
|
|
+ window.removeEventListener('mouseup', this.onDragEnd)
|
|
|
+ window.removeEventListener('touchend', this.onDragEnd)
|
|
|
+ window.removeEventListener('contextmenu', this.onDragEnd)
|
|
|
+ },
|
|
|
+ onDragStart (event) {
|
|
|
+ this.dragging = true
|
|
|
+ this.isClick = true
|
|
|
+ const rect = this.$refs['compare-pic'].getClientRects()
|
|
|
+ this.maxWidth = rect[0].width
|
|
|
+ if (event.type === 'touchstart') {
|
|
|
+ event.clientY = event.touches[0].clientY
|
|
|
+ event.clientX = event.touches[0].clientX
|
|
|
+ }
|
|
|
+ this.startX = event.clientX
|
|
|
+ },
|
|
|
+ onDragging (event) {
|
|
|
+ this.isClick = false
|
|
|
+ // this.displayTooltip();
|
|
|
+ let diff = 0
|
|
|
+ console.log(event)
|
|
|
+ if (event.type === 'touchmove') {
|
|
|
+ event.clientY = event.touches[0].clientY
|
|
|
+ event.clientX = event.touches[0].clientX
|
|
|
+ }
|
|
|
+ this.currentX = event.clientX
|
|
|
+
|
|
|
+ diff = ((this.currentX - this.startX) / this.maxWidth) * 100
|
|
|
+ this.startX = this.currentX
|
|
|
+ this.setPosition(this.newPosition + diff)
|
|
|
+ },
|
|
|
+ setPosition (newPosition) {
|
|
|
+ if (newPosition === null || isNaN(newPosition)) return
|
|
|
+ if (newPosition < 0) {
|
|
|
+ newPosition = 0
|
|
|
+ } else if (newPosition > 100) {
|
|
|
+ newPosition = 100
|
|
|
+ }
|
|
|
+ this.newPosition = newPosition
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.compare-pic {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.img-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ user-select: none;
|
|
|
+ &-1 {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ width: 50%;
|
|
|
+ background-position: top right;
|
|
|
+ }
|
|
|
+}
|
|
|
+.beetween-ctrls {
|
|
|
+ position: absolute;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ z-index: 2;
|
|
|
+ .line {
|
|
|
+ height: 100%;
|
|
|
+ width: 3px;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.circle-ctrls {
|
|
|
+ width: 52px;
|
|
|
+ height: 52px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(255, 255, 255, 0.4);
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin: -26px 0 0 -26px;
|
|
|
+ user-select: none;
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ background: url(~@/assets/images/refactor/coreProduct/sxz/left-arrow.png)
|
|
|
+ no-repeat center center;
|
|
|
+ background-size: contain;
|
|
|
+ width: 11px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ left: 7px;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ right: 7px;
|
|
|
+ background-image: url(~@/assets/images/refactor/coreProduct/sxz/right-arrow.png);
|
|
|
+ }
|
|
|
+ .animation-circle {
|
|
|
+ width: 52px;
|
|
|
+ height: 52px;
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.4);
|
|
|
+ animation: mymove-data 1s infinite;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes mymove-data {
|
|
|
+ from {
|
|
|
+ width: 52px;
|
|
|
+ height: 52px;
|
|
|
+ opacity: 0.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ width: 75px;
|
|
|
+ height: 75px;
|
|
|
+ // transform: translateX(-20px) translateY(-20px);
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xzh
