password.vue
762 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style>
.input_pwd_txt{
width: 100%;
height: 30px;
padding: 0 10px;
border: 1px solid rgba(96,111,122,.2);
}
</style>
<template>
<span>
<input type="{{togbool==false?'password':'text'}}"
v-model="pwd" class="input_pwd_txt">
<span v-bind:class="{'input-pwd-show':togbool}"
v-on:click="toggle"></span>
<span v-bind:class="{'input-pwd-hide':!togbool}"
v-on:click="toggle"></span>
<!-- <i v-bind:class="{'input-password-invisible':togbool,'input-password-visible':!togbool}" v-on:click="toggle"></i> -->
</span>
</template>
<script>
module.exports={
data:function(){
return {
togbool:false
}
},
props:{
pwd:String
},methods:{
toggle:function(){
this.togbool=!this.togbool;
}
}
}
</script>