输入框组件:可以显示删除按钮,密码框点击眼睛密码的显示与否
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>