vue input 限制输入,小数点后保留两位 以及 图片垂直居中显示 和 分享 git 小技巧

 (1)input 限制输入,小数点后保留两位

<template>
  <div>
    <el-input v-model="number" @input="checkNumber" @blur="completeNumber" placeholder="请输入"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: '' // 初始值为空字符串
    }
  },
  methods: {
    checkNumber(value) {
      let number = value
        .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
        .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
        .replace(/^(-)*(\d+)\.(\d{0,2}).*$/, '$1$2.$3'); // 只能输入两个小数

      this.number = number;
    },
    completeNumber() {
      let number = this.number.trim(); // 去掉前后空格
      if (!number) {
        this.number = ''; // 如果数字为空,则清空输入框
        return; // 如果数字为空,不继续进行后续操作
      }
      let value = number;

      number = parseFloat(number).toFixed(2); // 将数字转换为浮点数再转换回字符串,去掉前导零
      if (number < 0 || number > 100) {
        this.$message.error({
          message: '输入的范围应为0-100%',
          duration: 400
        });
        this.number = undefined
        return
      }

      // 判断价格小数部分是否需要补全
      const needsCompletion = !/\.\d{2}$/.test(value)
      this.number = number;

      // 如果需要补全,则提示用户
      if (needsCompletion) {
        this.$message.info({
          message: '数字已自动补全为两位小数。',
          duration: 400
        });
      }
    }
  }
}
</script>

<style scoped>
/* Add your styles here if needed */
</style>

推荐和参考文章:Vue input 限制输入正负数,小数点后保留两位_vue中input输入金额小数点后两位之后就不能输入了-CSDN博客文章浏览阅读3.1k次,点赞2次,收藏4次。Vue input 限制输入正负数,小数点后保留两位_vue中input输入金额小数点后两位之后就不能输入了https://blog.csdn.net/weixin_44021888/article/details/127065250

(2) 图片垂直居中显示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Center Image</title>
<style>
.div-container {
  position: relative;
  width: 80px;
  height: 67px;
  background-color: lightgray;
}

.image-holder {
  position: absolute;
  top: 11px;
  left: 0;
  width: 80px;
  height: 45px;
  display: flex;
  justify-content: center;
}

.image-holder img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
</style>
</head>
<body>
<div class="div-container">
  <div class="image-holder">
    <img src="E:\hehedaWork\test\girl.jpg" alt="Your Image" />
  </div>
</div>
</body>
</html>

error: Your local changes to the following files would be overwritten by merge:(有未提交的文件 git pull冲突解)

 如果你本地有修改,然后也不好提交,又需要pull远程的代码到本地,你可以在本地先执行一下: 

  1. git stash, 
  2. 然后git pull ,
  3. 再然后git stash pop就可以了
  4. 然后你就在tortoiseGit上commit,再push

推荐和参考文章:error:Your local changes to the following files would be overwritten by merge:_error: your local changes to the following files w-CSDN博客文章浏览阅读2.1k次。error:Your local changes to the following files would be overwritten by merge:1. 用git pull来更新代码的时候,遇到了以下报错信息:error:Your local changes to the following files would be overwritten by merge: xxx/xxx/xxx.vue Please, commit your changes or stash them before y_error: your local changes to the following files would be overwritten by merhttps://blog.csdn.net/StoneVivi/article/details/114809766

error: Your local changes to the following files would be overwritten by merge:(有未提交的文件 git pull冲突解)-CSDN博客文章浏览阅读5.7k次,点赞5次,收藏7次。这个错误通常发生在你尝试将远程分支合并到本地分支时,但你的本地分支上存在未提交的更改。Git会阻止合并操作,以防止你的未提交更改被覆盖。_error: your local changes to the following files would be overwritten by merhttps://blog.csdn.net/weixin_43637980/article/details/132468627 

情况一:合并主干的时候出现冲突,解决冲突:

git fetch
git rebase origin/master
git rebase --continue
git push --force

情况二:当本地的已经乱了,但是远端的master已经合并了你最后一次的代码,此时你可以先把你本地修改的文件先拷贝一份出来,然后让远端的master的代码强行覆盖掉当前的目录内容。弄好之后再把文件拷贝进去

在当前分支git fetch

然后 git checkout master (旧的)

可以查看一下日志 git log

