说说如何在Vue.js中实现数字输入组件的方法

2024-05-06 15:43:23

字体：大中小

来源：转载

供稿：网友

我们对普通输入框进行扩展，实现一个可快捷输入数字组件。

首先制定规则：

只能输入数字。设计两个快捷按钮，可直接在当前值的基础上增 1 或者减 1。数字输入组件可设置初始值、最大值与最小值。

接着，规划好 API。一个 Vue.js 组件最重要的 3 个部分就是 props、events 以及 slot，我们需要定义这三个部分的命名以及业务规则。这个组件比较简单，所以我们只用到 props 与 events。

1 基础版

html：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>数字输入组件</title></head><body><div id="app">  <number-input v-model="value" :min="0" :max="6"></number-input></div><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><script src="number.js"></script><script>  var app = new Vue({    el: '#app',    data: {      value: 3    }  });</script></body></html>

这里，我们使用了 v-model，双向绑定了 value。

number.js：

/** * 是否为数字 * @param val * @returns {boolean} */function isNum(val) {  return (/^[0-9]*$/).test(val);}/** * 数字输入组件 */Vue.component('number-input', {  template: '/  <div class="number-input">/    <input /      type="text"/      :value="currentVal"/      @change="change">/    <button/      @click="down"/      :disabled="currentVal<=min">-</button>/    <button/      @click="up"/      :disabled="currentVal >=max">+</button>/  </div>',  props: {//校验    //最大值    max: {      type: Number,      default: Infinity    },    //最小值    min: {      type: Number,      default: -Infinity    },    //初始值    value: {      type: Number,      default: 0    }  },  data: function () {    return {      currentVal: this.value    }  },  watch: {    currentVal: function (val) {      console.log("currentVal:" + this.currentVal);      this.$emit('input',val);    },    value: function (val) {//更新 currentVal      this.update(val);    }  },  methods: {    /**     * 更新     * @param val     */    update: function (val) {      //让输入的值在限定范围内      if (val > this.max) {        val = this.max;      }      if (val < this.min) {        val = this.min      }      this.currentVal = val;    },    /**     * 减少     */    down: function () {      if (this.currentVal <= this.min) {        return;      }      this.currentVal -= 1;    },    /**     * 增长     */    up: function () {      if (this.currentVal >= this.max) {        return;      }      this.currentVal += 1;    },    /**     * 如果输入的值，     * @param event     */    change: function (event) {      var val = event.target.value.trim();//获取输入值      if (isNum(val)) {//赋值 currentVal        val = Number(val);        this.currentVal = val;        //超出限定范围时，规整        var max = this.max;        var min = this.min;        if (val > max) {          this.currentVal = max;        } else if (val < min) {          this.currentVal = min;        }      } else {//还原为 currentVal        event.target.value = this.currentVal;      }    }  },  mounted: function () {    //对初始值进行范围限定    this.update(this.value);  }});

上一篇：react组件从搭建脚手架到在npm发布的步骤实现

下一篇：nodeJS进程管理器pm2的使用