我还制作了一个<number-spinner >
,外观类似下面这样:
但是当我用<number-spinner v-model="number"></number-spinner>调用它的时候,发现v-model完全不起任何作用啊。
而且我记得昨天前天这还是正常的。今天突然不正常了。
该组件的源码是:
// compoments/number-spinner/number-spinner.vue
<template>
<view class="number-spinner">
<text>{{val}}</text>
<navigator @tap="plus" url=""><text class="icon-top"></text></navigator>
<navigator @tap="minus" url=""><text class="icon-bottom"></text></navigator>
</view>
</template>
<script>
export default {
name:"number-spinner",
data() {
let val = parseInt(this.value, 10);
if (isNaN(val)) val = 1;
return {
val: val
};
},
emits:['change'],
model:{
prop:'value',
event:'change'
},
props: {
value: {
type: [Number, String],
default: 1
},
name: {
type: String
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 99
},
step: {
type: Number,
default: 1
}
},watch:{
value:function(val){
val = parseInt(val, 10);
if (isNaN(val)) val = 1;
this.val=val;
},
max:function(max){
if(this.val>max){
this.val=max;
this.$emit('change', this.val);
}
},
min:function(min){
if(this.val<min){
this.val=min;
this.$emit('change', this.val);
}
}
},
methods: {
minus(e) {
if(this.val==this.min)return;
this.val = this.val - this.step;
if (this.val < this.min) this.val = this.min;
this.$emit('change', this.val);
},
plus(e) {
if(this.val==this.max)return;
this.val = this.val + this.step;
if (this.val > this.max) this.val = this.max;
this.$emit('change', this.val);
}
}
}
</script>
<style>
.number-spinner{
display:inline-grid;
grid-template-columns:1fr 42rpx;
grid-template-rows:32rpx 32rpx;
border:1px solid #ccc;
box-sizing:content-box;
min-width:114rpx;height:64rpx;
margin-right:12rpx;
}
.number-spinner>text:first-child{
background-color:#ffffff;
box-sizing:border-box;
grid-area:1/1/3/2;
text-align:center;
line-height:64rpx;
}
.number-spinner>navigator:nth-child(2){
font-size:24rpx;
grid-area:1/2/2/3;
text-align:center;
background-color:#f1f2f3;
}
.number-spinner>navigator:nth-child(3){
font-size:24rpx;
grid-area:2/2/3/3;
text-align:center;
background-color:#f1f2f3;
}
</style>
2 个回复
asprain (作者) - 挣扎中的中年码农
我还制作了一个
<number-spinner >
,外观类似下面这样:但是当我用<number-spinner v-model="number"></number-spinner>调用它的时候,发现v-model完全不起任何作用啊。
而且我记得昨天前天这还是正常的。今天突然不正常了。
该组件的源码是:
asprain (作者) - 挣扎中的中年码农
在H5中是正常的,但是在微信开发者工具中就不正常了。我试了一下,不但是双向绑定失效了,甚至连单向绑定都不起作用了。就是v-model既不能传入数据也不能传出数据了。只能用:value="" @change="" 这种办法了。