uni-app input点击小眼睛显示或隐藏密码

图标是阿里的图标库 需要引入字体！！！！！

html部分代码

          <view class="forms">
				<view class="uni_password">
					<input class="uni-input" :password="showPassword" name="password" v-model="password" type="number"  placeholder="请输登录密码" />
					<view :class="[showPassword==true?'iconfont icon-yanjing-biyan':' iconfont icon-yanjing']" style="font-size: 40rpx;" @click="showPassWord">					
					</view>
				</view>
			</view>

js部分

export default {
		data() {
			return {
				showPassword: true
			}
		},
		methods: {
			showPassWord(){
				this.showPassword =! this.showPassword
			  },
		  }
	 }

css部分代码（样式可以自己写）

.forms {
	display: flex;
	align-items: center;
	height: 140rpx;
	padding: 20rpx 0;
}
.uni_password {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #999;
	width: 500rpx;
	input {
		height: 80rpx;
	}
}

效果图