npm - slide-vue3 - Versions diffs - 1.0.2 - Mend

slide-vue3 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/.browserslistrc +3 -0
package/.editorconfig +7 -0
package/.eslintignore +5 -0
package/.eslintrc.js +30 -0
package/README.md +29 -0
package/babel.config.js +5 -0
package/lib/README.md +36 -0
package/lib/demo.html +10 -0
package/lib/img/loginicon.3391fc16.png +0 -0
package/lib/index.common.js +2608 -0
package/lib/index.css +1 -0
package/lib/index.umd.js +2618 -0
package/lib/index.umd.min.js +1 -0
package/lib/package.json +11 -0
package/package.json +36 -0
package/packages/index.js +50 -0
package/packages/slidecode/css/slide.css +106 -0
package/packages/slidecode/img/icon/arrow.png +0 -0
package/packages/slidecode/img/icon/loginicon.png +0 -0
package/packages/slidecode/js/slidecode.js +124 -0
package/packages/slidecode/js/slidecodeMobile.js +122 -0
package/packages/slidecode/js/utils.js +17 -0
package/public/favicon.ico +0 -0
package/public/index.html +22 -0
package/public/rsa/jsencrypt.min.js +11 -0
package/src/App.vue +82 -0
package/src/assets/styles/index.scss +16 -0
package/src/main.js +13 -0
package/src/router/index.js +17 -0
package/src/service/API.js +3 -0
package/src/service/index.js +14 -0
package/src/store/index.js +22 -0
package/src/utils/request.js +66 -0
package/vue.config.js +12 -0

package/lib/index.umd.min.js ADDED Viewed

@@ -0,0 +1 @@

package/lib/package.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "name": "slidecode-vue3",
+  "version": "1.0.2",
+  "description": "web滑块验证码",
+  "main": "index.common.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

package/package.json ADDED Viewed

