vue实现一个input获取焦点失去焦点，实现label的放大缩

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

效果图

实现思路

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

代码

html

<div class="login-input">
  <label for="" :class="inputId == 'user_name' || query.user_name ? 'active' : ''">账号</label>
  <input @input="changeUserName" @focus="focusInput('user_name')" @blur="blurInput('user_name')" type="text" class="text-input" v-model="query.user_name" placeholder="请输入您的账号" />
</div>

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

最后

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