1.vue模块采用el-dialog样式做修改
12345678910111213141516171819202122232425262728
​    ​ ​<< code>​​<code class="html keyword">​el-dialog​</code>​​<code class="html plain">​:show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="imgCode.dialogVisible" width="450px" top="25vh">​</code>​​<code class="html spaces">​      ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​div​</code>​​<code class="html plain">​slot="title">​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​span​</code>​​<code class="html plain">​class="dialog-title">请滑动验证码进行验证​​<code class="html keyword">​span​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​span​</code>​​<code class="html plain">​style="float:right;margin-top: -3px;">​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​el-button​</code>​​<code class="html plain">​icon="el-icon-refresh" title="刷新验证码" circle type="success" @click="getImg" />​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​el-button​</code>​​<code class="html plain">​icon="el-icon-close" title="关闭验证" circle type="danger" @click="closeDialog" />​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​​​<code class="html keyword">​span​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​      ​</code>​​<code class="html plain">​​​<code class="html keyword">​div​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​      ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​div​</code>​​<code class="html plain">​style="position:relative;top:0;">​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​img​</code>​​<code class="html plain">​ref="bgImg" :src="imgCode.bigImg" alt="" class="bigImg">​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​img​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​ref="sliderImg"​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​:src="imgCode.smallImg"​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​alt=""​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​class="smallImg"​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​:style="{ top: imgCode.positionY+'px' }"​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​@mousedown="(e)=>moveBtn(e,2)"​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​      ​</code>​​<code class="html plain">​​​<code class="html keyword">​div​</code>​​<code class="html plain">​>​</code>​</code><!--<--></code><!--<--></code><!--<--></code></code></code><!--<--></code><!--<--></code><!--<--></code></code><!--<--></code><!--<--></code><!--<-->
​      ​ ​<< code>​​<code class="html keyword">​div​</code>​​<code class="html plain">​slot="footer" class="dialog-footer">​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​div​</code>​​<code class="html plain">​class="slider-box">​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​span​</code>​​<code class="html plain">​class="slider-text">向右滑动滑块填充拼图​​<code class="html keyword">​span​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​button​</code>​​<code class="html plain">​ref="btnImg" class="slider-icon" @mousedown="(e)=>moveBtn(e,1)">>>​​<code class="html keyword">​button​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​​​<code class="html keyword">​div​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​      ​</code>​​<code class="html plain">​​​<code class="html keyword">​div​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​    ​</code>​​<code class="html plain">​​​<code class="html keyword">​el-dialog​</code>​​<code class="html plain">​>​</code>​</code></code></code></code><!--<--></code></code><!--<--></code><!--<--></code><!--<-->
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 ​ ​     ​ ​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) { < code>​​​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.disX = 0​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​if​</code>​​<code class="javascript plain">​(key === 1) {​</code>​​<code class="javascript spaces">​           ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.style.left = 0​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript plain">​} ​</code>​​<code class="javascript keyword">​else​</code>​​<code class="javascript plain">​{​</code>​​<code class="javascript spaces">​           ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.btnImg.style.left = 0​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript keyword">​if​</code>​​<code class="javascript plain">​(​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.disX >= MaxX) { ​</code>​​​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.disX = MaxX​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​if​</code>​​<code class="javascript plain">​(key === 1) {​</code>​​<code class="javascript spaces">​           ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.style.left = (parentWidth - ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.width) + ​</code>​​<code class="javascript string">​'px'​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript plain">​} ​</code>​​<code class="javascript keyword">​else​</code>​​<code class="javascript plain">​{​</code>​​<code class="javascript spaces">​           ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.btnImg.style.left = (parentWidth - ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.width) + ​</code>​​<code class="javascript string">​'px'​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​ele.style.transform = ​</code>​​<code class="javascript string">​'translateX('​</code>​​<code class="javascript plain">​+ ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.disX + ​</code>​​<code class="javascript string">​'px)'​</code>​​​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​e.preventDefault() ​</code>​​​​<code class="javascript spaces">​     ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​     ​</code>​​<code class="javascript plain">​document.onmouseup = () => {​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript keyword">​if​</code>​​<code class="javascript plain">​(​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.loginTypeFlag === ​</code>​​<code class="javascript string">​'login'​</code>​​<code class="javascript plain">​) {​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.loginInterface() ​</code>​​​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​} ​</code>​​<code class="javascript keyword">​else​</code>​​<code class="javascript plain">​{​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.getSendCode() ​</code>​​​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​ele.style.transition = ​</code>​​<code class="javascript string">​'.4s ease'​</code>​​​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​ele.style.transform = ​</code>​​<code class="javascript string">​'translateX(0)'​</code>​​<code class="javascript spaces">​       ​</code>​​​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​document.onmousemove = ​</code>​​<code class="javascript keyword">​null​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​document.onmouseup = ​</code>​​<code class="javascript keyword">​null​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript keyword">​if​</code>​​<code class="javascript plain">​(key === 1) {​</code>​​<code class="javascript spaces">​         ​</code>​​​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.style.left = ​</code>​​<code class="javascript string">​'1%'​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.style.top = ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.imgCode.positionY​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.style.transition = ​</code>​​<code class="javascript string">​'0.4s ease'​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​} ​</code>​​<code class="javascript keyword">​else​</code>​​<code class="javascript plain">​{​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.btnImg.style.left = ​</code>​​<code class="javascript string">​'0'​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.btnImg.style.transition = ​</code>​​<code class="javascript string">​'0.4s ease'​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​     ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​   ​</code>​​<code class="javascript plain">​}​</code>​<!--=-->
以上便是完整滑动验证码代码
1.vue模块采用el-dialog样式做修改
12345678910111213141516171819202122232425262728
​    ​ ​<< code>​​<code class="html keyword">​el-dialog​</code>​​<code class="html plain">​:show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="imgCode.dialogVisible" width="450px" top="25vh">​</code>​​<code class="html spaces">​      ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​div​</code>​​<code class="html plain">​slot="title">​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​span​</code>​​<code class="html plain">​class="dialog-title">请滑动验证码进行验证​​<code class="html keyword">​span​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​span​</code>​​<code class="html plain">​style="float:right;margin-top: -3px;">​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​el-button​</code>​​<code class="html plain">​icon="el-icon-refresh" title="刷新验证码" circle type="success" @click="getImg" />​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​el-button​</code>​​<code class="html plain">​icon="el-icon-close" title="关闭验证" circle type="danger" @click="closeDialog" />​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​​​<code class="html keyword">​span​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​      ​</code>​​<code class="html plain">​​​<code class="html keyword">​div​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​      ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​div​</code>​​<code class="html plain">​style="position:relative;top:0;">​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​img​</code>​​<code class="html plain">​ref="bgImg" :src="imgCode.bigImg" alt="" class="bigImg">​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​img​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​ref="sliderImg"​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​:src="imgCode.smallImg"​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​alt=""​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​class="smallImg"​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​:style="{ top: imgCode.positionY+'px' }"​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​@mousedown="(e)=>moveBtn(e,2)"​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​      ​</code>​​<code class="html plain">​​​<code class="html keyword">​div​</code>​​<code class="html plain">​>​</code>​</code><!--<--></code><!--<--></code><!--<--></code></code></code><!--<--></code><!--<--></code><!--<--></code></code><!--<--></code><!--<--></code><!--<-->
​      ​ ​<< code>​​<code class="html keyword">​div​</code>​​<code class="html plain">​slot="footer" class="dialog-footer">​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​div​</code>​​<code class="html plain">​class="slider-box">​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​span​</code>​​<code class="html plain">​class="slider-text">向右滑动滑块填充拼图​​<code class="html keyword">​span​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​          ​</code>​​<code class="html plain">​<< code>​​<code class="html keyword">​button​</code>​​<code class="html plain">​ref="btnImg" class="slider-icon" @mousedown="(e)=>moveBtn(e,1)">>>​​<code class="html keyword">​button​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​        ​</code>​​<code class="html plain">​​​<code class="html keyword">​div​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​      ​</code>​​<code class="html plain">​​​<code class="html keyword">​div​</code>​​<code class="html plain">​>​</code>​​<code class="html spaces">​    ​</code>​​<code class="html plain">​​​<code class="html keyword">​el-dialog​</code>​​<code class="html plain">​>​</code>​</code></code></code></code><!--<--></code></code><!--<--></code><!--<--></code><!--<-->
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 ​ ​     ​ ​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) { < code>​​​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.disX = 0​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​if​</code>​​<code class="javascript plain">​(key === 1) {​</code>​​<code class="javascript spaces">​           ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.style.left = 0​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript plain">​} ​</code>​​<code class="javascript keyword">​else​</code>​​<code class="javascript plain">​{​</code>​​<code class="javascript spaces">​           ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.btnImg.style.left = 0​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript keyword">​if​</code>​​<code class="javascript plain">​(​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.disX >= MaxX) { ​</code>​​​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.disX = MaxX​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​if​</code>​​<code class="javascript plain">​(key === 1) {​</code>​​<code class="javascript spaces">​           ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.style.left = (parentWidth - ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.width) + ​</code>​​<code class="javascript string">​'px'​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript plain">​} ​</code>​​<code class="javascript keyword">​else​</code>​​<code class="javascript plain">​{​</code>​​<code class="javascript spaces">​           ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.btnImg.style.left = (parentWidth - ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.width) + ​</code>​​<code class="javascript string">​'px'​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​ele.style.transform = ​</code>​​<code class="javascript string">​'translateX('​</code>​​<code class="javascript plain">​+ ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.disX + ​</code>​​<code class="javascript string">​'px)'​</code>​​​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​e.preventDefault() ​</code>​​​​<code class="javascript spaces">​     ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​     ​</code>​​<code class="javascript plain">​document.onmouseup = () => {​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript keyword">​if​</code>​​<code class="javascript plain">​(​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.loginTypeFlag === ​</code>​​<code class="javascript string">​'login'​</code>​​<code class="javascript plain">​) {​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.loginInterface() ​</code>​​​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​} ​</code>​​<code class="javascript keyword">​else​</code>​​<code class="javascript plain">​{​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.getSendCode() ​</code>​​​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​ele.style.transition = ​</code>​​<code class="javascript string">​'.4s ease'​</code>​​​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​ele.style.transform = ​</code>​​<code class="javascript string">​'translateX(0)'​</code>​​<code class="javascript spaces">​       ​</code>​​​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​document.onmousemove = ​</code>​​<code class="javascript keyword">​null​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​document.onmouseup = ​</code>​​<code class="javascript keyword">​null​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript keyword">​if​</code>​​<code class="javascript plain">​(key === 1) {​</code>​​<code class="javascript spaces">​         ​</code>​​​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.style.left = ​</code>​​<code class="javascript string">​'1%'​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.style.top = ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.imgCode.positionY​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.sliderImg.style.transition = ​</code>​​<code class="javascript string">​'0.4s ease'​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​} ​</code>​​<code class="javascript keyword">​else​</code>​​<code class="javascript plain">​{​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.btnImg.style.left = ​</code>​​<code class="javascript string">​'0'​</code>​​<code class="javascript spaces">​         ​</code>​​<code class="javascript keyword">​this​</code>​​<code class="javascript plain">​.$refs.btnImg.style.transition = ​</code>​​<code class="javascript string">​'0.4s ease'​</code>​​<code class="javascript spaces">​       ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​     ​</code>​​<code class="javascript plain">​}​</code>​​<code class="javascript spaces">​   ​</code>​​<code class="javascript plain">​}​</code>​<!--=-->
以上便是完整滑动验证码代码
Original: https://blog.51cto.com/u_15689678/5397748
Author: 草长莺飞飞满天
Title: Vue+Element-Ui手写登录滑动验证码
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/517204/
转载文章受原作者版权保护。转载请注明原作者出处！