前言

在聊天室軟體原始碼的開發中，我們經常會遇到一些輸入框的操作，尤其是像涉及到資金的功能，需要在必要的時候彈出金額的輸入框，今天我們就一起來了解一下如何封裝一個金額輸入框元件吧。

聊天室軟體原始碼金額輸入框元件

數值為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

以上便是“在聊天室軟體原始碼開發時，封裝一個金額輸入框元件”的全部內容，希望對大家開發啊聊天室軟體原始碼有幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：

聊天室軟體原始碼中封裝一個金額輸入框元件的實現

前言

聊天室軟體原始碼金額輸入框元件

事件

實現MoneyInput.vue

index.js

相關文章