其他分享
首页 > 其他分享> > 用替换图标的方式实现当前高亮

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

作者:互联网

需求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          

标签:false,remember,登录,autologin,密码,自动,高亮,替换,图标
来源: https://www.cnblogs.com/bbldhf/p/11336911.html