From 1e61215b48e59e94c1ed98e4ef956227d689d6bc Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Mon, 06 Nov 2023 08:48:39 +0800 Subject: [PATCH] fix:小程序订阅消息 --- uni_modules/uview-ui/components/u-number-box/u-number-box.vue | 416 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 416 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-number-box/u-number-box.vue b/uni_modules/uview-ui/components/u-number-box/u-number-box.vue new file mode 100644 index 0000000..69211c5 --- /dev/null +++ b/uni_modules/uview-ui/components/u-number-box/u-number-box.vue @@ -0,0 +1,416 @@ +<template> + <view class="u-number-box"> + <view + class="u-number-box__slot" + @tap.stop="clickHandler('minus')" + @touchstart="onTouchStart('minus')" + @touchend.stop="clearTimeout" + v-if="showMinus && $slots.minus" + > + <slot name="minus" /> + </view> + <view + v-else-if="showMinus" + class="u-number-box__minus" + @tap.stop="clickHandler('minus')" + @touchstart="onTouchStart('minus')" + @touchend.stop="clearTimeout" + hover-class="u-number-box__minus--hover" + hover-stay-time="150" + :class="{ 'u-number-box__minus--disabled': isDisabled('minus') }" + :style="[buttonStyle('minus')]" + > + <u-icon + name="minus" + :color="isDisabled('minus') ? '#c8c9cc' : '#323233'" + size="15" + bold + :customStyle="iconStyle" + ></u-icon> + </view> + + <slot name="input"> + <input + :disabled="disabledInput || disabled" + :cursor-spacing="getCursorSpacing" + :class="{ 'u-number-box__input--disabled': disabled || disabledInput }" + v-model="currentValue" + class="u-number-box__input" + @blur="onBlur" + @focus="onFocus" + @input="onInput" + type="number" + :style="[inputStyle]" + /> + </slot> + <view + class="u-number-box__slot" + @tap.stop="clickHandler('plus')" + @touchstart="onTouchStart('plus')" + @touchend.stop="clearTimeout" + v-if="showPlus && $slots.plus" + > + <slot name="plus" /> + </view> + <view + v-else-if="showPlus" + class="u-number-box__plus" + @tap.stop="clickHandler('plus')" + @touchstart="onTouchStart('plus')" + @touchend.stop="clearTimeout" + hover-class="u-number-box__plus--hover" + hover-stay-time="150" + :class="{ 'u-number-box__minus--disabled': isDisabled('plus') }" + :style="[buttonStyle('plus')]" + > + <u-icon + name="plus" + :color="isDisabled('plus') ? '#c8c9cc' : '#323233'" + size="15" + bold + :customStyle="iconStyle" + ></u-icon> + </view> + </view> +</template> + +<script> + import props from './props.js'; + /** + * numberBox ��������� + * @description ��������������������������������������������������������������� + * @tutorial https://uviewui.com/components/numberBox.html + * @property {String | Number} name ������������������������change������������ + * @property {String | Number} value ���������������������������������������������������������min���(���������) ��������� 0 ��� + * @property {String | Number} min ��������� ��������� 1 ��� + * @property {String | Number} max ��������� ��������� Number.MAX_SAFE_INTEGER ��� + * @property {String | Number} step ������������������������������ ��������� 1 ��� + * @property {Boolean} integer ��������������������������� ��������� false ��� + * @property {Boolean} disabled ��������������������������������������������� ��������� false ��� + * @property {Boolean} disabledInput ��������������������� ��������� false ��� + * @property {Boolean} asyncChange ��������������������������������������������������������������� ��������� false ��� + * @property {String | Number} inputWidth ���������������������������px ��������� 35 ��� + * @property {Boolean} showMinus ������������������������ ��������� true ��� + * @property {Boolean} showPlus ������������������������ ��������� true ��� + * @property {String | Number} decimalLength ��������������������� + * @property {Boolean} longPress ������������������������������ ��������� true ��� + * @property {String} color ��������������������������������������������� ��������� '#323233' ��� + * @property {String | Number} buttonSize ������������������������������������������px��������������������������������������� ��������� 30 ��� + * @property {String} bgColor ��������������������������������� ��������� '#EBECEE' ��� + * @property {String | Number} cursorSpacing ���������������������������������������������������������������������px ��������� 100 ��� + * @property {Boolean} disablePlus ������������������������ ��������� false ��� + * @property {Boolean} disableMinus ������������������������ ��������� false ��� + * @property {Object ��� String} iconStyle ��������������������������� + * + * @event {Function} onFocus ��������������������� + * @event {Function} onBlur ��������������������� + * @event {Function} onInput ������������������������ + * @event {Function} onChange + * @example <u-number-box v-model="value" @change="valChange"></u-number-box> + */ + export default { + name: 'u-number-box', + mixins: [uni.$u.mpMixin, uni.$u.mixin, props], + data() { + return { + // ��������������������������� + currentValue: '', + // ��������� + longPressTimer: null + } + }, + watch: { + // ������������������������������������������������������������������check()������ + watchChange(n) { + this.check() + }, + // ������v-mode��������������������������������������� + value(n) { + if (n !== this.currentValue) { + this.currentValue = this.format(this.value) + } + } + }, + computed: { + getCursorSpacing() { + // ���������������������������������px���������������������px + return uni.$u.getPx(this.cursorSpacing) + }, + // ��������������� + buttonStyle() { + return (type) => { + const style = { + backgroundColor: this.bgColor, + height: uni.$u.addUnit(this.buttonSize), + color: this.color + } + if (this.isDisabled(type)) { + style.backgroundColor = '#f7f8fa' + } + return style + } + }, + // ������������������ + inputStyle() { + const disabled = this.disabled || this.disabledInput + const style = { + color: this.color, + backgroundColor: this.bgColor, + height: uni.$u.addUnit(this.buttonSize), + width: uni.$u.addUnit(this.inputWidth) + } + return style + }, + // ��������������������������������� + watchChange() { + return [this.integer, this.decimalLength, this.min, this.max] + }, + isDisabled() { + return (type) => { + if (type === 'plus') { + // ������������������������������������������������disabled��������������������������������������������������������������������������������� + return ( + this.disabled || + this.disablePlus || + this.currentValue >= this.max + ) + } + // ������������������������ + return ( + this.disabled || + this.disableMinus || + this.currentValue <= this.min + ) + } + }, + }, + mounted() { + this.init() + }, + methods: { + init() { + this.currentValue = this.format(this.value) + }, + // ������������������������������������ + format(value) { + value = this.filter(value) + // ���������������������������������������0���������������������Number������ + value = value === '' ? 0 : +value + // ������������������������������min���max������������ + value = Math.max(Math.min(this.max, value), this.min) + // ���������������������������������������������toFixed������������������ + if (this.decimalLength !== null) { + value = value.toFixed(this.decimalLength) + } + return value + }, + // ��������������������� + filter(value) { + // ���������0-9������������������"."���������������"-"��������������������� + value = String(value).replace(/[^0-9.-]/g, '') + // ��������������������������������������������������������������� + if (this.integer && value.indexOf('.') !== -1) { + value = value.split('.')[0] + } + return value; + }, + check() { + // ������������������������������������������������������������������������������������ + const val = this.format(this.currentValue); + if (val !== this.currentValue) { + this.currentValue = val + } + }, + // ������������������������������������ + // isDisabled(type) { + // if (type === 'plus') { + // // ������������������������������������������������disabled��������������������������������������������������������������������������������� + // return ( + // this.disabled || + // this.disablePlus || + // this.currentValue >= this.max + // ) + // } + // // ������������������������ + // return ( + // this.disabled || + // this.disableMinus || + // this.currentValue <= this.min + // ) + // }, + // ��������������������� + onFocus(event) { + this.$emit('focus', { + ...event.detail, + name: this.name, + }) + }, + // ��������������������� + onBlur(event) { + // ��������������������������� + const value = this.format(event.detail.value) + // ������blur������ + this.$emit( + 'blur',{ + ...event.detail, + name: this.name, + } + ) + }, + // ������������������������ + onInput(e) { + const { + value = '' + } = e.detail || {} + // ������������ + if (value === '') return + let formatted = this.filter(value) + // ��������������������������� + if (this.decimalLength !== null && formatted.indexOf('.') !== -1) { + const pair = formatted.split('.'); + formatted = `${pair[0]}.${pair[1].slice(0, this.decimalLength)}` + } + formatted = this.format(formatted) + this.emitChange(formatted); + }, + // ������change������ + emitChange(value) { + // ���������������������������������������������������������������������������������������������v-model������ + if (!this.asyncChange) { + this.$nextTick(() => { + this.$emit('input', value) + this.currentValue = value + this.$forceUpdate() + }) + } + this.$emit('change', { + value, + name: this.name, + }); + }, + onChange() { + const { + type + } = this + if (this.isDisabled(type)) { + return this.$emit('overlimit', type) + } + const diff = type === 'minus' ? -this.step : +this.step + const value = this.format(this.add(+this.currentValue, diff)) + this.emitChange(value) + this.$emit(type) + }, + // ������������������������������������������������������������������������������������������������������ + add(num1, num2) { + const cardinal = Math.pow(10, 10); + return Math.round((num1 + num2) * cardinal) / cardinal + }, + // ������������������ + clickHandler(type) { + this.type = type + this.onChange() + }, + longPressStep() { + // ���������������������������������longPressStep��������������������������� + this.clearTimeout() + this.longPressTimer = setTimeout(() => { + this.onChange() + this.longPressStep() + }, 250); + }, + onTouchStart(type) { + if (!this.longPress) return + this.clearTimeout() + this.type = type + // ������������������������������������������ + this.longPressTimer = setTimeout(() => { + this.onChange() + this.longPressStep() + }, 600) + }, + // ��������������������������������������������������� + onTouchEnd() { + if (!this.longPress) return + this.clearTimeout() + }, + // ��������������� + clearTimeout() { + clearTimeout(this.longPressTimer) + this.longPressTimer = null + } + } + } +</script> + +<style lang="scss" scoped> + @import '../../libs/css/components.scss'; + + $u-numberBox-hover-bgColor: #E6E6E6 !default; + $u-numberBox-disabled-color: #c8c9cc !default; + $u-numberBox-disabled-bgColor: #f7f8fa !default; + $u-numberBox-plus-radius: 4px !default; + $u-numberBox-minus-radius: 4px !default; + $u-numberBox-input-text-align: center !default; + $u-numberBox-input-font-size: 15px !default; + $u-numberBox-input-padding: 0 !default; + $u-numberBox-input-margin: 0 2px !default; + $u-numberBox-input-disabled-color: #c8c9cc !default; + $u-numberBox-input-disabled-bgColor: #f2f3f5 !default; + + .u-number-box { + @include flex(row); + align-items: center; + + &__slot { + /* #ifndef APP-NVUE */ + touch-action: none; + /* #endif */ + } + + &__plus, + &__minus { + width: 35px; + @include flex; + justify-content: center; + align-items: center; + /* #ifndef APP-NVUE */ + touch-action: none; + /* #endif */ + + &--hover { + background-color: $u-numberBox-hover-bgColor !important; + } + + &--disabled { + color: $u-numberBox-disabled-color; + background-color: $u-numberBox-disabled-bgColor; + } + } + + &__plus { + border-top-right-radius: $u-numberBox-plus-radius; + border-bottom-right-radius: $u-numberBox-plus-radius; + } + + &__minus { + border-top-left-radius: $u-numberBox-minus-radius; + border-bottom-left-radius: $u-numberBox-minus-radius; + } + + &__input { + position: relative; + text-align: $u-numberBox-input-text-align; + font-size: $u-numberBox-input-font-size; + padding: $u-numberBox-input-padding; + margin: $u-numberBox-input-margin; + @include flex; + align-items: center; + justify-content: center; + + &--disabled { + color: $u-numberBox-input-disabled-color; + background-color: $u-numberBox-input-disabled-bgColor; + } + } + } +</style> -- Gitblit v1.8.0