效果
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-633576.html
?代碼
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-633576.html
<template>
<view>
<view class='line3'>
<view class='line3_position'>
<view class='left'>數(shù)量<text>*</text></view>
<view class="right">
<view class="quantity_btn">
<view class="minus_quantity" @click="decrease">-</view>
<input class="input_quantity" type="number" v-model="quantity" @input="handleInput">
<view class="add_quantity" @click="increase">+</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
quantity: 1
};
},
methods: {
handleInput(event) {
const value = parseInt(event.target.value);
if (!isNaN(value) && value >= 1) {
this.quantity = value;
} else {
this.quantity = 1;
}
},
increase() {
this.quantity++;
},
decrease() {
if (this.quantity > 1) {
this.quantity--;
}
}
}
};
</script>
<style lang="scss">
.quantity_btn {
display: flex;
width: 50%;
.add_quantity {
border: 1px solid #74bfe7;
text-align: center;
width: 25%;
}
.input_quantity {
// border-bottom: 1px solid #74bfe7;
text-align: center;
width: 50%;
}
.minus_quantity {
border: 1px solid #74bfe7;
text-align: center;
width: 25%;
}
}
.line3 {
padding: 20rpx;
// border: 1px solid black;
.line3_position{
width: 100%;
display: flex;
.left {
width: 30%;
// border: 1px solid black;
}
.right {
display:flex;
justify-content:flex-end;
width: 70%;
// border: 1px solid black;
}
}
// border:1px solid black;
}
</style>到了這里，關(guān)于uni-app:實(shí)現(xiàn)數(shù)字文本框，以及左右加減按鈕的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
