vue登陸密碼明文和暗文切換
元件:有贊移動端
<template>
<div id="login">
<van-nav-bar
title="使用者登陸"
/>
<van-cell-group>
<van-field
v-model="username"
required
clearable
label="使用者名稱"
placeholder="請輸入使用者名稱"
@click-icon="$toast('question')"
/>
<van-field
v-model="password"
:type="flag == true?'password':'text'"
label="密碼"
placeholder="請輸入密碼"
:icon="flag == true?'password-view': 'password-not-view'"
@click-icon="changType"
required
/>
</van-cell-group>
<div style="text-align:center; margin:10px 0">
<van-button type="primary" size="small" @click="Login">登陸</van-button>
<van-button size="small" @click="handleClick">取消</van-button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
username: '',
password: '',
type: 'password',
flag: true
}
},
methods: {
Login(){
if(this.username == '' ){
this.$toast('使用者名稱不能為空');
return
}
if(this.password == '' ){
this.$toast('密碼不能為空');
return
}
console.log(this.username, this.password)
},
handleClick(){
this.username = ''
this.password = ''
},
changType(){
this.flag = !this.flag
}
}
}
</script>
<style>
</style>