【前端】纸掌柜h5端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

75 lines
1.3 KiB

<template>
<view class="warpper">
<view class="minus-box" @tap="minusTap">
</view>
<view class="" style="padding: 0rpx 4rpx;">
<uni-easyinput
:inputBorder="false"
class="quantity-input"
type="number"
:value="value"
placeholder="请输入"
@blur="blur"
@confirm="confirm"
></uni-easyinput>
</view>
<view class="minus-box" @tap="addTap">
<uni-icons size="16" type="plusempty" color="#007AFF"></uni-icons>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: 0,
}
},
methods: {
blur(e) {
this.$emit('change', e.detail.value)
},
confirm(value) {
if (value.trim()) {
this.$emit('change', value)
}
},
minusTap() {
if(this.value == 0){
return
}
this.value--
this.$emit('change', this.value)
},
addTap() {
this.value++
this.$emit('change', this.value)
}
}
}
</script>
<style lang="scss">
.warpper{
display: flex;
flex-direction: row;
align-items: center;
.minus-box {
width: 64rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
background: #F2F3F5;
border-radius: 8rpx;
color: #007AFF;
}
.quantity-input {
width: 120rpx;
height: 64rpx;
background: #F2F3F5;
}
}
</style>