Vue+Element-Ui手写登录滑动验证码

原创

草长莺飞飞满天 2022-06-20 22:54:07 博主文章分类：vue ©著作权

©著作权归作者所有：来自51CTO博客作者草长莺飞飞满天的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.vue模块采用el-dialog样式做修改

12345678910111213141516171819202122232425262728	`<!-- 滑动验证码模块 -->` `<``el-dialog``:show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="imgCode.dialogVisible" width="450px" top="25vh">` `<``div``slot="title">` `<``span``class="dialog-title">请滑动验证码进行验证</``span``>` `<``span``style="float:right;margin-top: -3px;">` `<``el-button``icon="el-icon-refresh" title="刷新验证码" circle type="success" @click="getImg" />` `<``el-button``icon="el-icon-close" title="关闭验证" circle type="danger" @click="closeDialog" />` `</``span``>` `</``div``>` `<``div``style="position:relative;top:0;">` `<``img``ref="bgImg" :src="imgCode.bigImg" alt="" class="bigImg">` `<``img` `ref="sliderImg"` `:src="imgCode.smallImg"` `alt=""` `class="smallImg"` `:style="{ top: imgCode.positionY+'px' }"` `@mousedown="(e)=>moveBtn(e,2)"` `>` `</``div``>` `<``div``slot="footer" class="dialog-footer">` `<``div``class="slider-box">` `<``span``class="slider-text">向右滑动滑块填充拼图</``span``>` `<``button``ref="btnImg" class="slider-icon" @mousedown="(e)=>moveBtn(e,1)">>></``button``>` `</``div``>` `</``div``>` `</``el-dialog``>`

2.样式部分scss代码

　　1.弹窗自定义部分以及图片样式

12345678910111213141516171819202122232425262728293031323334353637	`.el-dialog__body {` `padding``:` `10px``5px``!important``;` `.bigImg{` `width``:` `439px``;` `height``:` `280px``;` `border-radius:` `5px``;` `}` `.smallImg{` `width``:` `60px``;` `height``:` `60px``;` `position``:` `absolute``;` `//``top``:` `38%``;` `left``:` `1%``;` `border-radius:` `2px``;` `// box-shadow:` `5px``5px``10px``#696969``;` `//` `border``:``1px``solid``#ccc``;` `cursor``:` `pointer``;` `}` `}` `.el-button--``small``.is-``circle``{` `padding``:` `5px``;` `}` `.dialog-title {` `font-size``:` `15px``;` `color``:``#2b3f57``;` `text-align``:` `left``;` `font-weight``:` `600``;` `}` `.el-dialog__footer {` `padding``:` `0px``12px``14px``0px``!important``;` `}` `.el-dialog__headerbtn {` `top``:` `15px``!important``;` `}` `.el-dialog__header {` `padding-bottom``:` `5px``;` `}`

　　2.滑块样式

12345678910111213141516171819202122232425262728293031323334353637	`.slider-box {` `background``:` `#f7f9fa``;` `color``: $light_gray;` `border``:` `1px``solid``#e4e7eb``;` `position``:` `relative``;` `height``:` `45px``;` `width``:` `100%``;` `margin``:``0``0``0``6px``;` `border-radius:` `5px``;` `&:hover {` `box-shadow:` `0``0``2px``$btnHover;` `}` `.slider-text {` `font-size``:` `14px``;` `position``:` `absolute``;` `top``:` `50%``;` `left``:` `50%``;` `transform: translate(``-50%``,` `-50%``);` `}` `.slider-``icon``{` `position``:` `relative``;` `top``:``0``;` `left``:``0``;` `width``:` `54px``;` `height``:` `44px``;` `line-height``:` `25px``;` `background``: $btn;` `text-align``:` `center``;` `font-size``:` `17px``;` `color``:` `#fff``;` `cursor``:` `pointer``;` `outline``:` `none``;` `border``:` `1px``solid``$btn;` `float``:` `left``;` `border-radius:` `5px``;` `}` `}`

