vue+uniapp登录密码轻松展示隐藏

登录页面：点击小眼睛图标隐藏和显示密码

直接上代码

view class="input-item flex align-center">
        <u-input maxlength="20" :type="pwdFlag == true ? 'password' : 'text'" v-model="loginForm.password"
        placeholder="请输入密码" prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #999" style="border: none;">
        <template slot="suffix">
          <u-icon :name="pwdFlag == true ? 'eye-off' : 'eye-fill'" color="#999" size="28"
            @click="pwdFlag = !pwdFlag"></u-icon>
        </template>
      </u-input>
      </view>
        

data() {
    return {
      pwdFlag: true,
    };
  },

注意修改u-input的样式时候：：v-deep .u-input修改