在聊天室软件源码开发时，封装一个金额输入框组件-CSDN博客

前言

在聊天室软件源码的开发中，我们经常会遇到一些输入框的操作，尤其是像涉及到资金的功能，需要在必要的时候弹出金额的输入框，今天我们就一起来了解一下如何封装一个金额输入框组件吧。

聊天室软件源码金额输入框组件

数值为128000时，显示为 128,000.00

属性
1、value 金额数值

值为数值类型

2、decimal 小数部分位数

值为数值类型
默认值：2

3、canRound 是否允许四舍五入

值为布尔类型
默认值： false

由于JS的 tofixed 方法的四舍五入存在精度问题，不建议设为true

4. canNegative 是否允许输入负数

值为布尔类型
默认值： true

5、suffixText 输入框后缀显示的文字

值为字符串
默认值：""

6、icon 输入框后缀显示的图标 (suffixText 为空时有效)

值为布尔值或字符串（通过字符串则指定图标的名称）
默认值：“rmb”

7、 disabled 是否不可用

值为布尔类型

8、 readonly 是否只读

值为布尔类型

事件

1. change 值改变事件

参数：value 输入的数值（值为数值类型）

示例

<template>
    <MoneyInput v-model="moneyValue" @change="handleChange" ></MoneyInput>
</template>

<script>
import MoneyInput from '@/components/pc/moneyInput'

export default {
    name: 'CheckboxDemo',
    components: {
        MoneyInput
    },
    data () {
        return {
            moneyValue: 128000
        }
    },
    methods: {
        handleChange (val) {
            console.log('输入的金额为：', val)
        }
    }
}
</script>

实现MoneyInput.vue

<template>
    <div class="money-input-wrap" :class="{'show-icon': icon}">
        <template v-if="readonly">
            <span>{{ currentValue | money(currentDecimal) }}</span>
        </template>
        <template v-else>
            <div class="money-input">
                <input ref="rawInput" class="money-raw-input"
                v-model="currentValue"
                @change="handleChange($event)"
                maxlength="15"
                :disabled="disabled"
                :data-canRound="canRound"
                :data-canNegative="canNegative">
                <div class="money-show" :class="disabled ? 'disabled-input' : ''">{{currentValue | money(currentDecimal)}}</div>
            </div>
            <div v-if="suffixText || icon" class="money-suffix-wrap">
                <span v-if="suffixText" class="money-suffix-text">{{suffixText}}</span>
                <Icon v-else class="money-icon" :name="iconName"></Icon>
            </div>
        </template>
    </div>
</template>

<script>
export default {
name: 'MoneyInput',
props: {
    // 当前值
    value: Number,
    // 小数部分位数
    decimal: {
        type: Number,
        default: 2
    },
    // 是否四舍五入
    canRound: {
        type: Boolean,
        default: false
    },
    // 是否允许负数
    canNegative: {
        type: Boolean,
        default: true
    },
    // 后缀文字
    suffixText: {
        type: String
    },

    // 是否显示图标
    icon: {
        type: [Boolean, String],
        default: 'rmb'
    },

    // 是否可用
    disabled: {
        type: Boolean,
        default: false
    },

    // 是否只读
    readonly: {
        type: Boolean,
        default: false
    }
},
data () {
    return {
        currentValue: this.value,
        currentDecimal: this.decimal
    }
},
computed: {
    iconName () {
        if (typeof this.icon === 'string') {
            return this.icon
        }
        return 'rmb'
    }
},

watch: {
    value (val) {
        this.currentValue = val
    }
},

methods: {
    handleChange (event) {
        let val = event.target.value
        let numVal = Number(val)
        if (val === '' || isNaN(numVal)) {
            this.currentValue = null
            this.$emit('input', null)
            this.$emit('change', null)
        } else {
            if (!this.canNegative && numVal < 0) { // 不允许为负数
                numVal = Math.abs(numVal)
            }
            if (!this.canRound) { // 不允许四舍五入
                let numArray = numVal.toString().split('.')
                let intStr = numArray[0] // 整数部分字符串

                let decimalStr = numArray.length >= 2 ? numArray[1] : 1 // 小数部分字符串
                if (decimalStr.length > this.decimal) {
                    let newValueStr = intStr + '.' + decimalStr.substr(0, this.decimal)
                    numVal = Number(newValueStr)
                }
                } else {
                    numVal = this.fixDecimal(numVal, this.decimal) // 修正小数点位数
                }
                this.currentValue = numVal
                this.$emit('input', numVal)
                this.$emit('change', numVal)
            }
        },
        // 修正小数点位数
        fixDecimal (num, decimal) {
            let number = parseFloat(num)
            if (num !== undefined && num !== null && num !== '' && !isNaN(number)) {
                return parseFloat(number.toFixed(decimal))
            }
            return num
        }
    }
}

</script>

<style lang="scss" scoped px2rem="false">
    $icon-width: 24px;
    .money-input-wrap {
        display: table;
        width: 100%;
        height: $form-item-height;
        .money-input {
        display: table-cell;
        position: relative;
        width: 100%;
        .money-raw-input {
            position: absolute;
            top: 0;
            width: 100%;
            border: 1px solid $border-color-base;
            vertical-align: middle;
            border-radius: 4px;
            font-size: 14px;
            color: $input-font-color;
            opacity: 0;
            z-index: 1;
            &:disabled {
                background-color: $input-disabled-bg-color;
                cursor: not-allowed;
            }
            &:focus {
            @include primary-border-color();
            opacity: 1;
                &+input.money-show {
                    opacity: 0;
                }
            }
        }
        .money-show {
            position: absolute;
            top: 0;
            width: 100%;
            height: $form-item-height;
            line-height: $form-item-height - 2px;
            vertical-align: middle;
            padding: 0 5px;
            overflow: hidden;
            color: $color-text-regular;
            background-color: #FFF;
            border: 1px solid $border-color-base;
            border-radius: 4px;
            &.disabled-input {
                background-color: $input-disabled-bg-color;
                cursor: not-allowed;
            }
        }
    }
    .money-suffix-wrap {
        display: table-cell;
        min-width: 24px;
        padding: 0 5px;
        height: $form-item-height;
        vertical-align: middle;
        text-align: center;
        color: $color-text-placeholder;
        background-color: $bg-color-base;
        border: solid 1px $border-color-base;
        border-left: 0;
        border-radius: 0 4px 4px 0;
        .money-suffix-text {
            word-break: keep-all;
            white-space:nowrap;
        }
    }
    &.show-icon {
        .money-raw-input, .money-show {
            padding-right: 0;
            border-radius: 4px 0 0 4px;
        }
    }
}
</style>

index.js

/**
* 金额输入框
* @author qinglianshizhe
* @date 2021/10/11
*/
import MoneyInput from './MoneyInput.vue'
export default MoneyInput

以上便是“在聊天室软件源码开发时，封装一个金额输入框组件”的全部内容，希望对大家开发啊聊天室软件源码有帮助。