vue试按钮失去焦点_vue实现一个input获取焦点失去焦点，实现label的放大缩小效果...

vue实现一个input获取焦点是去焦点，实现label的放大缩小效果

效果图

实现思路

当前input获取焦点的时候，添加一个唯一标志，判断是当前获取焦点对应的label标签，增加字体样式。

代码

html

账号

data

inputId: '',

query: {

user_name:'',

}

js

focusInput(name) {

this.inputId = name

},

blurInput() {

this.inputId = '' //失去焦点清空

}

css

label {

font-weight: 600;

color: #333336;

line-height: 0.24rem;

font-size: 0.16rem;

display: block;

-webkit-transition: all 300ms linear;

-moz-transition: all 300ms linear;

-o-transition: all 300ms linear;

-ms-transition: all 300ms linear;

transition: all 300ms linear;

}

label.active {

color: #B9BECC;

font-size: 0.12rem;

-webkit-transition: all 300ms ease-in-out;

-moz-transition: all 300ms ease-in-out;

-o-transition: all 300ms ease-in-out;

-ms-transition: all 300ms ease-in-out;

transition: all 300ms ease-in-out;

}

最后

可根据实际项目情况进行优化。