组件:有赞移动端
<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>