preface

Hello, everyone, I am Six six. I used someone else’s slide verification component in my previous project, a bit of Chuck’s, but luckily I’ll write one myself. I’ll share it with you today. At present, it is only about the first version, and there may be deficiencies in all aspects. We will try our best to put forward suggestions and strive for the most perfect ha ha. So the first plate is to update the class capacity, please pay attention to it, a lot of support.

demo

Success:

Failure:

Too many failures:

Initialization:

Directory:

  • Updated content and version
  • Installation and use
  • Problems encountered
  • Open source plugin and upload NPM
  • The content will be updated in the next version
  • conclusion

1. Updated Content and version:

The version number:

V - 0.0.1Copy the code

Last Updated:

2020.7.28
Copy the code

Update the content

Realize the sliding verification function.Copy the code

2. Installation and use:

Installation:

npm install huakuai-vue --save
Copy the code

The main use js:

import huakuai from 'huakuai-vue'
Vue.use(huakuai)
Copy the code

Global can be used, do not need to register

<hua-kuai></hua-kuai>
Copy the code

Event parameters:

The event name type describe
verify The event Determine whether the user has passed the sliding authentication, true if it succeeds, false if it fails three times
refresh The event The user failed to click the initialization button three times

Example:

<template>
  <div class=' '>
    <hua-kuai @verify='verify' @refresh='refresh'></hua-kuai>
  </div>
</template>
<script>
// import huakuai from './components/huakuai'
exportDefault {// components:{// huakuai //} methods:{verify(result){console.log(result) // result istrueIndicates that the verification passes,falseThis means that the verification failed three times.refresh(){
      console.log('User clicked on initialization')
    }
  }
}
</script>
<style scoped>

</style>
Copy the code

3. Problems encountered:

1. The problem of obtaining coordinate values

Initially, offsetLeft was used to determine the coordinates and offsets, but there were bugs with offsets of 0 from time to time, which were successfully resolved using ClientX.Copy the code

2. Click the picture and drag effect will occur

Add an attribute to the img tag: ondragStart ="return false;"
Copy the code

3. Double-click the text twice to select it

document.onselectstart=()=> false
Copy the code

4. The implementation principle is actually quite simple

At the beginning, CANVAS technology was used to write this project, and various coordinate values were calculated. At the end, the design was still ugly, until one day, it was found that it could be realized by superimposing two photos.Copy the code

How to open source and upload NPM:

Portal:Vue-loading plug-in development + NPM deployment

4. Update content in the next version

1. UI optimization 2. Mobile pictures can be customized 3. Delete watermark 5. Compatible with mobile phonesCopy the code

5. To summarize

The next version should be perfect, is also a relatively big change, we support it. Use the problem, timely message, I will be the first time to solve. Open source is my hobby, 66 will stick to it, to pay attention to bai ~Copy the code