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

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

鼠标经过时显示

正常显示及离开时显示

 组件代码

<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>

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

 <PaperDateInput v-model="paperData.protocolTime" ></PaperDateInput>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/620826.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

物流实时数仓DWD层——1.准备工作

目录 1.创建主程序——DwdOrderRelevantApp类 2.创建DWD层的事实表——来源于订单表和订单明细表 (1)创建订单表实体类 (2)创建订单明细表实体类 (3)创建交易域&#xff1a;下单事务事实表实体类&#xff0c;并整合(1)与(2)&#xff0c;采用下单时间 (4)创建交易域&#…

【C++】STL(标准模板库)

文章目录 1. 基本概念2. 容器2.1. 容器的分类 1. 基本概念 STL&#xff08;Standard Template Library&#xff0c;标准模板库)是惠普实验室开发的一系列软件的统称&#xff0c;现在已经成为C标准库的重要组成部分。STL的从广义上讲分为三类&#xff1a;algorithm&#xff08;…

Matlab字符识别实验

Matlab 字符识别OCR实验 图像来源于屏幕截图&#xff0c;要求黑底白字。数据来源是任意二进制文件&#xff0c;内容以16进制打印输出&#xff0c;0-9a-f’字符被16个可打印字符替代&#xff0c;这些替代字符经过挑选&#xff0c;使其相对容易被识别。 第一步进行线分割和字符…

AI编程可视化Java项目拆解第一弹,解析本地Java项目

之前分享过一篇使用 AI 可视化 Java 项目的文章&#xff0c;同步在 AI 破局星球、知乎、掘金等地方都分享了。 原文在这里AI 编程&#xff1a;可视化 Java 项目 有很多人感兴趣&#xff0c;我打算写一个系列文章拆解这个项目&#xff0c;大家多多点赞支持~ 今天分享的是第一…

如何巧妙处理情绪化,让生活工作保持积极心态分享

目录 前言 1、首先&#xff0c;要认识到情绪化对我们生活工作带来的负面影响。 2、要处理情绪化&#xff0c;首先要学会观察自己的情绪。 3、其次&#xff0c;我们要学会换位思考。 4、与亲朋好友分享心情。 5、最后&#xff0c;培养自己的兴趣爱好。 前言 在这个快节奏、…

nestjs中@Injectable()的实现原理

