From bd99a5211f3a5fcaa051e5da868d87bb870148f5 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 01 Mar 2024 09:58:45 +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