pure111
pure111
  • 发布:2022-04-12 14:52
  • 更新:2022-04-24 16:10
  • 阅读:1619

【报Bug】u-view中 u--input 的password动态绑定在app端失效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 1909

HBuilderX类型: 正式

HBuilderX版本号: 3.3.13

手机系统: Android

手机系统版本号: Android 12

手机厂商: 模拟器

手机机型: HUAWE OXF-AN00

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="login-root-view">  
        <view class="content">  
            <view class="contentInput">  
                <text class="contentInputText">密码</text>  
                <!-- 注意:由于兼容性差异,使用前后插槽,nvue下需使用u--input,非nvue下需使用u-input -->  
                <!-- #ifndef APP-NVUE -->  
                <u-input placeholder="请输入密码" border="bottom" clearable :password='isPassword' v-model="password">  
                    <!-- #endif -->  
                    <!-- #ifdef APP-NVUE -->  
                    <u--input placeholder="请输入密码" border="bottom" clearable :password='isPassword'  v-model="password">  
                        <!-- #endif -->  
                        <template slot="suffix">  
                            <u-icon name="eye" size="40" v-if='isPassword' @click='isPassword=!isPassword'></u-icon>  
                            <u-icon name="eye-fill" size="40" v-if='!isPassword' @click='isPassword=!isPassword'>  
                            </u-icon>  
                        </template>  
                        <!-- #ifndef APP-NVUE -->  
                </u-input>  
                <!-- #endif -->  
                <!-- #ifdef APP-NVUE -->  
                </u--input>  
                <!-- #endif -->  
            </view>  
            <u-button text="登录" type="primary" class="contentLoginBtn" shape='circle'></u-button>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                isPassword: true,//密码是否显示  
password:"" //密码  
            };  
        },    
        mounted() {},  
        methods: {  
        }  
    };  
</script>  

操作步骤:
<!-- #ifndef APP-NVUE -->  
                <u-input placeholder="请输入密码" border="bottom" clearable :password='isPassword' v-model="password">  
                    <!-- #endif -->  
                    <!-- #ifdef APP-NVUE -->  
                    <u--input placeholder="请输入密码" border="bottom" clearable :password='isPassword' v-model="password">  
                        <!-- #endif -->  
                        <template slot="suffix">  
                            <u-icon name="eye" size="40" v-if='isPassword' @click='isPassword=!isPassword'></u-icon>  
                            <u-icon name="eye-fill" size="40" v-if='!isPassword' @click='isPassword=!isPassword'>  
                            </u-icon>  
                        </template>  
                        <!-- #ifndef APP-NVUE -->  
                </u-input>  

预期结果:

预期结果:
app-NUE中输入框中的密码,随着password这个属性的true /flase进行显示

实际结果:

①输入框中的密码,一直是第一次赋值的true状态,随后进行更改false不生效
②若第一次将password赋值为false,再进行修改为true,第一次false生效,第二次修改为true生效,第三次修改为false不生效

bug描述:

【报Bug】u-view中 u--input 的password动态绑定在APP-NVUE端失效,在H5端是正常的

使用的是雷电 安卓模拟器

现有的需求,登录页面-密码输入框-点击眼睛展示密码-再点击则不展示密码,展现的是密码状态,H5端正常,nvue打包在安卓模拟器上的失效

绑定值 永远是false的状态 是可以展示的,但是以动态绑定值就会没有效果

2022-04-12 14:52 负责人:无 分享
已邀请:
pure111

pure111 (作者)

我这边暂时的解决方案和你的有点类似:
①解决动态切换问题
uview 的u-input组件源码 做出了如下修改

②光标移动到index为0问题
在使用到input的页面去操作dom(只是暂时的解决方案,希望官方可以赶紧解决这个bug)

小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

首先 vue页面请用u-别用u-- 其次 你发一个可复现的demo出来看下

  • pure111 (作者)

    你好,之前没有用markdown语法导致没发全代码,您再看一下,上面就是我的代码,vue和nvue是有用条件编译进行的

    2022-04-13 10:30

  • pure111 (作者)

    示例代码就是可复现的demo

    2022-04-13 10:31

小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

好的,你这个代码我试下

绝学无忧

绝学无忧

我最近也遇到这个问题,看了看uview 的u-input组件源码,在u-input文件里把图中灰色部分拿掉,后果是否有BUG产生未测,暂时可以解决无法动态切换的问题。但是切换过程中软键盘会来回跳动,并且切换之后光标会自动跳到文本下标为0的地方,这得好好再研究研究。话说回来在NVUE文件当中,Input光标由于原生是绿色的,没办法修改光标的颜色,可能是本人研究的浅,有哪位大佬给个提示提示一下。万分感谢!

该问题目前已经被锁定, 无法添加新回复