vue2.x基于element-ui封装好玩的input输入框

在逛小米官网的时候，发现小米的输入框挺好玩的，提示文字会上下动，就自己封装了一个

image.png

<template>
  <div class="input">
    <label class="input-label" :class="{'focus':isFocus}">{{label}}</label>
    <el-input v-model="value" @focus="focusInput" @blur='blurInput' @input="change"></el-input>
  </div>
</template>

<script>
export default {
  props: ['label'],
  data() {
    return {
      isFocus: false,
      value: ""
    }
  },
  methods: {
    focusInput() {
      this.isFocus = true
    },
    blurInput() {
      if (this.value == '') {
        this.isFocus = false
      }
    },
    change() {
      this.$emit('changeValue', this.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.input {
  position: relative;
  width: 100%;
  .input-label {
    position: absolute;
    left: 12px;
    top: 11px;
    z-index: 2;
    padding: 0 3px;
    font-size: 14px;
    line-height: 18px;
    color: #b0b0b0;
    background: rgba(0, 0, 0, 0);
    cursor: text;
    transition: all 0.2s linear;
  }
}
.focus {
  top: -7px !important;
  background: #fff !important;
  color: #409eff !important;
  transform: scale(0.9);
}
</style>

//引入
import InputLabel from "@/components/Common/InputLabel";
components: {
    InputLabel
 }
//使用
<InputLabel label='姓名' @changeValue='formData.username = $event' /