1.實現(xiàn)效果
棉麻.gif
2.實現(xiàn)原理
input的type之中并無password屬性脸哀。
在這里插入圖片描述
小程序提供了一個password屬性，用來表示是否是密碼類型莫瞬。
關(guān)鍵思路：動態(tài)改變password的值疾嗅，從而實現(xiàn)密碼的顯示與隱藏。
3.實現(xiàn)代碼
// pages/cssCase/inputPass/index.js
Page({
data: {
open: false,//默認不顯示密碼
focus:false,//是否獲取焦點
},
switch() {
this.setData({
open: !this.data.open
})
},
focus(){
this.setData({
focus:true
})
},
blur(){
this.setData({
focus:false
})
}
})
<view class="mb20">小程序的type木有password屬性珠十，但有password,判斷是否是密碼類型</view>
<view class="flex-row j_b">
<view class="flex-row fill_box">
<text>密碼：</text>
<input type="text" password="{{!open}}" placeholder="請輸入密碼" bindfocus="focus" bindblur="blur" class="{{focus?'ative':''}}"/>
</view>
<image src="{{open?'../img/open_eye.png':'../img/no_eye.png'}}" class="eye" catchtap="switch" />
</view>
page {
padding: 40rpx;
background-color: #fff;
}
.eye {
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
flex-shrink: 0;
}
.fill_box {
font-size: 25rpx;
color: #333;
flex: 1;
}
.fill_box text {
margin-right: 25rpx;
}
.fill_box input {
border-bottom: 1px solid #ccc;
flex: 1;
}
.ative{
border-bottom: 1px solid #1b347a!important;
}
.mb20 {
margin-bottom: 40rpx;
font-size: 25rpx;
font-weight: bold;
color: #333;
}
