前端验证码

最新推荐文章于 2024-10-15 15:24:52 发布

搬砖的阿鲁

最新推荐文章于 2024-10-15 15:24:52 发布

阅读量141

点赞数 1

分类专栏： uni-app 文章标签：前端 javascript

本文链接：https://blog.csdn.net/l_15737525552/article/details/139958891

版权

uni-app 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

<template>
<view class="codeBox">
		<input v-model="codeValue" type="text" placeholder="请输入您的验证码" />
		<view @click="getCode" class="code">
			<view>{{code}}</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
    
    let code = ref<string>();
	let codeValue = ref<string>();

    const getCode = () => {
        const floorCode : string = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
		let result = '';
		for (let i = 0; i < 4; i++) {
			const randomIndex = Math.floor(Math.random() * floorCode.length);
			result += floorCode[randomIndex];
		}
		code.value = result;
		console.log(code.value);
    }
</script>

<style lang='scss' scoped>
    .codeBox{
		width: 530rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		margin-top: 40rpx;
		input{
			width: 240rpx;
			border: 2rpx solid #a8a8a8;
			padding: 14rpx;
			font-size: 26rpx;
			height: 30rpx;
		}
		.code{
			width: 240rpx;
			height: 74rpx;
			background-color: #4193f2;
			color: #fff;
			text-align: center;
			line-height: 74rpx;
			letter-spacing:10rpx;
			font-size: 38rpx;
			image{
				width: 100%;
				height: 100%;
			}
			view{
				transform: rotate(-9deg);
				text-decoration: line-through;
			}
		}
	}
</style>