From fdeb869c386da95150a087bc22bcebc4e57d0f76 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Tue, 18 Mar 2025 18:16:32 +0800
Subject: [PATCH] 更新所有表单组件文档和头注释
---
forms/numberValve/CNumberValve.vue | 96 ++++++++++++++++++++++++++++++++++++------------
1 files changed, 72 insertions(+), 24 deletions(-)
diff --git a/forms/numberValve/CNumberValve.vue b/forms/numberValve/CNumberValve.vue
index e19731e..777778b 100644
--- a/forms/numberValve/CNumberValve.vue
+++ b/forms/numberValve/CNumberValve.vue
@@ -1,5 +1,8 @@
/**
* CNumberValve
+ * 数值滑块组件，用于在表单中通过滑块选择数值
+ * 提供了滑动条和增减按钮两种方式来调整数值
+ * 支持设置数值范围、步长和单位显示
* @author Tevin
*/
@@ -16,18 +19,15 @@
:required="itemRes.required"
:disabled="itemRes.disabled"
:error="itemRes.error"
- :value="itemRes.formData[itemRes.name]"
+ :value="valueStr"
+ :placeholder="placeholder"
>
<view class="at-icon at-icon-chevron-right"></view>
</AtInput>
</view>
- <AtRange
- :min="range[0]"
- :max="range[1]"
- :value="[0, itemRes.formData[itemRes.name]]"
- :onChange="evt => evt && itemRes.onChange(evt[1])"
- />
<AtFloatLayout
+ :class="placeholder?'on-title':''"
+ :title="placeholder"
:isOpened="opened"
:onClose="evt => handleClose()"
>
@@ -52,7 +52,16 @@
@touchstart="evt => handleTouchStart()"
@touchmove="evt => handleTouchMove(evt)"
></view>
- <view class="current"><text class="text">{{current}}</text></view>
+ <view class="current">
+ <text
+ class="text m-text-ignore"
+ v-if="current===''"
+ >(请拖动)</text>
+ <text
+ class="text"
+ v-else
+ >{{current}}</text>
+ </view>
</view>
</view>
<view class="btn">
@@ -74,7 +83,7 @@
<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
-import { AtInput, AtFloatLayout, AtButton, AtRange } from 'taro-ui-vue';
+import { AtInput, AtFloatLayout, AtButton } from 'taro-ui-vue';
import './cNumberValve.scss';
export default {
@@ -83,7 +92,6 @@
AtInput,
AtFloatLayout,
AtButton,
- AtRange,
},
props: {
// 表单数据资源（表单组件内部机制专用）
@@ -100,16 +108,32 @@
type: Number,
default: 1,
},
+ // 数值单位（仅显示）
+ unit: {
+ type: String,
+ default: '',
+ },
},
data() {
return {
opened: false,
rect: { width: 0, left: 0 },
- current: 0,
+ current: '',
sliderLeft: 0,
};
},
- computed: {},
+ computed: {
+ valueStr() {
+ if (
+ this.itemRes.formData[this.itemRes.name] ||
+ this.itemRes.formData[this.itemRes.name] === 0
+ ) {
+ return this.itemRes.formData[this.itemRes.name] + ' ' + this.unit;
+ } else {
+ return '';
+ }
+ },
+ },
methods: {
handleOpen() {
this.opened = true;
@@ -132,9 +156,17 @@
const targetValue = clientX - this.rect.left;
const distance = Math.min(Math.max(targetValue, 0), this.rect.width);
const sliderLeft = Math.floor((distance / this.rect.width) * 100);
- const sliderValue =
+ // 实际值
+ let sliderValue =
Math.round((sliderLeft / 100) * (this.range[1] - this.range[0])) +
this.range[0];
+ if (this.range[0] < sliderValue && sliderValue < this.range[1]) {
+ sliderValue -= sliderValue % this.step;
+ }
+ // 范围限制
+ sliderValue = Math.max(sliderValue, this.range[0]);
+ sliderValue = Math.min(sliderValue, this.range[1]);
+ // 设置
this.sliderLeft = sliderLeft;
this.current = sliderValue;
this.itemRes.onChange(sliderValue);
@@ -143,29 +175,45 @@
let $slider = null;
if (process.env.TARO_ENV === 'h5') {
$slider = $(this.$refs.slider.$el);
+ const rect = $slider[0].getBoundingClientRect();
+ this.rect.width = rect.width;
+ this.rect.left = rect.left;
} else if (process.env.TARO_ENV === 'weapp') {
- $slider = $(this.$refs.slider);
+ Taro.createSelectorQuery()
+ .select('#' + this.$refs.slider.uid)
+ .boundingClientRect(rect => {
+ this.rect.width = rect.width;
+ this.rect.left = rect.left;
+ })
+ .exec();
}
- Taro.createSelectorQuery()
- .select('#' + this.$refs.slider.uid)
- .boundingClientRect(rect => {
- this.rect.width = rect.width;
- this.rect.left = rect.left;
- })
- .exec();
},
handleChangeVal(type, value) {
this.updateRect();
let currentNext = 0;
if (type === 'left') {
- currentNext = this.current - this.step;
+ const gap = this.current % this.step;
+ if (gap === 0) {
+ currentNext = this.current - this.step;
+ } else {
+ currentNext = this.current - gap;
+ }
} else if (type === 'right') {
- currentNext = this.current + this.step;
+ const gap = this.current % this.step;
+ if (gap === 0) {
+ currentNext = this.current + this.step;
+ } else {
+ currentNext = this.current + (this.step - gap);
+ }
} else if (type === 'change') {
currentNext = value;
}
+ // 范围限制
+ currentNext = Math.max(currentNext, this.range[0]);
+ currentNext = Math.min(currentNext, this.range[1]);
+ // 设置
const sliderLeft = Math.round(
- ((currentNext - this.range[0]) / (this.range[1] - this.range[0])) * 100
+ ((currentNext - this.range[0]) / (this.range[1] - this.range[0])) * 100,
);
this.sliderLeft = sliderLeft;
this.current = currentNext;
--
Gitblit v1.9.1