拼图验证支持滑动

vue/src/components/PuzzleVerify/index.js

@@ -1,12 +1,15 @@
 import Vue from 'vue'
 import Main from './main.vue'
 import {PopupManager} from 'element-ui/lib/utils/popup'
+import {isEmpty} from "@/utils"
 
 let Constructor = Vue.extend(Main)
 
-const PuzzleVerify = function ({left = 0, top = 0} = {}) {
+const PuzzleVerify = function ({left, top} = {}) {
-    const instance = new Constructor({data: {positionLeft: left}})
+    const instance = new Constructor()
-    instance.positionTop = top - Math.round((instance.height + 130) / 2)
+    const position = getPosition({height: instance.height + 130, width: instance.width + 20, left, top})
+    instance.positionTop = position.top
+    instance.positionLeft = position.left
     instance.$mount()
     document.body.appendChild(instance.$el)
     instance.$el.style.zIndex = PopupManager.nextZIndex()
@@ -17,4 +20,27 @@ const PuzzleVerify = function ({left = 0, top = 0} = {}) {
     })
 }
 
+function getPosition({height, width, left, top} = {}) {
+    const windowHeight = window.innerHeight
+    const windowWidth = window.innerWidth
+
+    //若任一位置信息为空，直接返回居中位置
+    if (isEmpty(left, top)) {
+        return {
+            top: center(windowHeight, height),
+            left: center(windowWidth, width)
+        }
+    }
+
+    //判断位置是否超出屏幕外
+    if (windowWidth < left + width) left = center(windowWidth, width)
+    if (windowHeight < top + height) top = center(windowHeight, height)
+
+    return {left, top}
+}
+
+function center(full, part) {
+    return Math.round((full - part) / 2)
+}
+
 export default PuzzleVerify

vue/src/components/PuzzleVerify/main.vue

@@ -30,7 +30,7 @@
                 <div class="slider-track">
                     <div class="slider-tip" :style="stat==='ready'?'opacity: 1':''">拖动滑块完成拼图</div>
                 </div>
-                <div class="slider-btn" :style="sliderBtnStyle" @mousedown.prevent.stop="moveStart"/>
+                <div class="slider-btn" :style="sliderBtnStyle" @mousedown="moveStart" @touchstart="moveStart"/>
             </div>
 
             <div class="puzzle-footer">
@@ -237,12 +237,15 @@
                 c_s.setAttribute("height", c.getAttribute("height"))
             },
             moveStart(e) {
-                this.moveStartAtX = e.pageX
+                e.preventDefault()
+                e.stopPropagation()
+                this.moveStartAtX = e.type === 'mousedown' ? e.pageX : e.changedTouches[0].pageX
                 this.addListener()
             },
             moving(e) {
                 this.stat = 'move'
-                const distance = e.pageX - this.moveStartAtX
+                const pageX = e.type === 'mousedown' ? e.pageX : e.changedTouches[0].pageX
+                const distance = pageX - this.moveStartAtX
                 if (this.moveStartAtX === null
                     || distance < 0
                     || distance > this.width - this.blockSize) {
@@ -252,7 +255,8 @@
                 this.sliderStyle.transition = "inherit"
             },
             moveEnd(e) {
-                const distance = e.pageX - this.moveStartAtX
+                const pageX = e.type === 'mousedown' ? e.pageX : e.changedTouches[0].pageX
+                const distance = pageX - this.moveStartAtX
                 const ver_Num = this.randomX - 10
                 const minLeft = ver_Num - this.deviation
                 const maxLeft = ver_Num + this.deviation
@@ -277,10 +281,14 @@
                 if (this.image.loading) return
                 document.addEventListener("mousemove", this.moving)
                 document.addEventListener("mouseup", this.moveEnd)
+                document.addEventListener("touchmove", this.moving)
+                document.addEventListener("touchend", this.moveEnd)
             },
             removeListener() {
                 document.removeEventListener("mousemove", this.moving)
                 document.removeEventListener("mouseup", this.moveEnd)
+                document.addEventListener("touchmove", this.moving)
+                document.addEventListener("touchend", this.moveEnd)
             },
             handleAfterLeave() {
                 this.$destroy(true)

vue/src/views/app/login.vue

@@ -101,7 +101,7 @@
                 this.$refs.form.validate(valid => {
                     if (!valid) return
                     this.loading = true
-                    this.$puzzleVerify({left: pageX, top: pageY})
+                    this.$puzzleVerify()
                         .then(() => this.$store.dispatch('user/login', {
                             ...this.form,
                             password: md5(this.form.password)