input密码显示隐藏

密码显示隐藏效果图：

代码实现

<template>
<view>
 <view class="item">
	<view class="item-input-text">
	 <image class="phone-icon" lazy-load="true" src="static/image/login/phone-icon.png"></image>
	 <input class="input" placeholder-style="color:#C5CBCE;" placeholder="请输入账号" />
	</view>
 </view>
 <view class="item">
   <view class="item-input-text item-input-pwd">
   <image class="phone-icon" lazy-load="true" src="static/image/login/pwd-icon.png"> </image>
   <input class="input" :password="pwdFlag" placeholder-style="color:#C5CBCE;" placeholder="请输入密码" />
  <view class="pwd-icon-box">
	 <image class="pwd-icon" lazy-load="true" @tap="pwdBtn()" :src="url"></image>
  </view>
 </view>
</view>
<view>
</template>
<script>
	export default {
		data() {
			return {
				pwdFlag: true,
				url: 'static/image/login/hide-icon.png',
			}
		},
		onShow() {},
		onLoad() {},
		methods: {
			pwdBtn() {
				var hideIcon = 'static/image/login/hide-icon.png'
				var showIcon = 'static/image/login/show-icon.png'
				this.pwdFlag = !this.pwdFlag
				this.url = this.pwdFlag ? hideIcon : showIcon
			}
		}
	}
</script>

---

解决方案：

通过判断input的password属性是否是密码类型来实现的（https://uniapp.dcloud.net.cn/component/input.html）：