拉取最新的 git pull

可以查看一下日志 git log (新的)

git reset --hard orgin/master

可以查看一下日志 git log

最后 把更新过的且当做备份的文件拷贝替换一下,如果有冲突,就文本对比一下,解决一下就好了

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【制作100个unity游戏之27】使用unity复刻经典游戏《植物大战僵尸》,制作属于自己的植物大战僵尸随机版和杂交版10(附带项目源码)

最终效果 系列导航 文章目录 最终效果系列导航前言使用DoTween优化阳光生成和拾取效果拾取阳光优化生成阳光优化 场景加载进度条新增加载场景Loading&#xff0c;绘制开始界面绘制菜单界面滑动滚轮一直滚动 场景加载源码结束语 前言 本节主要实现使用DoTween优化阳光生成和拾取…

域策略笔记

域策略 导航 文章目录 域策略导航一、设置客户端壁纸二、重定向用户配置文件路径三、部署网络打印机四、部署共享文件夹为网络驱动器五、通过域策略推送软件安装六、通过域策略限制软件的使用通过路径进行限制通过进程限制 七、通过域策略将文件添加白名单八、通过域策略添加可…

Python机器学习决策树可视化工具库之pybaobabdt使用详解

概要 决策树是一种常用的机器学习算法,广泛应用于分类和回归任务。为了更好地理解和解释决策树模型的决策过程,pybaobabdt 库提供了一种可视化工具,帮助用户以图形化方式展示决策树的结构和决策路径。本文将详细介绍 pybaobabdt 库,包括其安装方法、主要特性、基本和高级功…

5位AI界“考生”参加高考作文写作,最高分竟然是...

随着一年一度高考的帷幕缓缓降下&#xff0c;如同往昔&#xff0c;各省高考作文命题迅速成为了社会各界热议的焦点。高考作文命题历来紧扣时代脉搏&#xff0c;而今年新课标I卷则直接聚焦于当前最为炙手可热的领域——“人工智能”。 阅读下面的材料&#xff0c;根据要求写作。…

python __init__.py 文件案例练习

通过一些案例练习来更好地理解 __init__.py 的用法。我们将创建一个简单的 Python 包,并在 __init__.py 中实现不同的功能。 案例一:基本包结构 创建包目录结构: mypackage/__init__.pymodule1.pymodule2.py实现 module1.py 和 module2.py: # mypackage/module1.py def fu…

vue-editor设置字体font-family

背景&#xff1a;Vue项目中需要用到富文本编辑器&#xff0c;所以选择了vue-editor这个富文本编辑器&#xff0c;发现字体font-family只有三种Sans Serif、Serif、MonoSpace可以选择&#xff0c;满足不了产品的需求&#xff0c;所以用想要定义成常用字体&#xff0c;主要是需要…

SwiftUI 利用 Swizz 黑魔法为系统创建的默认对象插入新协议方法(六)

功能需求 在 SwiftUI 的开发中,我们往往需要借助底层 UIKit 的“上帝之手”来进一步实现额外的定制功能。比如,在可拖放(Dragable)SwiftUI 的实现中,会缺失拖放取消的回调方法让我们这些秃头码农们“欲哭无泪” 如上图所示,我们在拖放取消时将界面中的一切改变都恢复如初…

【unity笔记】二、海洋系统Crest Ocean System基础

1. 创建海平面 首先确定项目中导入了HDRP插件。这里使用Crest Ocean System HDRP插件。 在场景下创建空对象&#xff0c;这里命名为Ocean。将 OceanRenderer 组件分配给Ocean。该组件将生成海洋几何图形并执行所有必需的初始化。其中Global Wind Speed 属性可以调节风浪大小。…

【新品上架】动捕级视觉定位精度!!首款搭载 VIOBOT 模块的无人机发布!

P450_Viobot无人机是P450系列科研无人机的最新产品&#xff0c;硬件上采用VIOBOT定位模块&#xff0c;室内定位精度极高&#xff0c;静态定位精度可达到与动捕定位相当的厘米级定位&#xff0c;飞行悬停定位误差在3.5cm内。也可室外GPS飞行&#xff08;可选装RTK&#xff09;&a…

latex导入图片报错

忘记导包了 \usepackage{graphicx}其中Photo是图片名字 \begin{figure}\centering\includegraphics[width0.5\linewidth]{Photo.png}\caption{Enter Caption}\label{fig:enter-label} \end{figure}

