• vue input框type=number 保留两位小数自定义组件


    第一步:自定义组件MyNumberInput.vue
    <template>
    <input class="numberInput" type="number" :placeholder="placeholder" v-model="inputData" @keydown="keydownFn" />
    </template>
    <script>
    export default {
    props: {
    point: {
    default: 0
    },
    max: Number,
    placeholder: String,
    value: {
    default: null
    },
    },
    computed: {
    inputData: {
    get:function() {
    return this.value;
    },
    set:function (value) {
    let val = this.$el.value;
    let len = val.length;

    // 若输入08,变为8
    if(len===2 && val.charAt(0)===0 && val.charAt(1)!=='.'){
    this.$el.value = val.charAt(1);
    this.setParentModeVal(this.$el.value);
    return;
    }


    // 禁止输入多个小数点
    if(Math.abs(this.value) > 0 && val==='' && value ===''){
    if(this.keyDownDel){
    this.$el.value = '';
    }else {
    this.$el.value = this.value;
    }
    this.setParentModeVal(this.$el.value);
    return ;
    }

    // 处理输入“点、e、+、-等被识别为数字字符
    if(this.value === '' && val === '' && value === ''){ //字母类非数字输入都为'';
    this.$el.value = '';
    this.setParentModeVal('');
    return ;
    }

    // 保留小数
    if(val){
    let pointIndex = val.indexOf('.');
    if(this.point===0 && pointIndex!== -1){
    this.$el.value = val.substr(0, pointIndex);
    this.setParentModeVal(this.$el.value);
    return ;
    }
    if(pointIndex>0 && (len - pointIndex)>(this.point+1)){
    this.$el.value = val.substr(0,pointIndex + this.point +1);
    this.setParentModeVal(this.$el.value);
    return ;
    }
    }

    // 最大值
    if(this.max>0 && val>this.max){
    this.$el.value = val.substr(0,len-1);
    this.setParentModeVal(this.$el.value);
    return;
    }

    this.setParentModeVal(val);
    return;
    }
    }
    },
    data() {
    return {
    keyDownDel: false,// 判断键盘输入值
    }
    },
    methods: {
    setParentModeVal(value){
    this.$emit('input', value);
    },
    keydownFn(event){
    let e = event || window.event;
    if(e.keyCode===8||e.keyCode===46){ //Backspace || Delete
    this.keyDownDel = true;
    }else {
    this.keyDownDel = false;
    }
    }
    },
    }
    </script>
    <style>

    </style>
    第二步:引入,注册

     第三步:使用

    <my-number-input style=" 100%" @mousewheel.native.prevent :point="2"  v-model="scope.row.yCoordinate"></my-number-input>


  • 相关阅读:
    2.13 day 10
    2.12 day9
    Mongo基础知识
    给mongodb设置密码
    前端框架
    SecureCRT的一些设置
    node 服务器框架
    python 知识博客
    数据库记录
    有用的网站
  • 原文地址:https://www.cnblogs.com/yscec/p/11898846.html
Copyright © 2020-2023  润新知