ITPub博客

首页 > 应用开发 > IT综合 > 聊天室软件源码中封装一个金额输入框组件的实现

聊天室软件源码中封装一个金额输入框组件的实现

IT综合 作者:云豹科技程序员 时间:2021-10-22 16:59:42 0 删除 编辑

前言

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

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

  • 数值为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/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2021-03-10

  • 博文量
    270
  • 访问量
    76425