基于STM32移植U8g2图形库——OLED显示(HAL库)

文章目录 一、U8g2简介1、特点2、U8g2的使用步骤 二、I2C相关介绍1、I2C的基本原理2、I2C的时序协议 三、OLED屏的工作原理四、汉字点阵显示原理五、建立STM32CubeMX工程六、U8g2移植1、U8g2源码2、移植过程 七、代码编写1、参考博主实现的U82G的demo例程&#xff08;1&#xf…

Matlab进阶绘图第59期—棒棒糖图

​棒棒糖图本质上是柱状图的一种变体。 棒棒糖图通过在每根柱子顶端添加圆点&#xff0c;以表示数据之间的相对位置。 此外&#xff0c;一般还会对每根棒棒糖按数值大小进行排序&#xff0c;从而更加方便阅读。 本文利用自制的Lollipop工具进行棒棒糖图的绘制&#xff0c;先…

python数据分析--- ch1-2 python初识入门

python数据分析--- ch1-2 python初识入门 1. 安装并启动jupyter2. 打印变量print()练一练 3. 变量与赋值 input()3.1 示例--饮料交换3.2 饮料交换完整code3.3 jupyter中写入code到py文件中3.4 在终端运行.py文件 &#xff1a; python 文件名3.5练一练1&#xff1a;简易版2&…

cdh zookeeper报错 Canary 测试建立与 ZooKeeper 服务的连接或者客户端会话失败。

我一直纳闷这个是什么问题&#xff0c;搜索了半天没有结果&#xff0c;因为别人没有遇到过。后面我重新搭建了另一套cdh&#xff0c;然后看了一下默认的配置&#xff0c;然后更新上去才发现的。 这里面的clientPortAddress不要手动设置端口号。 别勾选通信验证 不要开启TLS/SS…

嵌入式学习(二)——c51单片机(1)

使用keil软件 同时安装CH340驱动 将变成好的文件存成 .hex 交替闪烁代码 #include "reg51.h"void delay(unsigned int n) { while(n) { --n; } }int main(void) { while(1) { P20x00; delay(20000); P20xff; delay(20000); } return 0; } 让指定的灯亮 #includ…

在调用接口上map与forEach的区别

在场景&#xff1a;一个表格数据需要上传&#xff0c;每行表格需要上传图片->这就需要在提交时对数据也就是数组进行处理&#xff08;先将每个元素图片上传拿到图片id 这种情况我刚开始就用的map处理&#xff0c;然后问题来了&#xff0c;提交的接口调用了&#xff0c;但是…

【Kadane】Leetcode 918. 环形子数组的最大和【中等】

环形子数组的最大和 给定一个长度为 n 的环形整数数组 nums &#xff0c;返回 nums 的非空 子数组 的最大可能和 。 环形数组 意味着数组的末端将会与开头相连呈环状。形式上&#xff0c; nums[i] 的下一个元素是 nums[(i 1) % n] &#xff0c;nums[i] 的前一个元素是 nums…

云效codeup

云效codeup 什么是云效codeup云效codeup操作代码库代码托管代码检测代码提交代码评审代码迁移 使用感受及建议 什么是云效codeup 云效代码管理&#xff08;Codeup&#xff09;是阿里云云效一站式 BizDevOps 平台提供的自研代码管理服务&#xff0c;为企业提供代码托管、代码评…

mysql:1205-Lock wait timeout exceeded;try restarting transaction

1.现象 2.分析 使用下面sql在自带数据库的information_schema中查询,注意观察那些长时间开启事务又没完成的进程,然后根据进程的db、操作人、主机、事务开启时间和状态,来排查是什么情况导致的事务未完成(代码异常、执行时间超时等等);我这里是异步作业事务执行时间过长导致的 …

夏日炎炎,护牙不闲——口腔问诊小程序开发助你笑口常开

近年来&#xff0c;“口呼吸”、“牙齿矫正”、“美牙贴片”等词越来越多的出现在大众的视野中&#xff0c;口腔健康成为了人们关注的新热点。但是市面上的口腔诊所数量众多又参差不齐&#xff0c;如何选择最合适的口腔诊所是人们面对的新问题。为了有效解决这一现状&#xff0…