用替换图标的方式实现当前高亮

Posted 2022-07-02 bbldhf

需求1：实现输入框获取焦点时高亮

需求2：实现表单验证

需求3：实现通过绑定样式改变样式图标的方式实现高亮

需求1核心代码如下：

<div class="form">

<div class="input">

<label for="username">用户名</label>

<input type="text" name="username" id="user" v-validate="required:true,max:6,min:4" :class="highlight:green==1,error:errors.has(‘username‘)" @click="green=1">

</div>

<div class="input" >

<label for="password">密码</label>

<input type="password" name="password" id="pass" :class="highlight:green==2,error:errors.has(‘password‘)" v-validate="required:true,max:6,min:4" @click="green=2">

</div>

.highlight

border: 2px solid green;

green这个变量需要在data里面声明一下初始值

 

 

需求2核心代码如下：

 

先npm下载插件 npm install vee-validate --save

然后在引入到main.js中使用

import VeeValidate, Validator from ‘vee-validate‘;
Vue.use(VeeValidate);

<div class="form">

<div class="input">

<label for="username">用户名</label>

<input type="text" name="username" id="user" v-validate="required:true,max:6,min:4" :class="highlight:green==1,error:errors.has(‘username‘)" @click="green=1">

</div>

<div class="input" >

<label for="password">密码</label>

<input type="password" name="password" id="pass" :class="highlight:green==2,error:errors.has(‘password‘)" v-validate="required:true,max:6,min:4" @click="green=2">

 

</div>

<span class="errTips" v-show="errors.has(‘password‘)">

errors.first(‘password‘)

</span>

<span class="errTips" v-show="errors.has(‘username‘)">

errors.first(‘username‘)

</span>

 

需求3核心实现代码

<div class="test">

<div class="rember" @click="rememberSet" :class="active:remember">

<span class="iconfont" :class="‘icon-kuang‘:!remember,‘icon-android-checkbox‘:remember">记住密码</span>

</div>

<div class="autoLogin" @click="autoLogin" :class="active:autologin">

<span class="iconfont" :class="‘icon-kuang‘:!autologin,‘icon-android-checkbox‘:autologin">自动登录</span>

</div>

</div>

 

rememberSet()

this.remember =!this.remember

this.remember ||(this.autologin =false)

,

autoLogin()

this.autologin =!this.autologin

this.autologin && (this.remember=true)

,

下面这段代码的实现需求是，当我点击自动登陆的时候，也就是autologin为true时自动登录也勾选上，当不勾选记住密码时自动登录也不勾上，也就是当remember为false时自动登录也为false