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

雲豹科技程式設計師發表於2021-10-22

前言

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

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

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

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

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


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69996194/viewspace-2838841/,如需轉載,請註明出處,否則將追究法律責任。

相關文章