product_platform/yxt-yyth-ui-miniprogram
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

111

Browse Source
This commit is contained in:
wangjiahai
2023-11-23 17:03:41 +08:00
parent f2d9e1ca3c
commit 3c613bc87a
1 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue
View File

@@ -1,12 +1,15 @@
<template> <template>
<view class="uni-numbox"> <view class="uni-numbox">
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}"> <view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}">
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text> <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }"
:style="{color}">-</text>
</view> </view>
<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number" <input v-if="!showText" :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value"
v-model="inputValue" :style="{background, color}" /> type="number" v-model="inputValue" :style="{background, color}" />
<view v-if="showText" class="uni-numbox__value" :style="{background, color}">{{inputValue}}</view>
<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}"> <view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}">
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text> <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }"
:style="{color}">+</text>
</view> </view>
</view> </view>
</template> </template>
@@ -66,7 +69,8 @@
}, },
data() { data() {
return { return {
inputValue: 0 inputValue: 0,
showText: false
}; };
}, },
watch: { watch: {
@@ -86,6 +90,12 @@
} }
}, },
methods: { methods: {
showText() {
this.showText = true
},
showEdit() {
this.showText = false
},
_calcValue(type) { _calcValue(type) {
if (this.disabled) { if (this.disabled) {
return; return;
@@ -154,7 +164,7 @@
} }
}; };
</script> </script>
<style lang="scss" > <style lang="scss">
$box-height: 26px; $box-height: 26px;
$bg: #f5f5f5; $bg: #f5f5f5;
$br: 2px; $br: 2px;
@@ -186,6 +196,7 @@
background-color: $bg; background-color: $bg;
width: 40px; width: 40px;
height: $box-height; height: $box-height;
line-height: $box-height;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
border-left-width: 0; border-left-width: 0;
@@ -218,4 +229,4 @@
cursor: not-allowed; cursor: not-allowed;
/* #endif */ /* #endif */
} }
</style> </style>