@@ -0,0 +1,36 @@
+{
+  "name": "slide-vue3",
+  "version": "1.0.2",
+  "private": false,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib --name index ./packages/index.js"
+  },
+  "dependencies": {
+    "axios": "^0.20.0",
+    "core-js": "^3.6.5",
+    "element-ui": "^2.13.2",
+    "js-cookie": "^2.2.1",
+    "qs": "^6.9.4",
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-airbnb": "^5.0.2",
+    "@vue/test-utils": "^1.0.3",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

package/packages/index.js ADDED Viewed

@@ -0,0 +1,50 @@
+/* eslint-disable no-param-reassign */
+import axios from 'axios';
+import { isMobile } from './slidecode/js/utils';
+import './slidecode/css/slide.css';
+// import SlideCode from'./slidecode/js/slidecode'
+let SlideCode = require('./slidecode/js/slidecode').default
+if(isMobile()){
+   SlideCode= require('./slidecode/js/slidecodeMobile').default;
+}
+const plugin = {
+  install: (app) => {
+    app.config.globalProperties.$getImg = (url,cb) => {
+      const service = axios.create();
+      service({ url, method: 'get' }).then(({ data }) => {
+        if (data) {
+          const slide = new SlideCode({
+            frontimg: `data:image/png;base64,${data.slidingImage}`,
+            backimg: `data:image/png;base64,${data.backImage}`,
+            yHeight: data.yHeight,
+            capcode: data.capcode,
+            refreshcallback(bool) {
+              switch (bool) {
+                case true:
+                  slide.showTips(true);
+                  setTimeout(() => {
+                    slide.destory()
+                  }, 500); break;
+                case false:
+                  slide.showTips(false);
+                  setTimeout(() => {
+                    app.config.globalProperties.$getImg(url,cb);
+                  }, 500);
+                  break;
+                default: app.config.globalProperties.$getImg(url,cb);
+              }
+            },
+            callback(result) {
+              cb({ data: result, that: this });
+            },
+          });
+        }
+      });
+    };
+  },
+};
+export default plugin;

package/packages/slidecode/css/slide.css ADDED Viewed

@@ -0,0 +1,106 @@
+.code_bg{
+    position: fixed;
+    top:0;
+    left: 0;
+    right:0;
+    bottom:0;
+    background-color: rgba(0,0,0,.5);
+    z-index: 999;
+}
+.icon-login-bg{
+    background-image: url(../img/icon/loginicon.png);
+    background-repeat: no-repeat;
+}
+.code-con{
+    position: absolute;
+    top:30%;
+    width: 320px;
+    left: 50%;
+    margin-left: -160px;
+    background-color: #fff;
+    z-index: 1000;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+.code-img{
+    margin: 5px 5px;
+    padding: 5px 5px;
+    background-color: #f5f6f7;
+}
+.code-img img{
+    display: block;
+}
+.icon-w-25{
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    text-indent: -9999px;
+}
+.icon-push{
+    cursor: pointer;
+    background-position: -149px -98px;
+}
+.code-push{
+    height: 25px;
+    text-align: left;
+}
+.code-btn{
+    position: relative;
+    height: 30px;
+    text-align: center;
+    color: #999;
+    margin: 10px 10px;
+    box-sizing: border-box;
+    background-color: #f5f6f7;
+    border-radius: 15px;
+    border: 1px solid #e1e1e1;
+}
+.code-btn-m{
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #f5f6f7;
+    border: 1px solid #e1e1e1;
+    z-index: 5;
+    top:-8px;
+    left: 10px;
+    box-shadow: 0 0 3px #ccc;
+    cursor: pointer;
+    background-position: -63px 10px;
+}
+.code-btn-img{
+    background-image:url(../img/icon/arrow.png);
+    background-repeat: no-repeat;
+}
+.code-btn-img.active{
+    background-position: -134px 10px;
+    box-shadow: 0 0 8px #666;
+}
+.code-span{
+    line-height: 28px;
+    font-size: 14px;
+    display: inline-block;
+    vertical-align: top;
+}
+.code-btn-img.error{
+    background-position: 8px 10px;
+}
+.code-img-con{
+    position: relative;
+}
+.code-mask{
+    position: absolute;
+    top:0;
+    left: 0;
+    z-index: 10;
+}
+.code-tip{
+    line-height: 30px;
+    padding-left: 10px;
+    font-size: 12px;
+    color: #999;
+    vertical-align: top;
+}

package/packages/slidecode/img/icon/arrow.png ADDED Viewed

Binary file

package/packages/slidecode/img/icon/loginicon.png ADDED Viewed

Binary file

package/packages/slidecode/js/slidecode.js ADDED Viewed

@@ -0,0 +1,124 @@
+export default class SlideCode {
+  constructor(options) {
+    const defaults = {
+      frontimg: '',
+      backimg: '',
+      callback: '',
+      refreshcallback: '',
+      yHeight: 1,
+    };
+    this.opts = { ...defaults, ...options };
+    this.offset = { x: 0, y: 0 };
+    this.disX = 0;
+    this.moving = false;
+    this.init();
+  }
+  init() {
+    const html = `
+    <div class="code-k-div">
+      <div class="code_bg"></div>
+      <div class="code-con">
+        <div class="code-img">
+          <div class="code-img-con">
+            <div class="code-mask" style="margin-top:${this.opts.yHeight}px"><img class="code-front-img" src="${this.opts.frontimg}"></div>
+            <img class="code-back-img" src="${this.opts.backimg}">
+          </div>
+          <div class="code-push"><i class="icon-login-bg icon-w-25 icon-push">刷新</i><span class="code-tip"></span></div>
+        </div>
+        <div class="code-btn">
+          <div class="code-btn-img code-btn-m"></div>
+          <span class="code-span">按住滑块，拖动完成上方拼图</span>
+        </div>
+      </div>
+    </div>`;
+    this.destory()
+    const div = document.createElement('div');
+    div.className = 'slide-container';
+    div.innerHTML = html;
+    document.body.appendChild(div);
+    this.maskDom = document.querySelector('.code-mask');
+    this.moveBtnDom = document.querySelector('.code-btn-m');
+    this.moveWrapDom = document.querySelector('.code-btn');
+    this.refreshDom = document.querySelector('.code-push');
+    this.tipDom = document.querySelector('.code-tip');
+    this.bgDom = document.querySelector('.code_bg')
+    this.body = document.body
+    this.initEvent();
+  }
+  initEvent() {
+    this.refreshDom.addEventListener('click', () => {
+      this.opts.refreshcallback();
+    });
+    this.moveBtnDom.addEventListener('mousedown', (event) => {
+      const e = event || window.event;
+      this.offset = {
+        x: e.pageX,
+        y: e.pageY,
+      };
+      this.moving = true;
+      this.moveBtnDom.className += ' active';
+    });
+    this.body.addEventListener('mousemove', (event) => {
+      if (!this.moving) {
+        return;
+      }
+      const e = event || window.event;
+      let disX = e.pageX - this.offset.x;
+      if (disX < 0) {
+        disX = 0;
+      } else if (disX > 245) {
+        disX = 245;
+      }
+      this.disX = disX;
+      this.moveBtnDom.style.left = `${disX + 10}px`;
+      this.maskDom.style.left = `${disX}px`;
+    });
+    this.body.addEventListener('mouseup', (event) => {
+      this.moveEnd(event);
+    });
+    // this.moveWrapDom.addEventListener('mouseleave', (event) => {
+    //   this.moveEnd(event);
+    // });
+    this.bgDom.addEventListener('click',()=>{
+      if (this.moving) {
+        return;
+      }
+      this.destory()
+    })
+  }
+  moveEnd() {
+    if (!this.moving) {
+      return;
+    }
+    this.offset = { x: 0, y: 0 };
+    this.moving = false;
+    this.moveBtnDom.className = this.moveBtnDom.className.replace(' active', '');
+    this.moveBtnDom.removeEventListener('mousemove', () => {});
+    this.opts.callback({
+      xpos: parseInt(this.disX),
+      capcode: this.opts.capcode,
+      image_valid_type: 'slide_image',
+    });
+  }
+  showTips(bool) {
+    const obj = {
+      true: { name: '验证通过', color: 'green' },
+      false: { name: '验证不通过', color: 'red' },
+    };
+    this.tipDom.innerHTML = obj[bool].name;
+    this.tipDom.style.color = obj[bool].color;
+  }
+  destory(){
+    if (document.querySelector('.slide-container')) {
+      document.body.removeChild(document.querySelector('.slide-container'));
+    }
+  }
+}

package/packages/slidecode/js/slidecodeMobile.js ADDED Viewed

@@ -0,0 +1,122 @@
+export default class SlideCode {
+  constructor(options) {
+    const defaults = {
+      frontimg: '',
+      backimg: '',
+      callback: '',
+      refreshcallback: '',
+      yHeight: 1,
+    };
+    this.opts = { ...defaults, ...options };
+    this.offset = { x: 0, y: 0 };
+    this.disX = 0;
+    this.moving = false;
+    this.init();
+  }
+  init() {
+    const html = `
+    <div class="code-k-div">
+      <div class="code_bg"></div>
+      <div class="code-con">
+        <div class="code-img">
+          <div class="code-img-con">
+            <div class="code-mask" style="margin-top:${this.opts.yHeight}px"><img class="code-front-img" src="${this.opts.frontimg}"></div>
+            <img class="code-back-img" src="${this.opts.backimg}">
+          </div>
+          <div class="code-push"><i class="icon-login-bg icon-w-25 icon-push">刷新</i><span class="code-tip"></span></div>
+        </div>
+        <div class="code-btn">
+          <div class="code-btn-img code-btn-m"></div>
+          <span class="code-span">按住滑块，拖动完成上方拼图</span>
+        </div>
+      </div>
+    </div>`;
+    this.destory()
+    const div = document.createElement('div');
+    div.className = 'slide-container';
+    div.innerHTML = html;
+    document.body.appendChild(div);
+    this.maskDom = document.querySelector('.code-mask');
+    this.moveBtnDom = document.querySelector('.code-btn-m');
+    this.moveWrapDom = document.querySelector('.code-btn');
+    this.refreshDom = document.querySelector('.code-push');
+    this.tipDom = document.querySelector('.code-tip');
+    this.bgDom = document.querySelector('.code_bg')
+    this.initEvent();
+  }
+  initEvent() {
+    this.refreshDom.addEventListener('click', () => {
+      this.opts.refreshcallback();
+    });
+    this.moveBtnDom.addEventListener('touchstart', (event) => {
+      let e = event || window.event;
+      e= e.targetTouches[0]
+      this.offset = {
+        x: e.pageX,
+        y: e.pageY,
+      };
+      this.moving = true;
+      this.moveBtnDom.className += ' active';
+    });
+    this.moveBtnDom.addEventListener('touchmove', (event) => {
+      if (!this.moving) {
+        return;
+      }
+      let e = event || window.event;
+      e= e.targetTouches[0]
+      let disX = e.pageX - this.offset.x;
+      if (disX < 0) {
+        disX = 0;
+      } else if (disX > 245) {
+        disX = 245;
+      }
+      this.disX = disX;
+      this.moveBtnDom.style.left = `${disX + 10}px`;
+      this.maskDom.style.left = `${disX}px`;
+    });
+    this.moveBtnDom.addEventListener('touchend', (event) => {
+      this.moveEnd(event);
+    });
+    this.moveWrapDom.addEventListener('mouseleave', (event) => {
+      this.moveEnd(event);
+    });
+    this.bgDom.addEventListener('click',()=>{
+      if (this.moving) {
+        return;
+      }
+      this.destory()
+    })
+  }
+  moveEnd() {
+    if (!this.moving) {
+      return;
+    }
+    this.offset = { x: 0, y: 0 };
+    this.moving = false;
+    this.moveBtnDom.className = this.moveBtnDom.className.replace(' active', '');
+    this.moveBtnDom.removeEventListener('mousemove', () => {});
+    this.opts.callback({
+      xpos: parseInt(this.disX),
+      capcode: this.opts.capcode,
+      image_valid_type: 'slide_image',
+    });
+  }
+  showTips(bool) {
+    const obj = {
+      true: { name: '验证通过', color: 'green' },
+      false: { name: '验证不通过', color: 'red' },
+    };
+    this.tipDom.innerHTML = obj[bool].name;
+    this.tipDom.style.color = obj[bool].color;
+  }
+  destory(){
+    if (document.querySelector('.slide-container')) {
+      document.body.removeChild(document.querySelector('.slide-container'));
+    }
+  }
+}

package/packages/slidecode/js/utils.js ADDED Viewed

@@ -0,0 +1,17 @@
+const isMobile = ()=> {
+  var sUserAgent = navigator.userAgent.toLowerCase();
+  var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
+  var bIsIphoneOs = sUserAgent.match(/iphone os/i) == 'iphone os';
+  var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
+  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
+  var bIsUc = sUserAgent.match(/ucweb/i) == 'ucweb';
+  var bIsAndroid = sUserAgent.match(/android/i) == 'android';
+  var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
+  var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
+  if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
+    return true;
+  }
+  return false;
+}
+export { isMobile }

package/public/favicon.ico ADDED Viewed

Binary file

package/public/index.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<script src="./rsa/jsencrypt.min.js"></script>
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+      Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+</html>