以下是对@Injectable()的简单实现 import reflect-metadata;function Injectable() {return function (constructor: Function) {Reflect.defineMetadata(injectable, true, constructor);}; }class DependencyInjectionContainer {private instances = new Map();getInstance&…

alibaba学习笔记03(小滴课堂)

自定义Ribbon负载均衡策略实战 启动3个视频服务和一个订单服务&#xff1a; 我们可以看到它是随机调用的。 也可以使用其他负载均衡策略。 讲解新一代负载均衡组件feign介绍 这种方式去写死接口肯定是不妥当的。 于是我们使用feign负载均衡组件&#xff1a; 改造微服务 集成F…

【Linux】 系统目录结构

进入到根目录 cd /ls目录名具体作用/存放系统系统相关的目录文件/boot放置linux系统内核文件和启动时用到的一些引导文件/home包含linux系统上各用户的主目录&#xff0c;子目录名称默认以该用户名命名/root系统管理员root的家目录/bin包含常用的命令文件&#xff08;如ls 等&a…

CBA业务架构师认证考试含金量

CBA业务架构师认证考试的含金量主要体现在以下几个方面&#x1f447; 1️⃣权威性 &#x1f48e;CBA业务架构师是业务架构师协会提供了一项国际认证计划&#xff0c;该计划可以衡量业务架构师的能力&#xff0c; 并向证明公认的熟练程度的个人授予认证业务架构师(Certified Bus…

vue前端开发自学,祖孙多层级组件嵌套关系数据传输

vue前端开发自学,祖孙多层级组件嵌套关系数据传输&#xff01;官方提供了一个解决方案&#xff0c;就是&#xff0c;在根组件内使用provide,哪个子孙组件想调用这个数据&#xff0c;就可以inject接收就行了。虽然是方便了&#xff0c;但是这个有点要求&#xff0c;就是只能自上…

C 练习实例29

题目&#xff1a;给一个不多于5位的正整数&#xff0c;要求&#xff1a;一、求它是几位数&#xff0c;二、逆序打印出各位数字。 题目分析&#xff1a; 假设一个九位数12346789&#xff0c;我们想得到它是几位数&#xff0c;可以直接循环除以10&#xff0c;除到商为零位置。可…

初识 Elasticsearch 应用知识,一文读懂 Elasticsearch 知识文集(3)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

oracle重启数据库lsnrctl重启监听

oracle重启数据库lsnrctl重启监听 su到oracle用户下,命令 su - oracle切换需要启动的数据库实例&#xff1a; export ORACLE_SIDorcl进入Sqlplus控制台&#xff0c;命令&#xff1a; sqlplus /nolog以系统管理员登录&#xff0c;命令&#xff1a; connect / as sysdba如果是…

数据操作、数据预处理

1.数据类型&#xff1a; 2.数组元素操作&#xff1a; 3.数据预处理&#xff1a; import os import pandas as pd import numpy as np#创建csv文件并写入数据 os.makedirs(os.path.join(.., data), exist_okTrue) data_file os.path.join(.., data, house_tiny.csv) with open…

华为OD机试真题-堆内存申请-2023年OD统一考试(C卷)

题目描述: 有一个总空间为100字节的堆,现要从中新申请一块内存,内存分配原则为优先紧接着前一块已使用内存分配空间足够且最接近申请大小的空闲内存。 输入描述: 输入: 第1行是1个整数,表示期望申请的内存字节数; 第2到N行是用空格分割的两个整数,表示当前已分配的内存…

如何在电脑上免费更改 PDF 格式文档的字体大小?

对于需要编辑或修改的 PDF 文件来说&#xff0c;更改其字体大小是一个非常常见且必要的工作。虽然 Adobe Acrobat Pro DC 等专业的 PDF 编辑软件可以帮助您完成此任务&#xff0c;但他们通常都需要昂贵的恢复。幸运的是&#xff0c;有许多免费的 PDF 编辑工具可供选择。在本文中…

WSL dockers容器挂载windows下的文件

-v /mnt/c/Users/<Windows用户名>/<测试数据目录>:/app/test-20240104请注意&#xff0c;您需要将<Windows用户名>和<测试数据目录>替换为您在Windows上实际使用的用户名和测试数据目录。例如&#xff0c;如果您的Windows用户名是bear&#xff0c;测试…

【WPF.NET开发】流文档

本文内容 什么是流文档&#xff1f;流文档类型创建流内容与流相关的类内容架构自定义文本 流文档旨在优化查看和可读性。 流文档根据运行时变量&#xff08;例如&#xff0c;窗口大小、设备分辨率和可选的用户首选项&#xff09;来动态调整和重新排列内容&#xff0c;而不是设…

开源数据库系统OpenGauss本地部署

文章目录 前言1. Linux 安装 openGauss2. Linux 安装cpolar3. 创建openGauss主节点端口号公网地址4. 远程连接openGauss5. 固定连接TCP公网地址6. 固定地址连接测试 前言 openGauss是一款开源关系型数据库管理系统&#xff0c;采用木兰宽松许可证v2发行。openGauss内核深度融合…

1.5矩阵元素的引用

通过下标来引用矩阵的元素 A(3, 2)表示A矩阵第3行第2列的元素。 >> arr [1,2,3;4,5,6]; >> arr(4, 5) 10arr 1 2 3 0 04 5 6 0 00 0 0 0 00 0 0 0 10>> 如果引用元素超过矩阵的大小将自…