@ecolovo/uniapp-components 1.0.0

package/components/number-dialog/number-dialog.vue

@@ -0,0 +1,360 @@
+<template>
+	<view
+		:class="[componentClassNames, { [$style['NumberDialog--disabled']]: disabled }]"
+		@click.stop.prevent="doNothing"
+	>
+		<view
+			v-if="!isReadonly"
+			:class="[
+				$style['NumberDialog--step-button'],
+				$style['NumberDialog--step-button-minus'],
+				{ [$style['NumberDialog--step-button-disabled']]: disabledDecrease },
+			]"
+		>
+			<icon-cpn
+				icon="step-minus"
+				tap-size="60rpx"
+				@touchstart.native="handleStepLongTouchStart($event, -step, disabledDecrease)"
+				@touchend.native="handleStepLongTouchEnd(-step)"
+				@touchcancel.native="handleStepLongTouchEnd(-step)"
+			/>
+		</view>
+		<view
+			:class="[$style['NumberDialog--input'], { [$style['NumberDialog--readonly']]: isReadonly }]"
+			@click="showPad"
+		>
+			<text v-if="isReadonly || value === 0 || value" :class="$style['NumberDialog--value']">{{ value }}</text>
+			<text v-else :class="$style['NumberDialog--placeholder']">{{ placeholder }}</text>
+		</view>
+		<view
+			v-if="!isReadonly"
+			:class="[
+				$style['NumberDialog--step-button'],
+				$style['NumberDialog--step-button-plus'],
+				{ [$style['NumberDialog--step-button-disabled']]: disabledIncrease },
+			]"
+		>
+			<icon-cpn
+				icon="step-plus"
+				tap-size="60rpx"
+				@touchstart.native="handleStepLongTouchStart($event, step, disabledIncrease)"
+				@touchend.native="handleStepLongTouchEnd(step)"
+				@touchcancel.native="handleStepLongTouchEnd(step)"
+			/>
+		</view>
+
+		<popover-mask-cpn v-if="isShowPad" ref="mask" v-model="isShowPad">
+			<dialog-content-cpn
+				title="请输入数字"
+				center-title
+				position="center"
+				:class="$style['NumberDialog--dialog']"
+				@confirm="onConfirm()"
+				@cancel="closePad()"
+			>
+				<view :class="$style['NumberDialog--dialog-input']">
+					<text v-if="editValue === 0 || editValue">{{ editValue }}</text>
+					<text v-else :class="$style['NumberDialog--placeholder']">{{ placeholder }}</text>
+				</view>
+			</dialog-content-cpn>
+			<popover-content-cpn position="bottom">
+				<numpad-cpn v-model="editValue" :precision="precision" :min="min" :max="max" />
+			</popover-content-cpn>
+		</popover-mask-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { isFormReadonly } from '../form/mixin';
+import { round } from '../../utils/round';
+import DialogContentCpn from '../dialog/dialog-content.vue';
+import IconCpn from '../icon/icon.vue';
+import NumpadCpn from '../numpad/numpad.vue';
+import PopoverContentCpn from '../popover/popover-content.vue';
+import PopoverMaskCpn from '../popover/popover-mask.vue';
+
+const MIN = 0;
+const MAX = 9999;
+
+export default {
+	name: 'AppNumberDialog',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { DialogContentCpn, IconCpn, NumpadCpn, PopoverContentCpn, PopoverMaskCpn },
+	mixins: [componentName, isFormReadonly],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: [Number, String],
+			default: '',
+		},
+		/** 是否禁用 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否可编辑，为 true 时点击中间数字会弹出键盘 */
+		editable: {
+			type: Boolean,
+			default: true,
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		/** 占位提示文本 */
+		placeholder: {
+			type: String,
+			default: '请输入',
+		},
+		/** 小数的精度 */
+		precision: {
+			type: Number,
+			default: 0,
+		},
+		/** 步进器的步长 */
+		step: {
+			type: Number,
+			default: 1,
+		},
+		/** 最大值 */
+		max: {
+			type: Number,
+			default: MAX,
+		},
+		/** 最小值 */
+		min: {
+			type: Number,
+			default: MIN,
+		},
+	},
+	data() {
+		return {
+			/** 编辑值 */
+			editValue: '',
+			/** 是否显示数字键盘 */
+			isShowPad: false,
+		};
+	},
+	computed: {
+		/** 是否只读 */
+		isReadonly() {
+			return this.readonly || this.isFormReadonly;
+		},
+		/** 是否禁用减 */
+		disabledDecrease() {
+			if (this.disabled) return true;
+			if (!isNaN(this.value) && +this.value <= Number(this.min)) return true;
+			return false;
+		},
+		/** 是否禁用增 */
+		disabledIncrease() {
+			if (this.disabled) return true;
+			if (!isNaN(this.value) && +this.value >= Number(this.max)) return true;
+			return false;
+		},
+	},
+	watch: {
+		value: {
+			handler(n) {
+				this.editValue = n + '';
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		doNothing() {},
+		/** 长按步进按钮开始处理 */
+		handleStepLongTouchStart(event, step, disabled) {
+			if (disabled) return;
+			if (event.touches && event.touches.length > 1) return;
+
+			this._lastValue = this.value;
+			this._touchingStep = step;
+			let interval = 400;
+			let times = 0;
+
+			const longTouch = () => {
+				if (!this.handleOneStep(step * (times >= 30 ? 4 : times >= 12 ? 2 : 1))) return;
+
+				this._touchTimer = setTimeout(longTouch, interval);
+				interval = Math.max(100, interval - 50);
+				times++;
+			};
+			longTouch();
+		},
+		/** 长按步进按钮结束处理 */
+		handleStepLongTouchEnd(step) {
+			if (this._touchingStep !== step) return;
+			if (this._touchTimer) {
+				clearTimeout(this._touchTimer);
+				this._touchTimer = null;
+			}
+			this._touchingStep = null;
+			this.confirmValue(this.editValue + '', true);
+		},
+		/** 单次步进处理 */
+		handleOneStep(step) {
+			if ((step > 0 && this.disabledIncrease) || (step < 0 && this.disabledDecrease)) {
+				return false;
+			}
+			let nextValue = round(+this.value + step, this.precision);
+
+			this.updateStepValue(nextValue + '');
+			return true;
+		},
+		/** 每次步进处理 */
+		updateStepValue(value) {
+			value = this.validateValue(value, true);
+			this.$emit('input', value);
+			this.editValue = value;
+		},
+		/** 校验数据
+		 * @param {string} value 输入值
+		 * @param {boolean} isStepButton 是否为步进按钮触发
+		 */
+		validateValue(value, isStepButton = false) {
+			let nextValue;
+			if (isNaN(value)) {
+				// 输入不合法，取消此次输入
+				nextValue = isStepButton ? 0 : this._lastValue;
+				this.$emit('error', '请输入正确的数值');
+			} else if (value === '') {
+				// 输入空值
+				nextValue = isStepButton ? 0 : '';
+				this.$emit('error', '请输入数值');
+			} else if (+value < this.min) {
+				// 超过最小输入值
+				nextValue = this.min;
+				this.$emit('error', `数值不能小于 ${this.min}`);
+			} else if (+value > this.max) {
+				// 超过最大输入值
+				nextValue = this.max;
+				this.$emit('error', `数值不能大于 ${this.max}`);
+			} else {
+				nextValue = round(+value, this.precision);
+			}
+			return nextValue;
+		},
+		/** 确认数据
+		 * @param {string} value
+		 */
+		confirmValue(value, isStepButton = false) {
+			value = this.validateValue(value, isStepButton);
+			this.editValue = value + '';
+
+			this.$emit('input', value);
+			this.$emit('change', { value, lastValue: this._lastValue });
+		},
+		/** 显示数字键盘弹框 */
+		showPad() {
+			if (this.isReadonly || this.disabled || !this.editable) return;
+
+			this.editValue = this.value + '';
+			this.isShowPad = true;
+		},
+		/** 关闭数字键盘弹框 */
+		closePad() {
+			this.$refs.mask.close();
+		},
+		/** 点击弹框确认按钮 */
+		onConfirm() {
+			this.confirmValue(this.editValue);
+			this.closePad();
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'number-dialog';
+$component-vars: $number-dialog;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+.NumberDialog {
+	@extend %external-vars;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	color: UTILS__GLOBAL_VAR(color, foreground);
+
+	&::after {
+		position: absolute;
+		content: '';
+		inset: 0;
+		background: #ffffff80;
+		visibility: hidden;
+		opacity: 0;
+		transition: all 0.2s;
+	}
+	&.NumberDialog--disabled::after {
+		visibility: visible;
+		opacity: 1;
+	}
+}
+
+.NumberDialog--input {
+	width: 4em;
+	height: 48rpx;
+	line-height: 48rpx;
+	text-align: center;
+	overflow: hidden;
+	&.NumberDialog--readonly {
+		width: 100%;
+		height: 100%;
+		text-align: inherit;
+	}
+}
+.NumberDialog--value {
+	color: UTILS__GLOBAL_VAR(color, foreground);
+}
+.NumberDialog--placeholder {
+	color: UTILS__GLOBAL_VAR(color, placeholder);
+}
+
+.NumberDialog--step-button {
+	position: relative;
+	width: 48rpx;
+	height: 48rpx;
+	border-radius: 8rpx;
+	color: #999;
+	background: UTILS__GLOBAL_VAR(color, background);
+	font-size: 32rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	&.NumberDialog--step-button-minus {
+		margin-right: 20rpx;
+	}
+	&.NumberDialog--step-button-plus {
+		margin-left: 20rpx;
+	}
+
+	&.NumberDialog--step-button-disabled {
+		color: #ccc;
+	}
+}
+
+.NumberDialog--dialog {
+	#{UTILS__VAR_NAME(position, popover)}: calc(50% - 240rpx) auto auto 50%;
+}
+.NumberDialog--dialog-input {
+	height: 50rpx;
+	line-height: 50rpx;
+	font-size: 36rpx;
+	text-align: center;
+}
+</style>

package/components/number-input/number-input.vue

@@ -0,0 +1,352 @@
+<template>
+	<view
+		:class="[componentClassNames, { [$style['NumberInput--step-mode']]: mode === 'step' }]"
+		@click.stop.prevent="doNothing"
+	>
+		<view
+			v-if="mode === 'step' && !isReadonly"
+			:class="[
+				$style['NumberInput--step-button'],
+				$style['NumberInput--step-button-minus'],
+				{ [$style['NumberInput--step-button-disabled']]: disabledDecrease },
+			]"
+		>
+			<icon-cpn
+				icon="step-minus"
+				@touchstart.native="handleLongTouchStart($event, -step, disabledDecrease)"
+				@touchend.native="handleLongTouchEnd(-step)"
+				@touchcancel.native="handleLongTouchEnd(-step)"
+			/>
+		</view>
+		<view v-if="isReadonly" :class="[$style['NumberInput--value'], { disabled }]">
+			{{ value }}
+		</view>
+		<input
+			v-else-if="editable || mode !== 'step'"
+			v-model="editValue"
+			:type="type"
+			maxlength="14"
+			:class="[$style['NumberInput--input'], mode === 'step' ? $style['NumberInput--step-input'] : '']"
+			:disabled="disabled"
+			:placeholder="placeholder"
+			:placeholder-class="$style['NumberInput--input-placeholder']"
+			@input="handleInput"
+			@focus="handleFocus"
+			@blur="handleInputConfirm"
+		/>
+		<view v-else :class="$style['NumberInput--input-value']">{{ value || 0 }}</view>
+		<view
+			v-if="mode === 'step' && !isReadonly"
+			:class="[
+				$style['NumberInput--step-button'],
+				$style['NumberInput--step-button-plus'],
+				{ [$style['NumberInput--step-button-disabled']]: disabledIncrease },
+			]"
+		>
+			<icon-cpn
+				icon="step-plus"
+				@touchstart.native="handleLongTouchStart($event, step, disabledIncrease)"
+				@touchend.native="handleLongTouchEnd(step)"
+				@touchcancel.native="handleLongTouchEnd(step)"
+			/>
+		</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { isFormReadonly } from '../form/mixin';
+import { round } from '../../utils/round';
+import IconCpn from '../icon/icon.vue';
+
+const MIN = 0;
+const MAX = 9999999999;
+const numberReg = /^(-?)(\d*)()(-?)$/;
+
+export default {
+	name: 'AppNumberInput',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { IconCpn },
+	mixins: [componentName, isFormReadonly],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: [Number, String],
+			default: '',
+		},
+		/** 是否禁用 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否可编辑 */
+		editable: {
+			type: Boolean,
+			default: true,
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		/** 类型: input: 只有输入框 | step: 步进器，即带 + - 按钮 */
+		mode: {
+			type: String,
+			validator: (val) => !val || ['input', 'step'].includes(val),
+			default: 'input',
+		},
+		/** 输入模式: number: 只能输入整数 | digit: 小数 | text: 如需输入负数 */
+		type: {
+			type: String,
+			validator: (val) => !val || ['number', 'digit', 'text'].includes(val),
+			default: 'number',
+		},
+		/** 占位提示文本 */
+		placeholder: {
+			type: String,
+			default: '请输入',
+		},
+		/** 小数的精度 */
+		precision: {
+			type: Number,
+			default: 0,
+		},
+		/** 步进器的步长 */
+		step: {
+			type: Number,
+			default: 1,
+		},
+		/** 最大值 */
+		max: {
+			type: Number,
+			default: MAX,
+		},
+		/** 最小值 */
+		min: {
+			type: Number,
+			default: MIN,
+		},
+	},
+	data() {
+		return {
+			/** 显示值 */
+			editValue: '',
+		};
+	},
+	computed: {
+		isReadonly() {
+			return this.readonly || this.isFormReadonly;
+		},
+		inputTestReg() {
+			return this.precision > 0 ? new RegExp('^(-?)(\\d*)(\\.\\d{0,' + this.precision + '})?(-?)$') : numberReg;
+		},
+		/** 是否禁用减 */
+		disabledDecrease() {
+			if (this.disabled) return true;
+			const val = Number(this.value);
+			if (!Number.isNaN(val) && val <= Number(this.min)) return true;
+			return false;
+		},
+		/** 是否禁用增 */
+		disabledIncrease() {
+			if (this.disabled) return true;
+			const val = Number(this.value);
+			if (!Number.isNaN(val) && val >= Number(this.max)) return true;
+			return false;
+		},
+	},
+	watch: {
+		value: {
+			handler(n) {
+				this.editValue = n + '';
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		doNothing() {},
+		/** 聚焦 */
+		handleFocus() {
+			this._lastValue = this.value;
+			this._lastEditValue = this.value;
+		},
+		handleLongTouchStart(event, step, disabled) {
+			if (disabled) return;
+			if (event.touches && event.touches.length > 1) return;
+
+			this._lastValue = this.value;
+			this._touchStep = step;
+			let interval = 400;
+			let times = 0;
+
+			const longTouch = () => {
+				if (!this.handleStep(step * (times >= 30 ? 4 : times >= 12 ? 2 : 1))) return;
+
+				this._touchTimer = setTimeout(longTouch, interval);
+				interval = Math.max(100, interval - 50);
+				times++;
+			};
+			longTouch();
+		},
+		handleLongTouchEnd(step) {
+			if (this._touchStep !== step) return;
+			if (this._touchTimer) {
+				clearTimeout(this._touchTimer);
+				this._touchTimer = null;
+			}
+			this._touchStep = null;
+			this.confirmValue(this.editValue + '', true);
+		},
+		/** 点击按钮修改数量 */
+		handleStep(step) {
+			if ((step > 0 && this.disabledIncrease) || (step < 0 && this.disabledDecrease)) {
+				return false;
+			}
+			let nextValue = round(+this.value + step, this.precision);
+
+			this.updateStepValue(nextValue + '');
+			return true;
+		},
+		handleInput(e) {
+			let value = e.detail.value.trim();
+
+			const match = this.inputTestReg.exec(value);
+			if (match) {
+				// sign: 负号; integer: 整数部分数字; decimal: 小数部分数字; resign: 再次输入负号，取消负号
+				let [, sign = '', integer = '', decimal = '', resign = ''] = match;
+				sign = !!sign ^ !!resign ? '-' : '';
+				integer = integer ? Number(integer) || '0' : decimal ? '0' : '';
+				value = sign + integer + decimal;
+
+				this._lastEditValue = value;
+				this.$emit('input', value);
+				this.$nextTick(() => {
+					this.editValue = value;
+				});
+			} else {
+				this.$nextTick(() => {
+					this.editValue = this._lastEditValue;
+				});
+			}
+		},
+		updateStepValue(value) {
+			value = this.validateValue(value, true);
+			this.$emit('input', value);
+			this.editValue = value;
+		},
+		/** 修改数目输入完毕 */
+		handleInputConfirm(e) {
+			let value = e.detail.value;
+			this.confirmValue(value);
+		},
+		/** 确认数据
+		 * @param {string} value
+		 */
+		confirmValue(value, isStepButton = false) {
+			value = this.validateValue(value, isStepButton);
+			this.editValue = value + '';
+
+			this.$emit('input', value);
+			this.$emit('change', value);
+		},
+		/** 确认数据前校验
+		 * @param {string} value
+		 */
+		validateValue(value, isStepButton = false) {
+			let _nextValue;
+			if (isNaN(value)) {
+				// 输入不合法，取消此次输入
+				_nextValue = isStepButton ? 0 : this._lastValue;
+				this.$emit('error', '请输入正确的数值');
+			} else if (value === '') {
+				// 输入空值
+				_nextValue = isStepButton ? 0 : '';
+				this.$emit('error', '请输入数值');
+			} else if (+value < this.min) {
+				// 超过最小输入值
+				_nextValue = this.min;
+				this.$emit('error', `数值不能小于 ${this.min}`);
+			} else if (+value > this.max) {
+				// 超过最大输入值
+				_nextValue = this.max;
+				this.$emit('error', `数值不能大于 ${this.max}`);
+			} else {
+				_nextValue = round(+value, this.precision);
+			}
+			return _nextValue;
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'number-input';
+$component-vars: $number-input;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+.NumberInput {
+	@extend %external-vars;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	color: UTILS__GLOBAL_VAR(color, foreground);
+	font-size: UTILS__LOCAL_VAR(font-size);
+}
+
+.NumberInput--input {
+	flex: 1;
+	height: 100%;
+	text-align: inherit;
+	border-bottom-width: 1rpx;
+	.NumberInput--step-mode & {
+		text-align: UTILS__LOCAL_VAR(text-align);
+	}
+}
+.NumberInput--input-placeholder {
+	color: UTILS__GLOBAL_VAR(color, placeholder);
+}
+.NumberInput--input-value {
+	@extend .NumberInput--input;
+	min-width: 2em;
+	height: auto;
+}
+.NumberInput--value {
+	text-align: center;
+}
+.NumberInput--step-button {
+	position: relative;
+	width: 48rpx;
+	height: 48rpx;
+	border-radius: 8rpx;
+	color: #999;
+	background: UTILS__GLOBAL_VAR(color, background);
+	font-size: 32rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	&.NumberInput--step-button-minus {
+		margin-right: 20rpx;
+	}
+	&.NumberInput--step-button-plus {
+		margin-left: 20rpx;
+	}
+
+	&.NumberInput--step-button-disabled {
+		color: #ccc;
+	}
+}
+.NumberInput--step-input {
+	border: none;
+}
+</style>