介绍

基于vue2.0的数字加减组件(支持数组)

组件使用

安装

npm install jx-vue2-number --save

使用

<template>
  <div id="app">
    <div v-for="(item, i) in list" :key="item.id">
      <custom-number
      :value="item.number"
      @editNum="editNum"
      :max="1000"
      :min="0"
      :noInput="true"
      :itemInfo="i"
      ></custom-number>
    </div>
  </div>
</template>
 <script>
 import CustomNumber from 'jx-vue2-number';
 export default {
  name: 'App',
  data() {
    return {
      list: [{
        id: '111',
        name: '第一条',
        number: 1
      }, {
        id: '222',
        name: '第二条',
        number: 1
      }]
    }
  },
  components: {
    CustomNumber
  },
  methods: {
    editNum(val, i) {
      this.$set(this.list, i, {
        ...this.list[i],
        number: val
      })
    }
  }
 }
 </script>

属性配置说明

value 输入框的值；
itemInfo 数组索引传递内容（如用于购物车列表传id或index等，可不传），由editNum函数第二个参数返回；
max 可输入的最大值， 默认为无上限；
min 可输入的最小值， 默认值为0；
noInput 输入框是否禁止输入，默认值：false；
@editNum 获取输入、加、减后的值；（第一个参数为修改后的数值，第二个参数为itemInfo值）