uni-app 登录框组件

输入框组件：可以显示删除按钮，密码框点击眼睛密码的显示与否
1.账号输入框：内容为空时，不显示清空按钮；有内容时，按钮显示，点击可清空输入框；
2.密码输入框：默认隐行显示密码，点击眼睛可显示明文密码---20191205

       

<!-- 输入框组件：可以显示删除按钮，密码框点击眼睛密码的显示与否 -->
<!-- 1.账号输入框：内容为空时，不显示清空按钮；有内容时，按钮显示，点击可清空输入框；
	2.密码输入框：默认隐行显示密码，点击眼睛可显示明文密码-20191205-->
<template name="mInput">
	<view>
		<view class="inputShow">
			<image src="../static/user.png" class="icon"></image>
			<text>账号</text>
			<input type="text" placeholder="请输入账号" v-model="eyetext"/>
			<view class="icon">
				<image src="../static/close.png" @tap="clear" v-if="eyetext.length" class="icon-clear"></image>
			</view>
		</view>
		<view class="inputShow">
			<image src="../static/lock.png" class="icon"></image>
			<text>密码</text>
			<input :type="showPass ? 'text' : 'password'" placeholder="请输入密码" v-model="passtext"/>
			<image :src="showPass ? src1 : src2" @tap="showEye" class="icon"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPass: false,
				src1: "../static/eye.png",
				src2: "../static/closeeye.png",
				eyetext: '',
				passtext: ''
			}
		},
		methods: {
			showEye(){
				this.showPass=!this.showPass;
			},
			clear(){
				this.eyetext='';
			}
			
		}
	}
</script>

<style>
	.inputShow{
		display: flex;
		flex-wrap: nowrap; /* 禁止自动换行*/
		padding: 5px;
		justify-content: center; /* 主轴上对齐方式*/
	}
	.inputShow text{
		margin-right: 20px;
	}
	.inputShow input{
		font-size: 14px;
	}
	.icon{
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}
	.icon-clear{
		width: 20px;
		height: 20px;
	}

</style>