　3.vue-js滑动相关代码

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162	`// 滑动滑块` `moveBtn(e, key) {` `const ele = e.target` `// 获取事件触发元素` `const startX = e.clientX` `// 鼠标相对于浏览器窗口可视区域的X坐标（窗口坐标），可视区域不包括工具栏和滚动条。` `const eleWidth = ele.offsetWidth` `// 元素的布局宽度` `const parentWidth =` `this``.$refs.bgImg.offsetWidth` `// 父元素的布局宽度 ---可用大图片的宽度` `const MaxX = parentWidth - eleWidth` `// 可滑动的最大距离` `if``(key === 1) {` `this``.$refs.sliderImg.style.transition =` `''``// 初始清空小图片动画` `}` `else``{` `this``.$refs.btnImg.style.transition =` `''``// 初始清空小图片动画` `}` `ele.style.transition =` `''``// 初始清空滑块动画` `document.onmousemove = (e) => {` `// 鼠标开始滑动事件` `const endX = e.clientX` `// 滑动过程中鼠标相对于窗口的坐标` `this``.disX = endX - startX` `// 鼠标的滑动距离` `if``(key === 1) {` `this``.$refs.sliderImg.style.left =` `this``.disX +` `'px'``// 小图片的滑动距离` `}` `else``{` `this``.$refs.btnImg.style.left =` `this``.disX +` `'px'` `}` `if``(``this``.disX <= 0) {` `// 滑动距离小于0，重置位置` `this``.disX = 0` `if``(key === 1) {` `this``.$refs.sliderImg.style.left = 0` `}` `else``{` `this``.$refs.btnImg.style.left = 0` `}` `}` `if``(``this``.disX >= MaxX) {` `// 减去滑块的宽度,体验效果更好---》最大滑动距离减去滑块宽度便是真正的滑动距离` `this``.disX = MaxX` `if``(key === 1) {` `this``.$refs.sliderImg.style.left = (parentWidth -` `this``.$refs.sliderImg.width) +` `'px'` `}` `else``{` `this``.$refs.btnImg.style.left = (parentWidth -` `this``.$refs.sliderImg.width) +` `'px'` `}` `}` `ele.style.transform =` `'translateX('``+` `this``.disX +` `'px)'``// 加横向动画` `e.preventDefault()` `// 取消默认事件` `}` `document.onmouseup = () => {` `if``(``this``.loginTypeFlag ===` `'login'``) {` `this``.loginInterface()` `// 登陆调用` `}` `else``{` `this``.getSendCode()` `// 获取验证码` `}` `ele.style.transition =` `'.4s ease'``// 初始化滑块位置` `ele.style.transform =` `'translateX(0)'` `// 清除滑动事件` `document.onmousemove =` `null` `document.onmouseup =` `null` `if``(key === 1) {` `// 鼠标松开复原小图片` `this``.$refs.sliderImg.style.left =` `'1%'` `this``.$refs.sliderImg.style.top =` `this``.imgCode.positionY` `this``.$refs.sliderImg.style.transition =` `'0.4s ease'` `}` `else``{` `this``.$refs.btnImg.style.left =` `'0'` `this``.$refs.btnImg.style.transition =` `'0.4s ease'` `}` `}` `}`

　　以上便是完整滑动验证码代码

1.vue模块采用el-dialog样式做修改

12345678910111213141516171819202122232425262728	`<!-- 滑动验证码模块 -->` `<``el-dialog``:show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="imgCode.dialogVisible" width="450px" top="25vh">` `<``div``slot="title">` `<``span``class="dialog-title">请滑动验证码进行验证</``span``>` `<``span``style="float:right;margin-top: -3px;">` `<``el-button``icon="el-icon-refresh" title="刷新验证码" circle type="success" @click="getImg" />` `<``el-button``icon="el-icon-close" title="关闭验证" circle type="danger" @click="closeDialog" />` `</``span``>` `</``div``>` `<``div``style="position:relative;top:0;">` `<``img``ref="bgImg" :src="imgCode.bigImg" alt="" class="bigImg">` `<``img` `ref="sliderImg"` `:src="imgCode.smallImg"` `alt=""` `class="smallImg"` `:style="{ top: imgCode.positionY+'px' }"` `@mousedown="(e)=>moveBtn(e,2)"` `>` `</``div``>` `<``div``slot="footer" class="dialog-footer">` `<``div``class="slider-box">` `<``span``class="slider-text">向右滑动滑块填充拼图</``span``>` `<``button``ref="btnImg" class="slider-icon" @mousedown="(e)=>moveBtn(e,1)">>></``button``>` `</``div``>` `</``div``>` `</``el-dialog``>`

2.样式部分scss代码

　　1.弹窗自定义部分以及图片样式

12345678910111213141516171819202122232425262728293031323334353637	`.el-dialog__body {` `padding``:` `10px``5px``!important``;` `.bigImg{` `width``:` `439px``;` `height``:` `280px``;` `border-radius:` `5px``;` `}` `.smallImg{` `width``:` `60px``;` `height``:` `60px``;` `position``:` `absolute``;` `//``top``:` `38%``;` `left``:` `1%``;` `border-radius:` `2px``;` `// box-shadow:` `5px``5px``10px``#696969``;` `//` `border``:``1px``solid``#ccc``;` `cursor``:` `pointer``;` `}` `}` `.el-button--``small``.is-``circle``{` `padding``:` `5px``;` `}` `.dialog-title {` `font-size``:` `15px``;` `color``:``#2b3f57``;` `text-align``:` `left``;` `font-weight``:` `600``;` `}` `.el-dialog__footer {` `padding``:` `0px``12px``14px``0px``!important``;` `}` `.el-dialog__headerbtn {` `top``:` `15px``!important``;` `}` `.el-dialog__header {` `padding-bottom``:` `5px``;` `}`

