vue2项目升级到vue3经历分享5

写到第5篇了,解决了很多问题,还有一些需要调整
1 el-input-number指令兼容性调整
下面这个可编辑的表格,全是0,于是需要一个指令,让它自己实现如果是0,就置空;如果是数字就是格式化为千分位;如果焦点放上去,变成数字。焦点失去有变成格式化。
1
在vue2中这么写,但在vue3中vnode.elm.querySelector,这种写法是不行的,因为你不应该直接操作dom,el 参数实际上指向的是 el-input-number 的根 DOM 元素,而不是内部的 input 元素。由于 el-input-number 是组件,不是原生的 input 元素,直接监听其内部 input 事件可能不太方便。

let options = {precision: 2,thousands: ','
}
const money = (el, binding, vnode) => {// // 判断是否是input元素if (vnode) {el = vnode.elm.querySelector('input')} else {throw new Error('v-money-format requires 1 input')}const opt = Object.assign({}, options, binding.value ? binding.value : {})const regStr = '/^$*+?.|'const inRegStr = regStr.includes(opt.thousands) ? (`\\${opt.thousands}`) : opt.thousandsconst thousandsReg = new RegExp(inRegStr, 'g')if (!el.isFocus) { //设置初始值 input框为0 去除显示if (el.value == 0) {el.value = '';}else if(el.value != '' || el.value != 0){  //初始化千分位el.value = el.value.replace(thousandsReg, '').cut();}}el.onfocus = function () {el.isFocus = trueel.value = el.value.replace(thousandsReg, '')}el.onblur = function () {el.isFocus = falseif (el.value != '') {el.value = el.value.cut();}if (el.value == 0) {el.value = '';}// el.value = moneyFormat(el.value, opt.precision, opt.thousands)}el.oninput = function () {el.value = el.value.replace(/[^\d.-]/g, '')}
}export default money

把这个代码放到文心一言,改成vue3的模式,无效,只能自己想办法。调整为vue3的模式

