快捷導(dǎo)航

vue中el-input金額千分符自動轉(zhuǎn)換的實現(xiàn)示例

更新時間：2025年06月09日 08:28:57 作者：濤哥碼咖

本文主要介紹了vue中el-input金額千分符自動轉(zhuǎn)換,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 說明

在平時項目中，對于金額處理顯示一般需要按千分符顯示，通常實現(xiàn)會申明一個formater函數(shù)來進行轉(zhuǎn)換，但是涉及的地方比較多試，使用起來比較繁瑣，封裝一個單獨的組件比較合理

2. 實現(xiàn)組件代碼

ElMoneyInput.vue

<template>
  <div :style="{'background-color': disabled ? 'transparent' : '#fff'}">
    <span class="money-input" v-if="!isInput" @click="focusHanle" :disabled="disabled" :value="viewValue">{{ viewValue }}</span>
    <el-input ref="moneyInput" v-else v-bind="$attrs" :value="value" @input="handlerChange" @blur="handlerBlur" autofocus onkeypress="if(event.keyCode == 13) return false;"/>
  </div>
</template>
<script>
export default {
  name: 'ElMoneyInput',
  inheritAttrs: false,
  model: {
    prop: "value",
    event: "input"
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    disabled:{
      type:Boolean,
      default:false
    },
    rules: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    value(val, old) {
      if (val !== old) {
        this.init()
      }
    }
  },
  mounted() {
    this.init()
  },
  data() {
    return {
      isEdit: true,
      isInput: false,
      viewValue: ''
    };
  },
  methods: {
    init() {
      if (!this.isInput) {
        this.viewValue = this.formatMoney(this.value || 0)
        this.$emit('input', this.blurformat(this.value || 0))
      }
    },
    focusHanle() {
      if (this.disabled) return
      this.isInput = !this.isInput
      this.$emit('input', this.blurformat(this.value || 0))
      this.$nextTick(() => {
        this.$refs.moneyInput.focus()
      })
    },
    formatMoney(cellValue, num = 2) {
      if (isNaN(cellValue)) {
        return ""
      }
      if (cellValue === 0) {
        return '0.00';
      }
      return this.$Utils.formatMoney(cellValue, num);
    },
    format(v) {
      return (`${v}`.match(/([\d\.]+)/) || "")[0];
    },
    blurformat(v) {
      return v ? Number.parseFloat(v).toFixed(2) : "";
    },
    handlerChange(v) {
      this.$emit('input', v)
    },
    handlerBlur() {
      this.isInput = false;
      this.$emit('input', this.blurformat(this.value))
      this.viewValue = this.formatMoney(this.value)
    },
    // handleFocus() {
    //   this.isInput = true;
    //   this.$emit('input', this.blurformat(this.value))
    // }
  }
};
</script>
<style lang="less">
.span-input{
  display: inline-block;
  width: 100%;
  height:28px;
}
.money-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  background: transparent !important;
    cursor: text !important;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  .el-input__inner {
    background: transparent !important;
    cursor: text !important;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }
}
</style>