vue 金额组件，输入提示单位：‘千’、‘万’、‘十万’...并用‘，’三个格式化

小菜花29

已于 2024-05-06 15:23:38 修改

阅读量1k

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2024-05-06 15:23:11 首次发布

本文链接：https://blog.csdn.net/jinse29/article/details/138148637

近期项目中遇到一个需求，金额输入框，输入过程中自动提示‘千’、‘万’、‘十万’、‘百万’......等单位提示，鼠标失去焦点后，并用‘,’三位隔开计数。

例如：

输入：12345.99

失去焦点：12,345.99

放一张图展示下效果吧

直接贴代码吧

封装的组件inputCurrency.vue

<template>
  <el-tooltip :manual="manual" popper-class="elInputCurrency" v-model="tooltipModel"
              class="elInputCurrency" effect="light" :content="numberDigit" placement="top-start">
    <el-input
        v-if="!readonly || readOnlyBorder"
        placeholder="请输入"
        :disabled="disabled"
        :readonly="readonly"
        v-show="show"
        @blur="blur"
        @focus="focus"
        @input="inputCurrency"
        :value="innerVal"
    >
    </el-input>
    <span v-else>{
  
  {
        innerVal
      }} 元</span>
  </el-tooltip>
</template>
<script>