优秀的编程知识分享平台

网站首页 > 技术文章 正文

输入框只能输入三个字符&&小数点后面只能输入三位数

nanyue 2024-09-26 15:28:31 技术文章 5 ℃
<template>
    <div>
        <!-- 小数点后面只能输入三位数 -->
        <el-input
            v-model="bookName"
            @input="onInputBooksName($event)"
            style="width: 22rem"
            clearable
            placeholder="请输入数字" />
        <!-- s输入框只能输入三个字符 -->
        <el-input
            class="e_input"
            v-model="vehiRegion"
            size="small"
            @input="onInputVehiRegion" />
        
    </div>
</template>
<script>
export default {
    data () {
        return {
            bookName: '',
            vehiRegion: ''
        }
    },
    methods:{
        onInputBooksName () {
            // console.log('split后的', this.bookName.toString().split('.')) // 例如['1500', '12']=>1500.12
            if (this.bookName.toString().split('.')[1]) {
                const beforeDot = this.bookName.toString().split('.')[0] // 小数的整数部分,是个字符串=>1500
                const dotAfter = this.bookName.toString().split('.')[1] // 小数的小数部分,是个字符串=>12
                const dotLength = tdotAfter.length
                const afterArr = dotAfter.split('') // 小数部分形成的数组=>['1','2']
                const afterArrDeep = JSON.parse(JSON.stringify(afterArr)) // 深拷贝形成的数组=>['1','2']
                afterArrDeep.pop() // 将深拷贝的数组删除最后一个元素
                const afterDotDone = afterArrDeep.join('')
                if (dotLength === 4) {
                    this.bookName = beforeDot + '.' + afterDotDone
                }
                this.$forceUpdate() // 强制刷新
            } else {
                this.$forceUpdate() // 强制刷新
            }
        },
        onInputVehiRegion () {
            console.log('this.vehiRegion', this.vehiRegion)
            if (this.vehiRegion.length !== 0) {
                const afterArr = this.vehiRegion.split('') // 字符形成的数组
                const afterArrDeep = JSON.parse(JSON.stringify(afterArr))// 深拷贝形成的数组
                afterArrDeep.pop() // 将深拷贝的数组删除最后一个元素
                const afterDotDone = afterArrDeep.join('') // 把删除后的数组拆成字符串,也就是3个时候的值
                if (this.vehiRegion.length === 4) {
                this.vehiRegion = afterDotDone
                }
            }
        },
    }
}
</script>

Tags:

最近发表
标签列表