[JavaScript知识库]vue 封装组件输入框，不能输入负数和限制几位小数

代码:

<!--通用组件：输入框。限制输入小数和负数-->
<template>
 <div>
     <!--能输入负号-->
     <template v-if="isNegative">
        <input :value="value" :type="type" :placeholder="placeholder" @input="input" @change="change" @blur="blur" class="ex-input ex-input-large ex-input-max" />
     </template>
     <template v-else>
         <input :value="value" :type="type" :placeholder="placeholder" @input="input" @change="change" @blur="blur" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8 || event.which === 46" class="ex-input ex-input-large ex-input-max" />
     </template>
 </div>
</template>

<script>
/**
 * 限制不能输入负数其他方法：
 * 
 * <input type="number" @keydown="handleInput" placeholder="请输入" v-model="SaleQty">
 * handleInput(e) {
 * e.target.value=e.target.value.replace(/[^\d]/g,'');
 * },
 */
export default {
    name: '',
    model:{
        prop:'value',
        event:'input'
    },
    props: {
        //输入框的值
        value:{
            type:[String,Number],
            default:''
        },
        //输入框的类型
        type:{
            type:String,
            default:'text'
        },
        //默认字符
        placeholder:{
            type:String,
            default:''
        },
        //是否能输入负号，负数
        isNegative:{
            type:Boolean,
            default:true
        },
        //限制小数位,-1值不生效，0以上的生效
        decimal:{
            type:[Number],
            default:0
        }
    },
    components: {

    },
    data () {
        return {

        }
    },
    methods: {
        //输入事件
        input(e){
            //限制小数位
            if(this.decimal>0){
                // let regex=new RegExp(`^\\d+(?:\\.\\d{0,${this.decimal}})?`,"g"); 
                let regex=new RegExp(`^\\d*(\\.?\\d{0,${this.decimal}})`,"g");     //regExp使用的时候，反斜杠需要写两个
                e.target.value = (e.target.value.match(regex)[0]) || null;
            }
            this.$emit("input",e.target.value);
            //限制小数原本写法
            // if(this.decimal>0){
            //     e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null;
            // }
            // this.$emit("input",e.target.value);
        },
        //输入改变，并失去焦点
        change(e){
            this.$emit("change",e.target.value);
        },
        //失去焦点
        blur(e){
            this.$emit("blur",e.target.value);
        }
    },
    mounted() {
    },
}
</script>

<style scoped lang='less'>
.ex-input {
    display: inline-block;
    width: 100%;
    height: 32px;
    line-height: 1.5;
    padding: 4px 7px;
    font-size: 14px;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    color: #666;
    background-color: #fff;
    background-image: none;
    position: relative;
    cursor: text;
    transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.ex-input-large {
    font-size: 16px;
    padding: 6px 7px;
    height: 40px;
}
.ex-input-max {
    background-color: #111;
    border-color: transparent;
    color: #c8c7d8;
    caret-color: #c8c7d8;
}
.ex-input::-webkit-input-placeholder {
    color: #c8c7d8;
}
</style>

调用示例：

<ex-input v-model="form.amount" type="number" placeholder="0.00" :is-negative="false" :decimal="3" />