Uni App-----之u-input（密码明文小眼睛切换）

本文作为临时记录使用。

前言 ：

最近做注册和忘记密码功能，需要写到小眼睛显示密码是否明文展示。出现的问题是在pc上正常实现效果，在手机端不生效。

解决思路：

• H5 暂未支持动态切换，请使用 v-if进行整体切换。

        <!-- 错误写法 -->
	<input :type="isText?'text':'number'" placeholder="请输入内容" />

        <!-- 正确写法 -->
	<input v-if="isText" type="text" placeholder="请输入文本" />
	<input v-else  type="number"  placeholder="请输入数字" />

  在官网已经给出，并不是有些控件的Bug,而是uniapp的组件部分是不支持动态切换的。 所以针对小眼睛功能。做出如下修改：

错误代码：

    <u-input placeholder="请再次输入密码" v-model="pwd2" class="input_class_pwd" :password="showPassWord2">
                <u-text text="重复密码" style="font-size: 16px;width: 140rpx;" slot="prefix" margin="0 3px 0 0"></u-text>
                <template slot="suffix">
                    <image @click="clickPwd2()" style="width: 40rpx;height: 40rpx;margin-right: 10rpx; z-index: 999;"
                        :src="showPassWord2?'../../static/login/pwd_hide.png':'../../static/login/pwd_visible.png'">
                    </image>
                </template>
            </u-input>

正确代码：

        <u-input v-show="showPassWord2===true" placeholder="请再次输入密码" v-model="pwd2" class="input_class_pwd"
                :password="true">
                <u-text text="重复密码" style="font-size: 16px;width: 140rpx;" slot="prefix" margin="0 3px 0 0"></u-text>
                <template slot="suffix">
                    <image @click="clickPwd2()" style="width: 40rpx;height: 40rpx;margin-right: 10rpx; z-index: 999;"
                        :src="showPassWord2?'../../static/login/pwd_hide.png':'../../static/login/pwd_visible.png'">
                    </image>
                </template>
            </u-input>
            <u-input v-show="showPassWord2===false" placeholder="请再次输入密码" v-model="pwd2" class="input_class_pwd"
                :password="false">
                <u-text text="重复密码" style="font-size: 16px;width: 140rpx;" slot="prefix" margin="0 3px 0 0"></u-text>
                <template slot="suffix">
                    <image @click="clickPwd2()" style="width: 40rpx;height: 40rpx;margin-right: 10rpx; z-index: 999;"
                        :src="showPassWord2?'../../static/login/pwd_hide.png':'../../static/login/pwd_visible.png'">
                    </image>
                </template>
            </u-input>

总结：

      处理方式就是写两遍。不论设置:password或者是type，只能初始赋值，不可以三元表达式。

否则在uniapp组件上不生效。若是原生html写法或者vue的vant组件写法则不存在此问题。