input 输入数字，el-tooltip中千分位展示input框的数字

最新推荐文章于 2025-04-28 16:10:47 发布

原创最新推荐文章于 2025-04-28 16:10:47 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

工作笔记专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用Element UI中的el-tooltip组件与el-input组件相结合的方法，实现了鼠标悬停显示提示信息的效果，并对输入框内的数值进行了整数与小数位数的有效性验证。

要求：

鼠标滑过， input无值—-不显示el-tooltip框
input有值—-显示el-tooltip框
光标插入input框 —- 显示el-tooltip框
input框输入文字时—-显示el-tooltip框
input值，整数最长10位，小数最长10位的数字

/** 使用 */
<el-tooltip
    placement=“top-end”
    effect=“light”
    :manual=“true”
    v-model=“showTooltip”
>
    <div slot=“content” :style=“{width:’200px’}”>{{splitInputValue}}</div>
    <el-input
        v-model=“inputModel”
        placeholder=“请输入关键词”
        @mouseover.native=“inputModel?showTooltip=true:showTooltip=false”
        @mouseleave.native=“showTooltip=false”
        @focus=“showTooltip=true”
        @input=“showTooltip=true”
        @blur=“showTooltip=false”
        @clear=“showTooltip=false”
        clearable />
</el-tooltip>

// 配置data对象
data() {
    return {
        inputModel: ‘’,
        showTooltip: false
    }
},
method: {
    checkInput() {
        const reg = /^(-?)(0|[1-9]([0-9]{0,9})(?:\.\d{1,10})?$/g
        if (!reg.test(this.inputModel)) {
            this.$alert(‘请输入整数最长10位，小数最长10位的数字’)
        }
    }
},
// 配置Computed方法
computed: {
    splitInputValue (val) {
        const inputData = this.inputModel
        return inputData ? (inputData.toString()).replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, ‘$1,’) : ‘’
    }
}