一、通過(guò)切換類名實(shí)現(xiàn)
1.html布局
<view class="content">
<view class="label">請(qǐng)輸入退款密碼</view>
<input v-model="params.pwd" placeholder="退款密碼" :password="openPassword"/>
<view :class="[!openPassword ? 'psd-eye-active' : 'psd-eye']" @click="changePassword"></view>
</view>2.樣式部分（自己看著寫）
.content{
? ? position:relative;
.psd-eye-active{
? ? ? ? width: 45rpx;
height: 45rpx;
? ? ? ? background:url(../../../static/login/icon_turn.png) no-repeat center center;
position: absolute;
right: 50rpx;
top: 50%;
z-index:10;
? ? }
.psd-eye{
width: 45rpx;
height: 45rpx;
background:url(../../../static/login/eye.png) no-repeat center center;
position: absolute;
right: 50rpx;
top: 50%;
z-index:10;
}
}3.功能部分
<script>
? ? data() {
return {
openPassword: true
}
},
? ? methods: {
? ? ? ? changePassword() {
? ? ? ? this.openPassword = !this.openPassword;
}
? ? ? ? }
</script>二、通過(guò)圖片路徑切換
1.html布局
<view class="content">
<view class="label">請(qǐng)輸入退款密碼</view>
<input v-model="params.pwd" placeholder="退款密碼" :password="openPassword"/>
<image class="psd-eye" :src="psdUrl" mode="aspectFill" @click="changePassword"></image>
</view>2.樣式部分（自己看著寫）
.content{
position:relative;
.psd-eye{
? width: 45rpx;
height: 45rpx;
position: absolute;
right: 50rpx;
top: 55%;
z-index:10;
}
}3.功能部分文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-524672.html
<script>
data() {
return {
openPassword: true,
? ? ? ? ? ? ? ? psdUrl:'../../../static/login/eye.png'
}
},
methods: {
changePassword() {
this.openPassword = !this.openPassword;
? ? ? ? ? ? ?if(this.openPassword){
this.psdUrl = '../../../static/login/eye.png'
}else{
this.psdUrl = '../../../static/login/icon_turn.png'
}
}
}
</script>展示圖文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-524672.html
到了這里，關(guān)于【vue2+uniapp】密碼框輸入密碼顯示和隱藏小功能（兩種方法實(shí)現(xiàn)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![uniapp - [微信小程序平臺(tái)] 實(shí)現(xiàn)輸入支付密碼鍵盤彈框，uniapp小程序端底部彈起密碼輸入鍵盤組件效果，類似電商平臺(tái)支付密碼、彈出支付密碼輸入框、交易密碼（詳細(xì)示例源碼，一鍵復(fù)制開箱即用?。? decoding=](https://imgs.yssmx.com/Uploads/2024/02/770184-1.png)
