vue实现input获取焦点后label标签上移缩小

基于移动端的，如果是PC端要用，将rem改成需要的px大小即可

<template>

  <div id="app">

    <div class="itemInput">

      <label for="name">姓名</label>

      <input type="text" v-model="name" @focus="focusEvent($event)" @blur="blurEvent($event)" class="form-line">

    </div>

  </div>

</template>

 

<script>

import _ from "lodash/lodash";

export default {

  data() {

    return {

      name: ''

    }

  },

  methods: {

    focusEvent(e) {

      e.currentTarget.previousElementSibling.style.top = '0'

      e.currentTarget.previousElementSibling.style.fontSize = '0.32rem'

      e.currentTarget.previousElementSibling.style.color = '#343434'

      e.currentTarget.parentElement.style.borderBottom = '1px solid #E4504C'

    },

    blurEvent(e) {

      if (this.name === '') {

        e.currentTarget.previousElementSibling.style.top = '0.48rem'

        e.currentTarget.previousElementSibling.style.fontSize = '0.48rem'

        e.currentTarget.previousElementSibling.style.color = '#cccccc'

        e.currentTarget.parentElement.style.borderBottom = '1px solid #e2e2e2'

      }

 

    }

  },

  components: {

 

  }

}

</script>

 

<style scoped>

#app {

  padding: 40px;

}

.itemInput {

  position: relative;

  padding: 20px 0 0;

  box-sizing: border-box;

  border-bottom: 1px solid #e2e2e2;

}

.itemInput > label {

  position: absolute;

  left: 10px;

  top: 36px;

  transition: 0.3s;

  font-size: 36px;

  color: #cccccc;

}

.itemInput > input {

  background: none;

  outline: none;

  border: none;

  width: 100%;

  font-size: 36px;

  padding: 20px 10px;

  box-sizing: border-box;

  caret-color: #e4504c;

}

</style>