InputCurrencyCopy.vue

<template>
	<el-input :id="id" :class="{'highlight': highlight}" ref="form-item" v-model="model" v-bind="$attrs" v-on="$listeners" v-bind:disabled="isDisable" @blur="onBlur"
		@focus="focus" />
</template>

<script>
	export default {
		props: {
			value: {
				type: [String, Number],
				default: undefined
			},
			currency: {
				type: String,
				default: 'ZH'
			},
			precision: {
				type: Number,
				default: 2
			},
			max: {
				type: [Number, String],
				default: ''
			},
			min: {
				type: [Number, String],
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			id: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isOnBlur: true
			}
		},
		computed: {
			model: {
				get() {
					return this.format(this.value)
				},
				set(newVal) {
					this.$emit('input', this.formatValue(newVal))
				}
			},
			mode() {
				return this.$store.state.Status.mode
			},
			highlight () {
				return this.$store.state.Status.highlights.indexOf(this.id) !== -1
			},
			isDisable: {
				get() {
					return this.mode === 'display' || this.disabled
				}
			},
		},
		methods: {
			onBlur() {
				this.isOnBlur = true
			},
			focus() {
				this.isOnBlur = false
			},
			format(value) {
				let max = this.max && this.max.toString && this.max.toString() || ''
				let min = this.min && this.min.toString && this.min.toString() || ''
				if (this.value !== null && this.value !== undefined && this.value.toString) {
					if (this.isOnBlur) {
						value = this.formatValue(value.toString())
						if (value === '') {
							this.model = ''
							return ''
						}
						if (max !== '' && this.compareNumber(value, max)) {
							value = max
						} else if (min !== '' && this.compareNumber(min, value)) {
							value = min
						}
						var array = value.split('.')
						var temp = ''
						while (array[0].length > 3) {
							temp = ',' + array[0].substring(array[0].length - 3, array[0].length) + temp
							array[0] = array[0].substring(0, array[0].length - 3)
						}
						temp = array[0] + temp
						if (this.currency === '392' || this.currency=== 'JPY') {
							this.model = temp
							return temp
						}
						if (array.length === 1) {
							temp += '.'
							for (var i = 0; i < this.precision; i++) {
								temp += '0'
							}
						} else if (array[1].length < this.precision) {
							temp += '.' + array[1]
							for (var i = array[1].length; i < this.precision; i++) {
								temp += '0'
							}
						} else {
							temp += '.' + array[1].substring(0, this.precision)
						}
						this.model = temp
						return temp
					} else {
						return this.formatValue(value)
					}
				}
				return this.value
			},
			formatValue(value) {
				if (value !== null && value !== undefined && value.toString) {
					var temp = value.toString().split(',').join('')
					if (temp.charAt(0) === '.')
						temp = '0' + temp
					if (temp.charAt(0) === '0' && temp.length > 1 && temp.charAt(1) !== '.')
						temp = temp.substring(1)
					if (this.currency === '392' || this.currency=== 'JPY') {
						var i = 0;
						while (i < temp.length) {
							if (!(temp.charAt(i) >= '0' && temp.charAt(i) <= '9'))
								break
							i++
						}
						temp = temp.substring(0, i)
					} else {
						var i = 0;
						while (i < temp.length) {
							if (!((temp.charAt(i) >= '0' && temp.charAt(i) <= '9') || temp.charAt(i) === '.'))
								break
							i++
						}
						temp = temp.substring(0, i)
						var array = temp.split('.')
						if (array.length > 1 && array[1].length > 0) {
							temp = array[0] + '.' + array[1].substring(0, this.precision)
						} else if (array.length > 1 && array[1].length === 0) {
							temp = array[0] + '.'
						} else {
							temp = array[0]
						}
					}
					return temp
				}
				return value
			},
			compareNumber(num1, num2) {
				var arr1 = num1.split('.')
				var arr2 = num2.split('.')
				if (this.compareInteger(arr1[0], arr2[0])) {
					return true
				} else if (arr1[0] === arr2[0]) {
					if (arr1.length > 1 && arr2.length > 1) {
						for (var i = arr2[1].length; i < arr1[1].length; i++) {
							arr2[1] += '0'
						}
						for (var i = arr1[1].length; i < arr2[1].length; i++) {
							arr1[1] += '0'
						}
						return arr1[1] > arr2[1]
					} else if (arr1.length > 1 && arr2.length === 1) {
						var str = ''
						for (var i = 0; i < arr1[1].length; i++) {
							str += '0'
						}
						return arr1[1] > str
					} else if (arr1.length === 1 && arr2.length > 1) {
						var str = ''
						for (var i = 0; i < arr2[1].length; i++) {
							str += '0'
						}
						return str > arr2[1]
					} else {
						return false
					}
				} else {
					return false
				}
			},
			compareInteger(num1, num2) {
				if (num1.length > num2.length) {
					return true
				} else if (num1.length < num2.length) {
					return false
				} else {
					return num1 > num2
				}
			}

		}
	}
</script>

<style>
.el-input.highlight .el-input__inner{
  border-color: red;
}
</style>