使用konva和vue-konva庫實現(xiàn)拖拽滑塊驗證功能

更新時間：2020年04月27日 11:54:00 作者：小朱葛

這篇文章主要介紹了使用konva和vue-konva完成前端拖拽滑塊驗證功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1. 在vue項目中安裝konva和vue-konva庫

npm install konva vue-konva --save-dev

2. 引入vue-konva庫

import VueKonva from ‘vue-konva'；

Vue.use(VueKonva)

3. 創(chuàng)建單獨的滑塊驗證組件 Captcha.vue，在相應(yīng)的頁面中引入使用即可

<template>
 <v-stage :config="Config.stage">
  <v-layer ref="layer">
   <!-- 背景組 -->
   <v-group :config="Config.group">
    <v-rect :config="Config.rect"></v-rect>
    <v-text :config="Config.text"></v-text>
   </v-group>
   <!-- 遮罩層組 -->
   <v-group :config="Config.group">
    <v-rect :config="Config.coverRect" ref="coverRect"></v-rect>
    <v-text :config="Config.coverText" v-if="success" ref="coverText"></v-text>
   </v-group>
   <!-- 滑塊組 -->
   <v-group :config="Config.moveGroup" ref="moveGroup" @mouseover="moveGroupMouseOver" @mouseout="moveGroupMouseOut" @mousedown="moveGroupMouseDown" @mouseup="moveGroupStop">
    <v-rect :config="Config.moveRect" ref="moveRect"></v-rect>
    <!-- 驗證成功組 -->
    <v-group :config="Config.group" v-if="success">
     <v-circle :config="Config.succCircle" ref="succCircle"></v-circle>
     <v-line :config="Config.succLine"></v-line>
    </v-group>
    <v-group :config="Config.moveGroup_l" v-else>
     <v-line :config="Config.moveLine1"></v-line>
     <v-line :config="Config.moveLine2"></v-line>
    </v-group>
   </v-group>
  </v-layer>
 </v-stage>
</template>
<script>
/*
 * captchaConfig // 屬性 {width：330, height: 36} 組件的寬高
 * eventCaptcha  // 驗證成功的回調(diào)
 */
let _$mouseDown = false; // 鼠標(biāo)是否在滑塊組中按下，因為和html沒有綁定，所以沒有放在data中，并以_$開頭
export default {
 props: {
  captchaConfig: {
   type: Object,
   default: () => ({
    width: 330, // 寬度
    height: 36, // 高度
   }),
  },
 },
 data() {
  const { width, height } = this.captchaConfig;
  let Config = {
   stage: {
    width: width,
    height: height,
   },
   group: {
    x: 0,
    y: 0,
   },
   rect: {
    width: width,
    height: height,
    fill: '#e8e8e8',
   },
   text: {
    x: 0,
    y: 0,
    width: width,
    height: height,
    text: '請按住滑塊，拖動到最右邊',
    fontSize: 14,
    fontFamily: '微軟雅黑',
    align: 'center',
    lineHeight: parseFloat(height / 14),
   },
   //滑塊組
   moveGroup: {
    draggable: true,
   },
   moveRect: {
    x: 0.5,
    y: 0.5,
    width: height - 1,
    height: height - 1,
    fill: '#fff',
    stroke: '#8d92a1',
    strokeWidth: 1,
   },
   moveGroup_l: {
    x: height / 3,
    y: height / 3,
   },
   moveLine1: {
    x: 0,
    y: 0,
    points: [0, 0, height / 6, height / 6, 0, height / 3],
    stroke: '#8d92a1',
    strokeWidth: 1,
    lineCap: 'round',
    lineJoin: 'round',
   },
   moveLine2: {
    x: height / 6,
    y: 0,
    points: [0, 0, height / 6, height / 6, 0, height / 3],
    stroke: '#8d92a1',
    strokeWidth: 1,
    lineCap: 'round',
    lineJoin: 'round',
   },
   //創(chuàng)建遮罩層組
   coverRect: {
    width: height / 2,
    height: height,
    fill: '#8d92a1',
    opacity: 0.8,
   },
   coverText: {
    x: 0,
    y: 0,
    width: width - height,
    height: height,
    align: 'center',
    text: '驗證成功',
    fontSize: 14,
    fontFamily: '微軟雅黑',
    fontStyle: 'bold',
    fill: '#fff',
    lineHeight: parseFloat(height / 14),
   },
   //驗證成功組
   succCircle: {
    x: height / 2,
    y: height / 2,
    radius: height / 4,
    fill: '#8d92a1',
   },
   succLine: {
    points: [height / 2 - height / 4 / 2, height / 2, height / 2 - height / 4 / 8, height / 2 + height / 4 / 2, height / 2 + height / 4 / 2, height / 2 - height / 4 / 2],
    stroke: '#fff',
    strokeWidth: 1,
    lineCap: 'round',
    lineJoin: 'round',
   },
  };
  return {
   Config,
   success: 0, // 標(biāo)記是否驗證成功 0 失敗 1 成功
  };
 },
 mounted() {
  // 給document綁定鼠標(biāo)抬起事件
  document.addEventListener('mouseup', this.moveGroupStop);
  // 在組件注銷的時候取消綁定
  this.$once('hook:beforeDestroy', () => {
   document.removeEventListener('mouseup', this.moveGroupStop);
  });
  // 給滑塊組綁定拖拽監(jiān)聽
  this.$refs.moveGroup.getNode().dragBoundFunc((pos) => {
   const { width, height } = this.captchaConfig;
   let moveGroup = this.$refs.moveGroup.getNode();
   let moveRect = this.$refs.moveRect.getNode();
   let coverRect = this.$refs.coverRect.getNode();
 
   let moveX = moveGroup.getAttrs().x ? moveGroup.getAttrs().x : 0;
   coverRect.width(moveX + height / 2);
   if (pos.x >= width - height) {
    if (this.success == 0) {
     this.success = 1;
     this.$emit('eventCaptcha');
    }
    coverRect.opacity(1);
   }
   if (this.success == 0) {
    if (pos.x < 0) {
     return {
      x: 0,
      y: moveGroup.getAbsolutePosition().y,
     };
    } else if (pos.x > width - height) {
     return {
      x: width - height,
      y: moveGroup.getAbsolutePosition().y,
     };
    } else {
     return {
      x: pos.x,
      y: moveGroup.getAbsolutePosition().y,
     };
    }
   } else {
    return {
     x: width - height,
     y: moveGroup.getAbsolutePosition().y,
    };
   }
  });
 },
 methods: {
  // 鼠標(biāo)進入滑塊組
  moveGroupMouseOver() {
   document.body.style.cursor = 'pointer';
  },
  // 鼠標(biāo)移出滑塊組
  moveGroupMouseOut() {
   document.body.style.cursor = 'default';
  },
  // 鼠標(biāo)按下
  moveGroupMouseDown() {
   _$mouseDown = true; // 只有在滑塊組點擊鼠標(biāo)才被視作要點擊滑動驗證
  },
  // 鼠標(biāo)抬起
  moveGroupStop(e) {
   if (!_$mouseDown) return;
   _$mouseDown = false;
   document.body.style.cursor = 'default'; // 鼠標(biāo)恢復(fù)指針狀態(tài)
   if (this.success == 0) {
    this.$refs.moveGroup.getNode().to({
     x: 0,
     duration: 0.3,
    });
    this.$refs.coverRect.getNode().to({
     width: this.captchaConfig.height / 2,
     duration: 0.3,
    });
   }
  },
 },
};
</script>

4. 最終效果