<view class="right"> <view class="m-numSelector"> <view @tap="onCountMinus" class="minus" :data-scindex="scIndex" :data-index="index"></view> <input type="number" :value="prod.prodCount" disabled></input> <view @tap="onCountPlus" class="plus" :data-scindex="scIndex" :data-index="index"></view> </view> </view>
/* 加减框 */
.m-numSelector .minus, .m-numSelector input, .m-numSelector .plus {
float: left;
box-sizing: border-box;
height: 40rpx;
border: 2rpx solid #d9d9d9;
}
.m-numSelector {
float: right;
}
.m-numSelector .minus, .m-numSelector .plus {
position: relative;
width: 40rpx;
}
/* 去除相邻的样式 */
.m-numSelector .minus {
border-right: 0;
border-top-left-radius: 4rpx;
border-bottom-left-radius: 4rpx;
}
.m-numSelector input {
width: 40rpx;
text-align: center;
color: #333;
font-size: 24rpx;
}
/* 去除相邻的样式 */
.m-numSelector .plus {
border-left: 0;
border-top-right-radius: 4rpx;
border-bottom-right-radius: 4rpx;
}
.m-numSelector .minus::before, .m-numSelector .plus::before,
.m-numSelector .plus::after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
content: ‘ ‘;
width: 22rpx;
height: 3rpx;
background-color: #7f7f7f;
}
.m-numSelector .plus::after {
transform: rotate(90deg);
}
.m-numSelector:not(.disabled) .minus:not(.disabled):active,
.m-numSelector:not(.disabled) .plus:not(.disabled):active {
background-color: #f4f4f4;
}
具体样式再调整
后续再增加相关的判断与递增递减函数
原文:https://www.cnblogs.com/yoona-lin/p/13666847.html