vue 限制el-input输入1-365的正整数

最新推荐文章于 2023-08-04 15:59:50 发布

是小张吖~

最新推荐文章于 2023-08-04 15:59:50 发布

阅读量1.5k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_56272227/article/details/127748053

版权

背景：

限制el-input输入指定天数，默认为空，可输入1-365的正整数

代码实现：

<template>
    <div>
        <el-input v-model = "timeRange" :minlength="1" :maxlength="3" @change="handleValueChange" onkeyup=" value = value.replace(/[^\d||/.]/g,'')"></el-input>
    </div>
</template>

<script>
export default {
    data () {
        return {
            timeRange: null
        }
    },
    methods: {
        handleValueChange (value) {
            console.log(value)
            if (value) {
                value = value.replace(/[^\d]/g, '')
            }
            // 限制输入1-365
            if (value <= 1) {
                this.timeRange = 1
            } else if (value > 365) {
                this.timeRange = 365
            }
            // 针对为两位数时个位数是否为0做处理
            if (value.length === 2) {
                const arr = value.split('')
                if (arr[0] === '0') {
                    this.timeRange = arr[1]
                }
            }
            console.log(this.timeRange)
        }
    }
}
</script>
<style scoped>
</style>