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

news2024/11/15 11:15:05

写到第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.thousands
  const 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 = true
    el.value = el.value.replace(thousandsReg, '')
  }
  el.onblur = function () {
    el.isFocus = false
    if (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 = fmt
        console.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

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

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

相关文章

男士内裤哪个品牌好穿?男士内裤品牌测评推荐,干货满满

随着时代的进步和发展,男士内裤现在普遍分为三角、平角、四角的三个大类,不过大多数男性朋友都是穿平角四角为主。虽然男士内裤款式众多,但大部分男同胞每一条内裤都是穿非常久的,实际上男士内裤需要定期更换才能保持更换的舒适性…

《十日终焉》中的定律整理-向虫队学习(举例+持续更新)

1、二八定律 二八定律,又称帕累托法则,也叫巴莱多定律。 是19世纪末20世纪初意大利经济学家巴莱多发明的。其中指出,约仅有20%的因素影响80%的结果。也就是说:所有变因中,最重要的仅有20%,虽然剩余的80%占…

第二证券今日投资参考:银保渠道合作限制松绑 低空旅游借势起飞

昨日,两市股指盘中震动上扬,沪指一度涨近1%续创年内新高,创业板指一度涨超2%。到收盘,沪指涨0.83%报3154.32点,深证成指涨1.55%报9788.07点,创业板指涨1.87%报1900.01点,科创50指数涨2.26%&…

如何让组织充满活力?你需要做好这七步

组织活力,通俗点说就是: 从竞争对手角度看,组织活力强的组织能做到竞争对手做不到的事情; 从客户角度看,组织活力强的组织,客户感受好; 从员工角度看,组织活力强的组织&#xff0c…

【速看】软考架构考前复习20问!你能答出多少?

马上就要进行今年的软考了,大家都准备得怎么样了呢,2024上半年的软考架构得分点你知道了吗? 目标不光是把历年母题的考点规律吃透,还要规划好各类题型的做题时间,除了纸质版还要上机模拟,更好的适应机考&am…

将java项目上传到GitHub步骤

文章目录 一、GitHub 作用二、github如何修改默认分支为master三、手把手教你把项目上传github上四、github怎么删除仓库或项目五、github配置ssh key密钥的步骤六、执行到push时报错的解决办法七、github怎么修改仓库语言 一、GitHub 作用 GitHub 是一个存放软件代码的网站&a…

上海计算机学会2023年9月月赛C++丙组T2Z形填充

题目描述 给定一个整数 n,再给定 n2 个字符,请将这些字符以 z 形排成一个 nn 的矩阵。 z 形的定义是,第一个字符在左上角,然后沿对角线以 z 形放置字符。对于 n4 ,z 形排列的先后顺序标记如下: 输入格式 …

基于Spring Boot的网页即时聊天系统

目录 一、系统总体功能设计 二、开发工具及环境 三、前台系统主要功能实现界面展示 1.登入模块 2.主页模块 3.好友设置模块 4.好友动态模块 5.个人中心模块 6.好友设置详情 7.视频通话 8.语音通话 9.对消息操作 四、后台系统主要功能实现界面展示 1.登入模块 2.后…

Git 分支命令操作详解

目录 1、分支的特点 2、分支常用操作 3、分支的使用 3.1、查看分支 3.2、创建分支 3.3、修改分支 3.4、切换分支 3.5、合并分支 3.6、产生冲突 3.7、解决冲突 3.8、创建分支和切换分支说明 1、分支的特点 同时并行推进多个功能开发,提高开发效率。各个分…

show profile

功能 当你执行一个复杂的 SQL 查询时,这个命令可以帮助你了解查询的各个部分花费了多少时间,从而找到可能的性能瓶颈。默认情况下,参数处于关闭状态,并保存最近15次的运行结果 开启 查看是否支持 SHOW VARIABLES LIKE profili…

如何给文件和文件夹添加备注信息

1. 给文件添加备注信息 1. 打开文件夹,点击查看 → 选项 → 更改文件夹和搜索选项 → 勾除隐藏受保护的操作系统文件 → 勾选显示隐藏的文件、文件夹和驱动器; 2. listary工具搜索desktop.ini,随便点击一个desktop.ini文件,即可…

Java String转JSONObject时保持字段顺序不变

Java String转JSONObject时保持字段顺序不变 问题背景解决方案 问题背景 在业务接口开发过程中,有一个新增接口,需要支持批量新增数据,这时入参就需要用到 json 格式数据,且包含 list 集合,比如这样的数据格式&#x…

ZeptoMail邮箱API发送邮件的参数如何配置?

ZeptoMail邮箱API发送邮件的步骤?怎么使用API接口? 在使用ZeptoMail邮箱API发送邮件时,正确的参数配置是确保邮件能够成功发送的关键。下面,AokSend将详细介绍如何配置ZeptoMail邮箱API发送邮件的参数。 ZeptoMail邮箱API发送邮…

Web界面加持!数据库备份神器,助你轻松备份数据!

使用这款带有Web界面的数据库备份神器,你可以轻松设置定时备份,确保数据安全无忧。备份结果即时通知,让你随时掌握备份状态。备份完成后,你将收到备份结果通知。无论是成功备份还是出现错误,你都能及时了解备份情况&am…

Failed to start tomcat.service: Unit is not loaded properly: Bad message 如何解决?

错误 “Failed to start tomcat.service: Unit is not loaded properly: Bad message” 通常意味着的 tomcat.service systemd 配置文件存在语法错误或配置不正确。为了解决这个问题,一步步检查和修正这个服务文件。 1. 检查 tomcat.service 文件 首先&#xff0c…

初识 Linux线程

再学习完Linux进程后,本期,我们来讲解Linux线程 1.为什么需要线程 在之前学习进程前,我们写的所有代码几乎都是单个执行流的,也就是说我们的代码只有一条路走. 在学习进程后,我们可以通过fork进行进程创建,给进程分配任务进行多执行流执行任务,问题来了 那我们为什么还需要…

会员卡积分收银源码系统 支持多门店系统 带完整的安装代码包以及安装搭建教程

在数字化浪潮的推动下,传统零售行业面临着巨大的转型压力。为了满足现代消费者多样化的需求,提高门店管理效率和顾客满意度,小编给大家分享一款会员卡积分收银源码系统——支持多门店系统,并附带了完整的安装代码包以及安装搭建教…

Java后端初始化项目(项目模板)

介绍 emmmm,最近看了一些网络资料,也是心血来潮,想自己手工搭建一个java后端的初始化项目模板来简化一下开发,也就发一个模板的具体制作流程,(一步一步搭建,从易到难) ok&#xff…

【Android】Kotlin学习之数据容器 -- 集合

一. 定义 List : 是一个有序列表, 可通过下标访问元素. 元素可以在list中出现多次, 元素可重复 Set : 是元素唯一的集合, 一般来说Set中元素的顺序并不重要, 无序集合. Map : 是一组键值对, 键是唯一的, 每个键刚好映射到一个值, 值可以重复 二. 集合创建 三. 示例 mutabl…

2D-3D 转换中,为什么世界坐标要扩充成四维, 图像坐标要扩充成三维?

总结 在计算机视觉和图形学中,将世界坐标扩充成四维,以及图像坐标扩充成三维,是为了便于运用齐次坐标(homogeneous coordinates)进行坐标变换。这样的做法简化了投影变换的数学表示和计算,特别是在三维场景…