uniapp美化Input输入框

template

<template>
	<view class="container">
		
		 <view class="form">
			<view class="item" :class="'login_user ' + nameFocus">
				<input type="text" class="input-ui u-border" placeholder="用户ID"
				@input="bindUsername" @focus="onFocusName" @blur="onBlurName" />
			</view>
			<view class="item" :class="'login_pwd ' + psdFocus">
				<input type="text" class="input-ui u-border" placeholder="用户密码"
				:type="type == 'password' ? 'text' : type" :password="!showPassword"
				@input="bindPassword" @focus="onFocusPsd" @blur="onBlurPsd" />
				<view class="showPwd">
					<image :src="showPassword ? '/static/images/eye.png' : '/static/images/eye-fill.png'" @tap="showPassword = !showPassword"></image>
				</view>
			</view>
		 </view>
		<view class="botton-ui" @click="click">点击</view>
		
	</view>
</template>

script

export default{
	data(){
		return{
			name:"",
			nameFocus:'',
			psd:"",
			psdFocus:'',
			showPassword:false,
		}
	},
	methods:{
		click(){
			console.log(this.name)
			console.log(this.psd)
		},
		onFocusName(){
			this.setData({
				nameFocus: 'nameFocus'
		    });
		},
		onBlurName(){
			this.setData({
		        nameFocus: ''
		    });
		},
		bindUsername(e){
			// console.log(e.detail.value)
			this.setData({
				name: e.detail.value
			});
		},
		onFocusPsd: function () {
		    this.setData({
		        psdFocus: 'psdFocus'
		    });
		},
		onBlurPsd: function () {
		    this.setData({
		        psdFocus: ''
		    });
		},
		bindPassword: function (e) {
			this.setData({
				psd: e.detail.value
			});
		},
	}
}

style

.container{
	padding: 30upx 30upx;
	.item{
		position: relative;
		margin-bottom: 20upx;
		.input-ui{
			border: 1upx solid #dadbde;
			padding: 12upx 18upx;
			border-radius: 8upx;
			font-size: 30upx;
			color: rgb(48, 49, 51);
		}
		.showPwd{
			position: absolute;
			top: 0;
			right: 0;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 76upx;
			height: 76upx;
			image{
				width: 36upx;
				height: 36upx;
			}
		}
	}
}
.nameFocus{
	box-shadow: 0 3px 11px 4px rgb(225,246,254);
	.u-border{
		border-color: #3c9cff !important;
		color: rgb(48, 49, 51) !important;
	}
}
.psdFocus{
	box-shadow: 0 3px 11px 4px rgb(225,246,254);
	.u-border{
		border-color: #3c9cff !important;
		color: rgb(48, 49, 51) !important;
	}
}
.botton-ui{
	width: 100%;
	padding: 22upx 0;
	background: #3c9cff;
	color: #fff;
	text-align: center;
	border-radius: 8upx;
	font-size: 30upx;
}