密码的显示隐藏大家都遇到过,不知道这个功能在weex项目中怎么实现。试过很多方法都没有实现!有大神做过吗?请赐教!
需求很简单:
眼睛闭上状态,密码显示为圆点,
眼睛睁开状态,密码显示为明文。
试验一:在vue中完全没问题,可是在weex中明确说明
weex 目前不支持 this.$refs.xxx.value = '' 这种方式改写 input value
失败!!
<template>
<div>
<input type="password" ref="inputPassword" value="123456" placeholder="请输入密码">
<img :src="seen?seenImg:unseenImg" alt="" @click="changeSeen">
</div>
</template>
<script>
export default {
data () {
return {
seen: false,
seenImg: '/static/new_login_seen.png',
unseenImg: '/static/new_login_unseen.png'
}
},
changeSeen: function () {
this.$refs.inputPassword.type = this.seen ? 'password' : 'text'
this.seen = !this.seen
}
}
试验二:建2个input一个text,一个password,用v-if控制显示隐藏,一开始是明文的,
点一下变成圆点的(激动了一下下),
再点一次,怎么还是圆点啊!!!无解!
我这还没数据绑定就出问题了。没有继续下去了
<input class="eyes_show" type="password" value="123" placeholder="请输入密码" v-if="!seen"/>
<input class="eyes_show" type="text" value="abcdefgh098" placeholder="请输入密码" v-if="seen"/>
<image class="eyes_icon" :src="seen?seenImg:unseenImg" @click="eyes_show"></image>
export default {
data(){
return {seen:true}
},
eyes_show() {this.seen = !this.seen }