1.0.3 • Published 7 months ago
jx-vue2-number v1.0.3
介绍
基于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值)