vue实现大气简洁发送手机验证码倒计时输入框效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：vue实现大气简洁发送手机验证码倒计时输入框效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="false">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rem.js"></script>
    <style>
        * {
	-webkit-tap-highlight-color:transparent;
	-webkit-touch-callout:text
}
*,*:before,*:after {
	box-sizing:border-box
}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre {
	margin:0;
	padding:0
}
small,big,input,textarea,button,select {
	font-size:100%
}
h1,h2,h3,h4,h5,h6 {
	font-size:inherit;
	font-weight:bold
}
b,strong {
	font-weight:bolder
}
address,em,i {
	font-style:normal
}
table {
	border-collapse:collapse;
	border-spacing:0;
	text-align:left
}
caption,th {
	text-align:inherit
}
ul,ol,menu {
	list-style:none
}
fieldset,img {
	border:0
}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu {
	display:block
}
audio,canvas,video {
	display:inline-block;
	*display:inline;
	*zoom:1
}
textarea {
	overflow:auto;
	resize:vertical;
	resize:none
}
input,textarea,button,select,a {
	font-family:inherit;
	outline:0 none;
	border:none;
	color:inherit
}
button::-moz-focus-inner,input::-moz-focus-inner {
	padding:0;
	border:0
}
mark {
	background-color:transparent
}
a,ins,s,u,del {
	text-decoration:none
}
sup,sub {
	vertical-align:baseline
}
html {
	overflow-x:hidden;
	height:100%;
	-webkit-text-size-adjust:100%
}
body {
	font-family:"PingFangSC","Helvetica Neue",Avenir,Helvetica,Arial,sans-serif;
	color:#4D4A63
}
button,input {
	-webkit-appearance:none
}
img,video {
	max-width:100%;
	height:auto
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
	color:#C0BDD0;
	font-weight:400;
	font-size:14px
}
input::-moz-placeholder,textarea::-moz-placeholder {
	color:#C0BDD0;
	font-weight:400;
	font-size:14px
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {
	color:#C0BDD0;
	font-weight:400;
	font-size:14px
}
input::-ms-input-placeholder,textarea::-ms-input-placeholder {
	color:#C0BDD0;
	font-weight:400;
	font-size:14px
}
input::placeholder,textarea::placeholder {
	color:#C0BDD0;
	font-weight:400;
	font-size:14px
}
[role=button],button {
	cursor:pointer
}
.clearfix:after {
	clear:both;
	content:"";
	display:block;
	height:0;
	line-height:0;
	visibility:hidden
}
.clearfix {
	zoom:1
}
.fl {
	float:left
}
.fr {
	float:right
}
button:focus {
	outline:none!important
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
	-webkit-appearance:none
}
html {
	font-size:8px
}
body {
	font-size:2rem;
	background:black
}
#toastTip {
	display:none;
	position:fixed;
	top:46%;
	left:50%;
	transform:translate(-50%,-50%);
	padding:2rem 2.4rem;
	min-width:200px;
	max-width:300px;
	line-height:2rem;
	font-size:2rem;
	text-align:center;
	color:#F2F2F9;
	background-color:rgba(33,21,54,0.8);
	border-radius:1rem;
	z-index:100
}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active {
	-webkit-box-shadow:0 0 0 1000px #292834 inset !important;
	background-color:#292834 !important;
	background-clip:content-box !important;
	-webkit-text-fill-color:#fff !important
}
#wrapper .content {
	position:absolute;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	margin:auto
}
#wrapper .content h2 {
	color:#fff
}
.input-box {
	max-width:875px;
	padding:2rem 4rem 4rem
}
.input-box .input-content {
	display:flex;
	justify-content:space-between;
	width:100%
}
.input-box .input-content input {
	margin:0 .8rem;
	padding:0 1rem;
	width:5.5rem;
	height:6.5rem;
	font-weight:bold;
	font-size:3.25rem;
	color:#fff !important;
	background:#252631;
	border-radius:1.5rem;
	border:1px solid #252631;
	text-align:center
}
.input-box .input-content .btnLight {
	border:1px solid #a7a2bd
}
.btn-submit {
	width:150px;
	height:38px;
	border-radius:50px;
	font-size:14px;
	color:#fff;
	background:#4D4A63
}
.active {
	background:#252631;
	cursor:default
}

    </style>
</head>

