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;
}

最后

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