// 下面的属性就能干掉凡人的上下按钮
// input::-webkit-outer-spin-button,
// input::-webkit-inner-spin-button {
// -webkit-appearance: none;
// }
<input ref="input"
type="number"
class="cc-input-number__input">
<div class="cc-input-number__add">
<cc-icon name='cc-add2'/>
</div>
</div>
</template>
这里我们选择吧input与button放在一个div里面, 且同级别这种方式, 与其他的不太一样, 因为这样更直观, 而且也足够实现我想要的功能.
3: 事件的绑定
// 减少
<div class="cc-input-number__reduce"
@click='reduce'>
// 增加
<div class="cc-input-number__add"
@click="add">
// 输入框的监控
<input ref="input"
type="number"
class="cc-input-number__input"
@input="inputChange($event)">这里我们有个问题, 就是本组件采用的是v-model的形式编写, v-model有一些弊端, 在测试的时候我发现, 比如说用户为多个组件绑定了相同的v-model会导致无限渲染的bug, 下面会解读解决这类bug的相关代码.
prpos
props: {
max: { type: Number }, // 数字不传默认是undefined
min: { type: Number },
step: { // 每次计算的单位
type: Number,
default: 1
},
value: {
// 绑定的数值, 这里允许两种type, 为了方便用户书写,具体判断下面我们自己写
type: [String, Number],
required: true
},
precision: { // 显示小数点后几位数
type: Number,
validator(value) {
if (value < 1 || value === undefined) {
return 1;
} else {
return parseInt(value);
}
}
}
},add 方法的实现
add() {
// 很可能用户就输入了一个string属性,
// 1: 比如后台返回的就是字符串;
// 2: input框输入的就是字符串类型;
// 3: 用v-model绑定了同样的值的其他组件赋予了这个值string类型;
let num = Number(this.value) + this.step; // 加上固定的长度
// 这里我们抽象出一个专门负责数值的变化的函数
this.emitVal(num);
},reduce 方法的实现
reduce() {
let num = Number(this.value) - this.step;
this.emitVal(num);
},监听input框的输入事件
inputChange(e) {
// 这里就有可能出现string类型的了
this.emitVal(Number(e.target.value));
},关键性的赋值函数
emitVal
emitVal(newVal) {
let { max, min } = this;
