update 1.1.7

javaLuo · javaLuo · commit 06c7e2d018b4 · 2021-10-12T11:22:30.000+08:00
diff --git a/example/src/app.vue b/example/src/app.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
-    <AuthModelMy :show="show"
-                 @close="onTestClose" @success="onTestClose" @fail="onTestClose"/>
+    <AuthModelMy
+      :show="show"
+      :imgs="imgs"
+      @close="onTestClose"
+      @success="onTestClose"/>
 
     <hr />
     <button @click="onTest">验证</button>
@@ -14,7 +17,7 @@ import Img1 from "./assets/1.jpg";
 export default {
   data() {
     return {
-      imgs: [Img1],
+      imgs: [Img1, "https://isluo.com/kernel/index/img/welcome/girl1.png", "https://isluo.com/kernel/index/img/welcome/theback.jpg"],
       show: false
     };
   },
@@ -29,6 +32,9 @@ export default {
   methods: {
     onTest() {
       this.show = true;
+    },
+    onFail(){
+
     },
     onTestClose() {
       console.log("出发：", this.show);
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-puzzle-vcode",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "vue 滑动拼图验证码",
   "main": "dist/main.js",
   "files": [
@@ -28,37 +28,37 @@
   },
   "homepage": "https://github.com/javaLuo/vue-puzzle-vcode#readme",
   "dependencies": {
-    "vue": "^2.6.12",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.2"
+    "vue": "^2.6.14",
+    "webpack-cli": "^4.9.0",
+    "webpack-dev-server": "^4.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.13",
-    "@babel/plugin-proposal-class-properties": "^7.12.13",
-    "@babel/plugin-proposal-object-rest-spread": "^7.12.13",
+    "@babel/core": "^7.15.8",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.12.15",
-    "@babel/polyfill": "^7.11.5",
-    "@babel/runtime": "^7.12.13",
+    "@babel/plugin-transform-runtime": "^7.15.8",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/runtime": "^7.15.4",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
     "@vue/babel-preset-jsx": "^1.2.4",
-    "autoprefixer": "^10.2.4",
+    "autoprefixer": "^10.3.7",
     "babel-loader": "^8.2.2",
     "babel-plugin-import": "^1.13.3",
     "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "babel-preset-vue-app": "^2.0.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^5.0.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.4.0",
     "file-loader": "^6.2.0",
-    "less": "^4.1.1",
-    "less-loader": "^8.0.0",
-    "postcss-loader": "^5.0.0",
-    "style-loader": "^2.0.0",
+    "less": "^4.1.2",
+    "less-loader": "^10.1.0",
+    "postcss-loader": "^6.1.1",
+    "style-loader": "^3.3.0",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "^4.1.1",
-    "vue-loader": "^15.9.6",
-    "vue-template-compiler": "^2.6.12",
-    "webpack": "^5.21.2"
+    "vue-loader": "^15.9.8",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.58.1"
   },
   "browserslist": [
     "iOS >= 8",
diff --git a/src/app.vue b/src/app.vue
@@ -1,7 +1,6 @@
 <template>
   <!-- 本体部分 -->
-  <div :id="id"
-       :class="['vue-puzzle-vcode', { show_: show }]"
+  <div :class="['vue-puzzle-vcode', { show_: show }]"
        @mousedown="onCloseMouseDown"
        @mouseup="onCloseMouseUp"
        @touchstart="onCloseMouseDown"
@@ -82,31 +81,7 @@
 <script>
 import resetSvg from "./assets/reset.png";
 export default {
-  /** 私有数据 **/
-  data() {
-    return {
-      mouseDown: false, // 鼠标是否在按钮上按下
-      startWidth: 50, // 鼠标点下去时父级的width
-      startX: 0, // 鼠标按下时的X
-      newX: 0, // 鼠标当前的偏移X
-      pinX: 0, // 拼图的起始X
-      pinY: 0, // 拼图的起始Y
-      loading: true, // 是否正在加在中，主要是等图片onload
-      isCanSlide: false, // 是否可以拉动滑动条
-      error: false, // 图片加在失败会出现这个，提示用户手动刷新
-      infoBoxShow: false, // 提示信息是否出现
-      infoText: "", // 提示等信息
-      infoBoxFail: false, // 是否验证失败
-      timer1: null, // setTimout1
-      closeDown: false, // 为了解决Mac上的click BUG
-      isSuccess: false, // 验证成功
-      resetSvg,
-      imgIndex: -1 // 用于自定义图片时不会随机到重复的图片
-    };
-  },
-  /** 父级参数 **/
   props: {
-    id: { type: String },
     canvasWidth: { type: Number, default: 310 }, // 主canvas的宽
     canvasHeight: { type: Number, default: 160 }, // 主canvas的高
     // 是否出现，由父级控制
@@ -132,6 +107,29 @@ export default {
     }
   },
 
+  data() {
+    return {
+      mouseDown: false, // 鼠标是否在按钮上按下
+      startWidth: 50, // 鼠标点下去时父级的width
+      startX: 0, // 鼠标按下时的X
+      newX: 0, // 鼠标当前的偏移X
+      pinX: 0, // 拼图的起始X
+      pinY: 0, // 拼图的起始Y
+      loading: false, // 是否正在加在中，主要是等图片onload
+      isCanSlide: false, // 是否可以拉动滑动条
+      error: false, // 图片加在失败会出现这个，提示用户手动刷新
+      infoBoxShow: false, // 提示信息是否出现
+      infoText: "", // 提示等信息
+      infoBoxFail: false, // 是否验证失败
+      timer1: null, // setTimout1
+      closeDown: false, // 为了解决Mac上的click BUG
+      isSuccess: false, // 验证成功
+      imgIndex: -1, // 用于自定义图片时不会随机到重复的图片
+      isSubmting: false, // 是否正在判定，主要用于判定中不能点击重置按钮
+      resetSvg,
+    };
+  },
+
   /** 生命周期 **/
   mounted() {
     document.body.appendChild(this.$el);
@@ -144,8 +142,9 @@ export default {
     document.addEventListener("touchend", this.onRangeMouseUp, false);
     if (this.show) {
       document.body.classList.add("vue-puzzle-overflow");
+      this.reset();
     }
-    this.reset();
+
   },
   beforeDestroy() {
     clearTimeout(this.timer1);
@@ -167,6 +166,8 @@ export default {
         document.body.classList.add("vue-puzzle-overflow");
         this.reset();
       } else {
+        this.isSuccess = false;
+        this.infoBoxShow = false;
         document.body.classList.remove("vue-puzzle-overflow");
       }
     }
@@ -247,6 +248,10 @@ export default {
      * @param withCanvas 是否强制使用canvas随机作图
      */
     init(withCanvas) {
+      // 防止重复加载导致的渲染错误
+      if(this.loading && !withCanvas){
+        return;
+      }
       this.loading = true;
       this.isCanSlide = false;
       const c = this.$refs.canvas1;
@@ -255,7 +260,10 @@ export default {
       const ctx = c.getContext("2d");
       const ctx2 = c2.getContext("2d");
       const ctx3 = c3.getContext("2d");
+      const isFirefox = navigator.userAgent.indexOf("Firefox") >= 0 && navigator.userAgent.indexOf("Windows") >= 0; // 是windows版火狐
       const img = document.createElement("img");
+      ctx.fillStyle = "rgba(255,255,255,1)";
+      ctx3.fillStyle = "rgba(255,255,255,1)";
       ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
       ctx2.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
 
@@ -269,31 +277,26 @@ export default {
         // 先画小图
         this.paintBrick(ctx);
         ctx.closePath();
-        if (
-          !(
-            navigator.userAgent.indexOf("Firefox") >= 0 &&
-            navigator.userAgent.indexOf("Windows") >= 0
-          )
-        ) {
-          // 非火狐，在此画外阴影
+        if(!isFirefox){
+          ctx.shadowOffsetX = 0;
+          ctx.shadowOffsetY = 0;
+          ctx.shadowColor = "#000";
+          ctx.shadowBlur = 3;
+          ctx.fill();
+          ctx.clip();
+        } else {
+          ctx.clip();
+          ctx.save();
           ctx.shadowOffsetX = 0;
           ctx.shadowOffsetY = 0;
           ctx.shadowColor = "#000";
           ctx.shadowBlur = 3;
           ctx.fill();
+          ctx.restore();
         }
 
-        ctx.clip(); // 按照外阴影区域切割
-
-        ctx.save();
-        // 小图外阴影
-        ctx.shadowOffsetX = 0;
-        ctx.shadowOffsetY = 0;
-        ctx.shadowColor = "#000";
-        ctx.shadowBlur = 2;
-        ctx.fill();
-        ctx.restore();
         ctx.drawImage(img, x, y, w, h);
+        ctx3.fillRect(0,0,this.canvasWidth,this.canvasHeight);
         ctx3.drawImage(img, x, y, w, h);
 
         // 设置小图的内阴影
@@ -318,13 +321,8 @@ export default {
         ctx.fill();
 
         // 将小图赋值给ctx2
-        const imgData = ctx.getImageData(
-          this.pinX - 3, // 为了阴影 是从-3px开始截取，判定的时候要+3px
-          this.pinY - 20,
-          this.pinX + this.puzzleBaseSize + 5,
-          this.pinY + this.puzzleBaseSize + 5
-        );
-        ctx2.putImageData(imgData, 0, this.pinY - 20);
+        ctx2.drawImage(c, this.pinX - 3,this.pinY - 20,this.pinX + this.puzzleBaseSize + 5,this.pinY + this.puzzleBaseSize + 5, 
+        0, this.pinY - 20, this.pinX + this.puzzleBaseSize + 5, this.pinY + this.puzzleBaseSize + 5);
 
         // 清理
         ctx.restore();
@@ -521,6 +519,7 @@ export default {
     },
     // 开始判定
     submit() {
+      this.isSubmting = true;
       // 偏差 x = puzzle的起始X - (用户真滑动的距离) + (puzzle的宽度 - 滑块的宽度) * （用户真滑动的距离/canvas总宽度）
       // 最后+ 的是补上slider和滑块宽度不一致造成的缝隙
       const x = Math.abs(
@@ -542,6 +541,7 @@ export default {
         clearTimeout(this.timer1);
         this.timer1 = setTimeout(() => {
           // 成功的回调
+          this.isSubmting = false;
           this.$emit("success", x);
         }, 800);
       } else {
@@ -555,19 +555,28 @@ export default {
         // 800ms后重置
         clearTimeout(this.timer1);
         this.timer1 = setTimeout(() => {
+          this.isSubmting = false;
           this.reset();
         }, 800);
       }
     },
-    // 重置
-    reset() {
+    // 重置 - 重新设置初始状态
+    resetState() {
       this.infoBoxFail = false;
       this.infoBoxShow = false;
-      this.isCanSlide = true;
+      this.isCanSlide = false;
       this.isSuccess = false;
       this.startWidth = this.sliderBaseSize; // 鼠标点下去时父级的width
       this.startX = 0; // 鼠标按下时的X
       this.newX = 0; // 鼠标当前的偏移X
+    },
+
+    // 重置
+    reset() {
+      if(this.isSubmting){
+        return;
+      }
+      this.resetState();
       this.init();
     }
   }
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -47,7 +47,9 @@ module.exports = {
     ],
   },
   devServer: {
-    contentBase: path.join(__dirname, "example"),
+    static: {
+      directory: path.join(__dirname, 'example'),
+    },
     hot: true,
     open: true,
   },
diff --git a/yarn.lock b/yarn.lock
