Vue 自定义仿word表单录入之日期输入组件

因项目需要,要实现仿word方式录入数据,要实现鼠标经过时才显示编辑组件,预览及离开后则显示具体的文字。

鼠标经过时显示

正常显示及离开时显示

组件代码

javascript 复制代码
<template >
    <div class="paper-input flex flex-col border-box "   >
        <div  class="font-l border-box text margin-left-m text" style="font-family: FangSong;">{{text}}</div>
        <div class="flex flex-col  input hidden">
            <input type="text" v-model="value1" maxlength="4" ref="date1"   @input="changeToNext1(value1)"/>
            年
            <input type="text" v-model="value2" maxlength="2" ref="date2"  @input="changeToNext2(value2)"/>
            月
            <input type="text" v-model="value3" maxlength="2" ref="date3"  @input="changeToNext3(value3)"/>
            日
        </div>
    </div>
</template>

<script>
    export default{
        name:'PagerInput',
        data() {
            return {
                val:"",
                text:"年  月  日",
                value1:"",
                value2:"",
                value3:"",
            }
        },
        props: {
            value:{}
        },
        model: {
            prop: "value",
            event: "change"
        },
        watch:{
            value:{
                handler(newValue) {
                    if (newValue != null && newValue.length >0) {
                        let arr = newValue.split("-")
                        if ( arr.length === 3 ) {
                            this.value1 = arr[0]
                            this.value2 = arr[1]
                            this.value3 = arr[2]
                            this.setText();
                        }
                    }

                    this.val =  newValue;
                    
                },
                immediate: true,
                deep: true   //深度监听                
            },
        },
        methods:{
            changeToNext1(v) {
                if (v.toString().length === 4) {
                    this.$nextTick(() => {
                    this.$refs.date2.focus();
                    });
                }
                this.setText();
                this.setValue();
            },
            changeToNext2(v) {
                if (v.toString().length === 2) {
                    this.$nextTick(() => {
                    this.$refs.date3.focus();
                    });
                }
                this.setText();
                this.setValue();
            },
            changeToNext3(v) {
                this.setText();
                this.setValue();
            },
            setValue() {
                this.$emit("change", this.value1 + "-" + this.value2 + "-" + this.value3 );
            },
            setText() {
                this.text = this.value1 + "年" + this.value2 + "月" + this.value3 + "日"
            }

        }
    }
</script>

<style scoped>

    .paper-input:hover .text   {
        display: none;
    }
 
    .paper-input:hover .textplus   {
        display: none;
    }
    .paper-input:hover .input   {
        display: block;
    }
    .paper-input input {
        width: 50px;
    }

    


</style>

引用组件,支持数据双向绑定

javascript 复制代码
 <PaperDateInput v-model="paperData.protocolTime" ></PaperDateInput>
相关推荐
别拿曾经看以后~2 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死5 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人17 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人17 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR22 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香24 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969327 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai33 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91541 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