持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情
概述
图片滑动插件是现在很常见的一种验证方式，体验方式很好。
主要是为了证明你是个人而不是机器操作的电脑，顺便降低一下你的登录频率。具体而言都是使用 Canvas 绘画。
目前有两种方案，一种是需要后端介入，在前端根据拖拽滑块的移动距离传递到后端进行校验，另一种是前端自行实现，不需要后端参与，随机截取滑块的位置距离进行校验，我们这里介绍的是第二种方式。
项目开始
首先我们新建一个项目，执行如下命令
pnpm create vite vue-slideVerify
选择 vue ，接着选择 vue-ts ，回车，等待项目安装完成， cd 进入项目根目录下，接着安装项目需要的依赖包
pnpm install
安装完成后，我们启动项目
pnpm run dev
控制台输出如下内容
vite v2.9.10 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 353ms.
说明项目正常启动了，下面我们接着开发
项目正式开发前，我们先来安装下 sass sass-loader, 在终端中执行如下命令
pnpm install sass sass-loader -D
接着我们新建一个文件 src/styles/global.scss
在 vite.config.ts 文件中添加如下内容
...
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "./src/styles/global.scss";',
},
},
},
...
删除多余的代码,新建一个组件 src/components/slideVerify.vue, 并将组件引入到 App.vue
- App.vue
<template>
<SlideVerify />
</template>
<script setup lang="ts">
import SlideVerify from './components/slideVerify.vue'
</script>
- slideVerify.vue
<template>
<div class="slide-verify"></div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
</style>
