介绍

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

组件使用

安装

npm i jx-vue3-number --save

使用

<template>
  <div v-for="(item, i) in list" :key="item.id">
   {{ item.name }}：
    <custom-number
     :value="item.number"
     :max="1000"
     :min="0"
     :noInput="true"
     :itemInfo="i"
     @editNum="editNum"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import CustomNumber from 'jx-vue3-number'

let list = ref([{
   id: '111',
   name: '第一条内容',
   number: 1
 }, {
   id: '222',
   name: '第二条内容',
   number: 1
}]) 

function editNum(val, i) {
  list.value[i].number = val
}
</script>

属性说明

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