在逛小米官网的时候，发现小米的输入框挺好玩的，提示文字会上下动，就自己封装了一个
<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' /
