仿DIDI短信密码输入框验证

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_34355715

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量164

点赞数 1

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5acc7be951882555745a0795

版权

<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,viewport-fit=cover">
		<title>cursor-vcode</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			body {
				background-color: #ffffff;
				font-family: -apple-system, PingFang SC, Hiragino Sans GB, Helvetica Neue, Arial;
				-webkit-tap-highlight-color: transparent;
			}
			
			.app {
				padding-left: 20px;
				padding-right: 20px;
				padding-top: 60px;
				max-width: 320px;
				margin-left: auto;
				margin-right: auto;
			}
			
			.heading-2 {
				color: #333333;
			}
			
			.v-code {
				margin-top: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				width: 280px;
				margin-left: auto;
				margin-right: auto;
			}
			
			.v-code input {
				position: absolute;
				top: -100%;
				left: -666666px;
				width: 0;
				height: 0;
				opacity: 0;
			}
			
			.v-code .line {
				position: relative;
				width: 40px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				font-size: 28px;
			}
			
			.v-code .line::after {
				display: block;
				position: absolute;
				content: '';
				left: 0;
				width: 100%;
				bottom: 0;
				height: 1px;
				background-color: blue;
				transform: scaleY(.5);
				transform-origin: 0 100%;
			}
			
			.v-code .line.animated::before {
				display: block;
				position: absolute;
				left: 50%;
				top: 20%;
				width: 1px;
				height: 60%;
				content: '';
				background-color: red;
				animation-name: coruscate;
				animation-duration: 1s;
				animation-iteration-count: infinite;
				animation-fill-mode: both;
			}
			
			@keyframes coruscate {
				0% {
					opacity: 0
				}
				25% {
					opacity: 0
				}
				50% {
					opacity: 1
				}
				75% {
					opacity: 1
				}
				to {
					opacity: 0
				}
			}
		</style>
	</head>

	<body>
		<div id="app" class="app">
			<h2 class="heading-2">验证码:</h2>
			<div class="v-code">
				<input ref="vcode" id="vcode" type="tel" maxlength="6" v-model="code" @focus="focused = true" @blur="focused = false" :disabled="telDisabled">

				<label for="vcode" class="line" v-for="item,index in codeLength" :class="{'animated': focused && cursorIndex === index}" v-text="codeArr[index]">
      </label>
			</div>
		</div>

		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					code: '',
					codeLength: 6,
					telDisabled: false,
					focused: false
				},
				computed: {
					codeArr() {
						return this.code.split('')
					},
					cursorIndex() {
						return this.code.length
					}
				},
				watch: {
					code(newVal) {
						if(newVal.length > 5) {
							this.telDisabled = true
							this.$refs.vcode.blur()
							setTimeout(() => {
								alert(`vcode: ${this.code}`)
							}, 500)
						}
					}
				},
				mounted() {}
			})
		</script>
	</body>

</html>
复制代码

weixin_34355715

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿DIDI短信密码输入框验证

&lt;!DOCTYPE html&gt;&lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,v
复制链接

扫一扫