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

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

最近更新

  1. TCP协议是安全的吗?

    2024-06-16 16:18:02       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-16 16:18:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-16 16:18:02       20 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-16 16:18:02       20 阅读

热门阅读

  1. v3+ts/request封装axios

    2024-06-16 16:18:02       8 阅读
  2. Vue基础面试题(三)

    2024-06-16 16:18:02       7 阅读
  3. Web前端指令符:解码、应用与挑战

    2024-06-16 16:18:02       5 阅读
  4. 【无标题】

    2024-06-16 16:18:02       5 阅读
  5. 超级数据查看器 教程pdf 1-31集 百度网盘

    2024-06-16 16:18:02       10 阅读
  6. Oracle数据库之多行函数(十九)

    2024-06-16 16:18:02       8 阅读
  7. js 刷题常用方法

    2024-06-16 16:18:02       8 阅读
  8. [C++] 小游戏 斗破苍穹 2.11.6 版本 zty出品

    2024-06-16 16:18:02       10 阅读
  9. 什么是仲裁器(Arbiter)?

    2024-06-16 16:18:02       25 阅读
  10. C++学习(21)

    2024-06-16 16:18:02       10 阅读
  11. (53)MOS管专题--->(08)MOS管N沟道MOS管

    2024-06-16 16:18:02       11 阅读