/*** 金额格式化指令*/
import $tool from '@/utils/tool'  const options = {  precision: 2,  thousands: ','  
}  const money = {  mounted(el, binding,vnode) {  let input;if (vnode){input = el.querySelector('input');} else{throw new Error('v-money-format requires 1 input');}const opt = Object.assign({}, options, binding.value || {})  const regStr = '/^$*+?.|'  const inRegStr = regStr.includes(opt.thousands) ? (`\\${opt.thousands}`) : opt.thousands  const thousandsReg = new RegExp(inRegStr, 'g')  // 初始化输入框if (!input.isFocus && input.value) {if (input.value === '0') {input.value = '';} else if (input.value !== '' || input.value !== '0') {let fmt = $tool.cut(input.value.replace(thousandsReg, ''));input.value = fmtconsole.log(input.value);}} else {input.value = null;}// 监听事件input.addEventListener('focus', () => {input.isFocus = true;input.value = input.value.replace(thousandsReg, '');});input.addEventListener('blur', () => {input.isFocus = false;if (input.value !== '') {input.value = $tool.cut(input.value);}if (input.value === '0') {input.value = '';}});input.addEventListener('input', () => {if (input.value) {input.value = input.value.replace(/[^\d.-]/g, '');} else {input.value = '0';}});},  
}  export default money;

运行提示moneyFormat.ts:31 The specified value "3,333" cannot be parsed, or is out of range,
vue2是没有这个问题的,分析原因,在vue2中el-input-number类型依旧是text
1
但是在element-plus中变成了number,改成el-inpu,结果发现blur事件后input.value被置空了。搞了快一天了,项目进度要紧,这种方案放弃了。
2
如果不用指令,采用formatterparser会怎么样呢?
1
调试你会发现,如果是在表格中,你没改一下,整个数字样式都不会重新格式化一遍。虽然这样,但是可用。
2 v-model中默认属性的问题
在vue2中当你的组件采用v-model绑定值,例如
1
进入到组件中,通过this.value赋值,这个在vue3中是不行的,需要改成modelValue,否则undefined错误
1
还需要定义出来。
1
3 keep-alive有些页面缓存了,有些没有缓存
setup模式下,给页面定义一个名称,就可以被缓存。

defineOptions({name: "采购入库单"  
})

但是在本次vue2升级到vue3的过程中,发现有些页面增加后,缓存了,有些没有被缓存了。经过调试发现
1
上面的name中的内容,要跟页签的名称一致,否则不会缓存。也就是说,这个name必须设置为凭证字才可以。这么推理keepalive应该是map结构。
1
即你必须要改成与页签同名,因为这个页面名在项目中是Component的名称
1

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

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

相关文章

使用docker安装seafile

使用docker安装seafile 1 介绍seafile Seafile 是一款开源的企业云盘,支持全平台(浏览器、Windows、Mac、Linux、Android、IPhone等)客户端。Seafile 内置协同文档 SeaDoc ,让协作撰写、管理和发布文档更便捷。最重要的这是国产…

【网站项目】SpringBoot796水产养殖系统

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板&#xff…

【JavaEE初阶系列】——Cookie和Session应用之实现登录页面

目录 🚩本章目标 1.登录页面 2.servlet处理上述的登录请求 3.网站主页(成功登录之后的页面) 🚩实现过程 🎓登录页面 🎓Servlet处理登录请求 🎈获取请求传来的参数(用户名和密码) 🎈验证…

一件事做了十年

目录 一、背景二、过程1.贫困山区的心理悲哀2.基础差的客观转变3.对于教育的思考4.持续做这件事在路上5.同行人有很早就完成的,有逐渐放弃的,你应该怎么办?6.回头看,什么才是最终留下的东西? 三、总结 一、背景 在哪里出生我们无…

《Linux运维总结:ARM64架构CPU基于docker-compose一离线部署rabbitmq 3.10.25容器版镜像模式集群》

总结:整理不易,如果对你有帮助,可否点赞关注一下? 更多详细内容请参考:《Linux运维篇:Linux系统运维指南》 一、部署背景 由于业务系统的特殊性,我们需要面向不通的客户安装我们的业务系统&…

【ubuntu】ubuntu-18.04开机卡在Starting User Manager for UID 120....问题解决方案

错误截图 解决方案 启动系统,开机界面单击按键esc键,注意需要将鼠标定位到菜单界面,移动键盘上下键选择Advanced options for Ubuntu 进入如下菜单,选择recovery mode 回车之后会弹出如下界面,选择如下root&#xff0…

超详细的胎教级Stable Diffusion使用教程(四)

这套课程分为五节课,会系统性的介绍sd的全部功能和实操案例,让你打下坚实牢靠的基础 一、为什么要学Stable Diffusion,它究竟有多强大? 二、三分钟教你装好Stable Diffusion 三、小白快速上手Stable Diffusion 四、Stable dif…

【C语言/Python】嵌入式常用数据滤波处理:卡尔曼滤波器的简易实现方式(Kalman Filter)

【C语言/Python】嵌入式常用数据滤波处理:卡尔曼滤波器的简易实现方式(Kalman Filter) 文章目录 卡尔曼滤波卡尔曼滤波公式卡尔曼滤波数据处理效果C语言的卡尔曼滤波实现附录:压缩字符串、大小端格式转换压缩字符串浮点数压缩Pack…

Spring-Cloud-OpenFeign源码解析-01-OpenFeign简介

OpenFeign简介 OpenFeign是一种声明式、模板化的HTTP客户端(仅在Application Client中使用)。声明式调用是指,就像调用本地方法一样调用远程方法,无需感知操作远程http请求。 OpenFeign和Feign的区别 Feign是Spring Cloud组件中一个轻量级RESTful的HT…

亚信安全发布《2024年第一季度网络安全威胁报告》

亚信安全2024年第一季度网络安全威胁报告 一季度威胁概览 《亚信安全2024年第一季度网络安全威胁报告》的发布旨在从一个全面的视角解析当前的网络安全威胁环境。此报告通过详尽梳理和总结2024年第一季度的网络攻击威胁,目的是提供一个准确和直观的终端威胁感知。…

LNMP环境部署WordPress——使用源码包安装方式部署环境

目录 一.前提准备 二.源码安装Mysql 1.MySQL类型 2.MySQL 版本说明 3.MySQL 安装方式 3.1 yum 安装 3.2 编译安装 3.3 二进制安装 3.4 rpm 安装 4. 编译安装MySQL5.7 4.1 清理安装环境 4.2 创建mysql用户 4.3 从官网下载tar包 4.4 安装编译工具 4.5 解压 4.6 …

【教学类-55-01】20240511图层顺序挑战(四格长条纸)(4*4)和“手工纸自制参考图”

作品展示 背景需求 空间思维图层挑战2|逻辑推理|空间想象力 - 小红书 (xiaohongshu.com)https://www.xiaohongshu.com/discovery/item/62cbf6c60000000010026aa0?app_platformandroid&ignoreEngagetrue&app_version8.35.0&share_from_user_hiddentrue&typevi…

Django项目运行报错:ModuleNotFoundError: No module named ‘MySQLdb‘

解决方法: 在__init__.py文件下,新增下面这段代码 import pymysql pymysql.install_as_MySQLdb() 注意:确保你的 python 有下载 pymysql 库,没有的话可以使用 pip install pymysql安装 原理:用pymysql来代替mysqlL…

探索人类意识的多样性:从安全感到语感、节奏感的差异

在我们的日常生活中,人类意识表现出多种多样的特点,这些特点往往与个体的天生禀赋和生活经历密切相关。从安全感到语感、节奏感,每个人的表现都有所不同。今天,让我们一起来探索这些差异,感受人类意识的多样性。 首先&…

stable diffusion WebUi本地安装

一、stable diffusion 介绍 Stable Diffusion是一种先进的文本到图像的生成模型,它可以根据给定的文本输入生成高度逼真的图像。 Stable Diffusion模型因其高效性和灵活性,在AI图像生成领域引起了广泛关注,并在实际应用中展示了其强大的能力…

论文盲审吐槽多,谁给盲审不负责的老师买单?如何看待浙江大学「一刀切」的研究生学位论文双盲评审制度?

::: block-1 “时问桫椤”是一个致力于为本科生到研究生教育阶段提供帮助的不太正式的公众号。我们旨在在大家感到困惑、痛苦或面临困难时伸出援手。通过总结广大研究生的经验,帮助大家尽早适应研究生生活,尽快了解科研的本质。祝一切顺利!—…

day6Qt作业

人脸识别系统 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <opencv2/opencv.hpp> #include <iostream> #include <math.h> #include<opencv2/face.hpp> #include <vector> #include <map> #include <QMessag…

美颜滤镜SDK解决方案,稳定可靠,易于集成

高质量的视觉体验已成为企业吸引用户、提升品牌形象的关键&#xff0c;美摄科技凭借其领先的美颜滤镜SDK技术&#xff0c;为企业提供了从人像美颜到多元场景处理的全方位解决方案&#xff0c;助力企业轻松实现视觉升级。 一、强大能力&#xff0c;覆盖多场景 美摄科技美颜滤镜…

MIPI DPHY HS传输模式SoT和EoT的传输值

目录 1. 高速传输模式的传输序列 2. SoT传输序列 3. EoT传输序列 1. 高速传输模式的传输序列 Mipi DPHY的高速数据传输&#xff08;HST&#xff1a;High Speed Transmission&#xff09;以突发&#xff08;Burst&#xff09;方式发生。 为了帮助接收机同步&#xff1a; (1) …

Vue3实战笔记(13)—pinia安装笔记

文章目录 前言安装和配置pinia总结 前言 Pinia 是 Vue 的专属状态管理库&#xff0c;它允许你跨组件或页面共享状态。 Pinia是一个轻量级的状态管理库&#xff0c;它专注于提供一个简单的API来管理应用程序的状态。相比之下&#xff0c;Vuex是一个更完整的状态管理库&#xf…