Vue 自定义仿word表单输入框组件，让操作更符合用户习惯

光标未进入时

光标进入后

这样就能实现光标不进入时不会显示光标和线框，整体看起来更美观

组件代码如下：

<template >
    <div class="pager-input flex flex-col border-box full-width"   >
        <div  class="font-l border-box text margin-left-m text" style="font-family: FangSong;">{{val}}</div>
        <div  v-if="val === ''" class="color-white textplus" >请输入</div>
        <div class="flex flex-col full-width input hidden">
            <input class="font-m ui-input full-width"  placeholder="请输入" v-model="val" type="text"  @input="inputChange"/>
        </div>
    </div>
</template>

<script>
    export default{
        name:'PagerInput',
        data() {
            return {
                val:"",
            }
        },
        props: {
            value:{}
        },
        model: {
            prop: "value",
            event: "change"
        },
        watch:{
            value:{
                handler(newValue) {
                    this.val =  newValue;
                },
                immediate: true,
                deep: true   //深度监听                
            },
        },
        methods:{
            inputChange() {
                this.$emit("change", this.val);

            }
        }
    }
</script>

<style scoped>

    .pager-input:hover .text   {
        display: none;
    }
 
    .pager-input:hover .textplus   {
        display: none;
    }
    .pager-input:hover .input   {
        display: block;
    }

    


</style>

调用方法：

 <PaperInput v-model="pagerData.name"></PaperInput>