出現(xiàn)的問題：
使用uview組件u-input框密碼綁定時(shí)會(huì)出現(xiàn)右側(cè)密碼顯隱圖標(biāo)不顯示的問題
思路：
1.看了下uview源碼，發(fā)現(xiàn)這有一段注釋，我們需要把源碼修改一下，問題出在這里
?
?這行代碼修改為?:password="password || type === 'password' || false"
2.其次發(fā)現(xiàn)uview源碼里面并沒有密碼顯隱的圖標(biāo)，這就需要我們?cè)谑褂玫捻撁孀约喝ヌ砑?/h4>
Input 輸入框 | uView 2.0 - 全面兼容 nvue 的 uni-app 生態(tài)框架 - uni-app UI 框架 (uviewui.com)
這就需要在u-input框里面使用到后置插槽了
代碼
demo樣式
1.修改視圖層代碼，來動(dòng)態(tài)改變icon的樣式
<u-input confirmType="done" v-model="accountForm.userPassword"
:password="password" :clearable="true" placeholder="請(qǐng)輸入您的登錄密碼"
:placeholder-style="placeholderStyle" border="none">
<template slot="suffix">
<u-icon :name="password ? 'eye': 'eye-fill'" size="24"
@click="handleShowPass"></u-icon>
</template></u-input> 2.邏輯層代碼控制密碼的顯隱
handleShowPass() {
this.password = ! this.password
}實(shí)現(xiàn)效果圖如下：
文章來源：http://www.zghlxwxcb.cn/news/detail-649312.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-649312.html
到了這里，關(guān)于【Uni-App】uview 開發(fā)多端應(yīng)用，密碼顯示隱藏功能不生效問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