　　2.滑块样式

12345678910111213141516171819202122232425262728293031323334353637	`.slider-box {` `background``:` `#f7f9fa``;` `color``: $light_gray;` `border``:` `1px``solid``#e4e7eb``;` `position``:` `relative``;` `height``:` `45px``;` `width``:` `100%``;` `margin``:``0``0``0``6px``;` `border-radius:` `5px``;` `&:hover {` `box-shadow:` `0``0``2px``$btnHover;` `}` `.slider-text {` `font-size``:` `14px``;` `position``:` `absolute``;` `top``:` `50%``;` `left``:` `50%``;` `transform: translate(``-50%``,` `-50%``);` `}` `.slider-``icon``{` `position``:` `relative``;` `top``:``0``;` `left``:``0``;` `width``:` `54px``;` `height``:` `44px``;` `line-height``:` `25px``;` `background``: $btn;` `text-align``:` `center``;` `font-size``:` `17px``;` `color``:` `#fff``;` `cursor``:` `pointer``;` `outline``:` `none``;` `border``:` `1px``solid``$btn;` `float``:` `left``;` `border-radius:` `5px``;` `}` `}`

　3.vue-js滑动相关代码

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162	`// 滑动滑块` `moveBtn(e, key) {` `const ele = e.target` `// 获取事件触发元素` `const startX = e.clientX` `// 鼠标相对于浏览器窗口可视区域的X坐标（窗口坐标），可视区域不包括工具栏和滚动条。` `const eleWidth = ele.offsetWidth` `// 元素的布局宽度` `const parentWidth =` `this``.$refs.bgImg.offsetWidth` `// 父元素的布局宽度 ---可用大图片的宽度` `const MaxX = parentWidth - eleWidth` `// 可滑动的最大距离` `if``(key === 1) {` `this``.$refs.sliderImg.style.transition =` `''``// 初始清空小图片动画` `}` `else``{` `this``.$refs.btnImg.style.transition =` `''``// 初始清空小图片动画` `}` `ele.style.transition =` `''``// 初始清空滑块动画` `document.onmousemove = (e) => {` `// 鼠标开始滑动事件` `const endX = e.clientX` `// 滑动过程中鼠标相对于窗口的坐标` `this``.disX = endX - startX` `// 鼠标的滑动距离` `if``(key === 1) {` `this``.$refs.sliderImg.style.left =` `this``.disX +` `'px'``// 小图片的滑动距离` `}` `else``{` `this``.$refs.btnImg.style.left =` `this``.disX +` `'px'` `}` `if``(``this``.disX <= 0) {` `// 滑动距离小于0，重置位置` `this``.disX = 0` `if``(key === 1) {` `this``.$refs.sliderImg.style.left = 0` `}` `else``{` `this``.$refs.btnImg.style.left = 0` `}` `}` `if``(``this``.disX >= MaxX) {` `// 减去滑块的宽度,体验效果更好---》最大滑动距离减去滑块宽度便是真正的滑动距离` `this``.disX = MaxX` `if``(key === 1) {` `this``.$refs.sliderImg.style.left = (parentWidth -` `this``.$refs.sliderImg.width) +` `'px'` `}` `else``{` `this``.$refs.btnImg.style.left = (parentWidth -` `this``.$refs.sliderImg.width) +` `'px'` `}` `}` `ele.style.transform =` `'translateX('``+` `this``.disX +` `'px)'``// 加横向动画` `e.preventDefault()` `// 取消默认事件` `}` `document.onmouseup = () => {` `if``(``this``.loginTypeFlag ===` `'login'``) {` `this``.loginInterface()` `// 登陆调用` `}` `else``{` `this``.getSendCode()` `// 获取验证码` `}` `ele.style.transition =` `'.4s ease'``// 初始化滑块位置` `ele.style.transform =` `'translateX(0)'` `// 清除滑动事件` `document.onmousemove =` `null` `document.onmouseup =` `null` `if``(key === 1) {` `// 鼠标松开复原小图片` `this``.$refs.sliderImg.style.left =` `'1%'` `this``.$refs.sliderImg.style.top =` `this``.imgCode.positionY` `this``.$refs.sliderImg.style.transition =` `'0.4s ease'` `}` `else``{` `this``.$refs.btnImg.style.left =` `'0'` `this``.$refs.btnImg.style.transition =` `'0.4s ease'` `}` `}` `}`