在 Element-UI 中封装表单金额输入框

2024-02-09 08:27:39

既定观点

表单金额输入框是页面上非常常见的一个控件，它既可以是普通的输入框，也可以是带单位的选择框，或者带滑块的金额区间输入框。在不同的使用场景下，金额输入框需要满足不同的使用需求，比如下拉选择器可以限定输入的最小值和最大值，而滑块金额区间输入框则方便用户快速选定一个金额区间。

正文

需求分析

在日常的迭代开发中，通常我们会遇到这样的场景：在一个表单中需要用户输入金额，并校验金额的格式。这个需求你一定遇到过，但是现在，我们还需要做到：当用户离开输入框（失去焦点）时，输入的内容变成了用逗号每隔 3 位分隔的数字，并展示给用户。且最后提交金额时，参数的值仍然是正常数字，不包含逗号。

实现步骤

创建一个新的 Vue 项目。
安装 Element UI。
在 main.js 中引入 Element UI。
在 App.vue 中创建一个表单金额输入框。
在 App.vue 中编写 JavaScript 代码来实现当用户离开输入框时，输入的内容会变成用逗号每隔 3 位分隔的数字。
在 App.vue 中编写 JavaScript 代码来实现当用户提交表单时，参数的值仍然是正常数字，不包含逗号。

具体实现

1. 创建一个新的 Vue 项目

vue create element-ui-money-input

2. 安装 Element UI

cd element-ui-money-input
npm install element-ui

3. 在 `main.js` 中引入 Element UI

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

4. 在 `App.vue` 中创建一个表单金额输入框

<template>
  <div>
    <el-form :model="form">
      <el-form-item label="金额">
        <el-input v-model="form.money" placeholder="请输入金额"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        money: ''
      }
    }
  }
}
</script>

5. 在 `App.vue` 中编写 JavaScript 代码来实现当用户离开输入框时，输入的内容会变成用逗号每隔 3 位分隔的数字

export default {
  data() {
    return {
      form: {
        money: ''
      }
    }
  },
  methods: {
    formatMoney(value) {
      if (!value) {
        return ''
      }

      value = value.toString()

      let parts = value.split('.')
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')

      return parts.join('.')
    }
  },
  watch: {
    'form.money'(newValue, oldValue) {
      this.form.money = this.formatMoney(newValue)
    }
  }
}

6. 在 `App.vue` 中编写 JavaScript 代码来实现当用户提交表单时，参数的值仍然是正常数字，不包含逗号

export default {
  data() {
    return {
      form: {
        money: ''
      }
    }
  },
  methods: {
    formatMoney(value) {
      if (!value) {
        return ''
      }

      value = value.toString()

      let parts = value.split('.')
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '')

      return parts.join('.')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.money = this.formatMoney(this.form.money)
          console.log(this.form)
        }
      })
    }
  }
}