<body>
    <div id="wrapper" v-cloak>
        <div class="content">
            <h2>{{ this.phone | mobileToStar }}</h2>
            <div class="input-box code">
                <div class="input-content" @keydown="keydown" @keyup="keyup" @paste="paste" @mousewheel="mousewheel" @input="inputEvent">
                    <input ref="firstinput" v-model.trim.number="input[0]" class="code-text" max="9" min="0" maxlength="6" data-index="0" type="tel" :class="{'btnLight': iptFocus[1] || input[0]}" @focus="handleFocus(1)" @blur="handleBlur(1)">
                    <input v-model.trim.number="input[1]" class="code-text" max="9" min="0" maxlength="6" data-index="1" type="tel" :class="{'btnLight': iptFocus[2] || input[1]}" @focus="handleFocus(2)" @blur="handleBlur(2)">
                    <input v-model.trim.number="input[2]" class="code-text" max="9" min="0" maxlength="6" data-index="2" type="tel" :class="{'btnLight': iptFocus[3] || input[2]}" @focus="handleFocus(3)" @blur="handleBlur(3)">
                    <input v-model.trim.number="input[3]" class="code-text" max="9" min="0" maxlength="6" data-index="3" type="tel" :class="{'btnLight': iptFocus[4] || input[3]}" @focus="handleFocus(4)" @blur="handleBlur(4)">
                    <input v-model.trim.number="input[4]" class="code-text" max="9" min="0" maxlength="6" data-index="4" type="tel" :class="{'btnLight': iptFocus[5] || input[4]}" @focus="handleFocus(5)" @blur="handleBlur(5)">
                    <input v-model.trim.number="input[5]" class="code-text" max="9" min="0" maxlength="6" data-index="5" type="tel" :class="{'btnLight': iptFocus[6] || input[5]}" @focus="handleFocus(6)" @blur="handleBlur(6)">
                </div>
            </div>
            <div class="form-button">
                <button v-show="showTime" type="button" class="btn-submit" @click="sendCaptcha">重新发送</button>

                <button v-show="!showTime" type="button" class="btn-submit active"><span>重新发送（{{ count }}s）</span></button>
            </div>
        </div>
        <!-- <Captcha ref="captchaLogin" @complete="handleLogin" />
      handleLogin(value) {
        this.loginForm.smsCode = value.join('')
      },
      handleClear() {
        this.loginForm.smsCode = ''
        this.$refs['captchaLogin'].clear()
        this.$refs['captchaLogin'].focus()
      },
    -->
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script>
        // problem: 点击短信通知栏的“复制”后，6位验证码会自动显示在软键盘左上角，点击一下即完成填充，某些 android 手机不生效，这个事件是 inputEvent，是先填充内容再进行处理的，但是输入框的 input maxlength 是1，如果更改该 maxlength 值为6可以实现填充，但是，如果从中间输入，最后一个输入框会输入最多6个值，输入完成后自动填充了最后一个输入框的6个值了。
        // 如果有更好的解决办法，欢迎留言交流！
    
        /* 
          toast 提示：绑定在window上，使用方法：showMessage('提示信息', time) 
        */
        window.showMessage = function( $msg, $time, callback ) {
          $time = $time === 0 ? 0 : ($time || 1000);
          var oDiv = document.createElement("div");
          oDiv.setAttribute("id", "toastTip");
          // var oBody = document.getElementsByClassName('wrapper')[0];
          var oBody = document.getElementsByTagName('body')[0];
          oBody.append(oDiv);
          $('#toastTip').text( $msg );
          $('#toastTip').fadeIn();
          setTimeout(function() {
            callback()
            $('#toastTip').fadeOut(function() {
              $('#toastTip').remove();
            });
          }, $time);
        }
    
        var mainVM = new Vue({
          el: "#wrapper",
          data: {
            pasteResult: [], // 存放粘贴进来的数字
            iptFocus: [],
            phone: 18800001111,
            smsCode: '',
            countryCode: '+86',
            showTime: true,
            count: '', // 初始化次数
            timer: null,
          },
          filters: {
            /**
           * @param {string} 18310746666
           * @returns {string} 183****6666 前3后4，中间4星
           */
            mobileToStar (value) {
              if (!value) return null
              let reg = '', str = ''
              if (!isNaN(value)) value = value.toString()
              let len = value.length
              if (len === 4) {
                reg = /^([A-Za-z0-9]{1})([A-Za-z0-9]{2})([A-Za-z0-9]{1})$/
                str = value.replace(reg, '$1**$3')
              } else if (len === 5) {
                reg = /^([A-Za-z0-9]{1})([A-Za-z0-9]{3})([A-Za-z0-9]{1})$/
                str = value.replace(reg, '$1***$3')
              } else if (len > 5 && len < 21) { // 隐藏中间4位
                var num = Math.floor(len / 2) - 2
                str = value.substr(0, num) + '****' + value.substr(num + 4)
              } else if (len > 20) {
                str = value.substr(0, 6) + '****' + value.substr(len - 6)
              }
              return str
            }
          },
          computed: {
            input() {
              return this.pasteResult.length === 6 ? this.pasteResult : ['', '', '', '', '', ''.........完整代码请登录后点击上方下载按钮下载查看