vue input 组件 获焦上移

 

 

 

 

<template>
    <div class="form">
        <div class="inputForm">
            <input :value="value" @input="handleInput" required="required">
            <label>{{ label }}</label>
        </div>
    </div>

</template>
<script>
export default {
    props: {
        value: {
            type: String,
            default: "",
        },
        label: {
            type: String,
            default: "",
        },
    },
    methods: {
        handleInput(e) {
            this.$emit("input", e.target.value);
        },
    },
};
</script>

<style scoped>
.form{
    margin: 0.2rem 0.02rem;
    width: 6rem;
    border: 0.01rem solid red;
    padding: 0 0.19rem;
}
.inputForm{
    position: relative;
    margin-top: 0.25rem;
}
.inputForm input{
    outline: none;
    border: none;
    width: 100%;
    padding: 0.1rem 0;
    color: #000;
    font-size: 0.16rem;
    background: none;
}
.inputForm label{
    position: absolute;
    top: -0.09rem;
    left: 0;
    color: #000;
    font-size: 0.29rem;
    pointer-events: none;
    /*加个过度*/
    transition: all 0.5s;
}


.inputForm input:focus + label,
.inputForm input:valid + label{
    font-size: 0.21rem;
    top: -0.2rem;
    color: red
}
</style>