From e3426d0fa18fc2305f799a35eb0848c17e24b452 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Wed, 21 Apr 2021 17:35:49 +0800
Subject: [PATCH] 表单显示细节优化
---
forms/datePicker/CDateRangeAction.vue | 11 ++++-
forms/datePicker/CDateTimeAction.vue | 7 ++-
forms/form/cForm.scss | 3 +
forms/numberStep/CNumberStep.vue | 29 ++++++++++----
forms/datePicker/CDatePicker.vue | 4 ++
forms/numberValve/CNumberValve.vue | 20 +++++++++-
forms/numberValve/cNumberValve.scss | 5 ++
forms/numberStep/cNumberStep.scss | 26 ++++++++++--
8 files changed, 85 insertions(+), 20 deletions(-)
diff --git a/forms/datePicker/CDatePicker.vue b/forms/datePicker/CDatePicker.vue
index 8521004..d6b58fc 100644
--- a/forms/datePicker/CDatePicker.vue
+++ b/forms/datePicker/CDatePicker.vue
@@ -9,6 +9,7 @@
v-if="mode==='dateRange'"
:value="itemRes.formData[itemRes.name]"
:onChange="evt=>handleChange(evt)"
+ :placeholder="placeholder"
>
<AtInput
ref="input"
@@ -25,6 +26,7 @@
v-else-if="mode==='dateTime'"
:value="itemRes.formData[itemRes.name]"
:onChange="evt=>handleChange(evt)"
+ :placeholder="placeholder"
>
<AtInput
ref="input"
@@ -63,6 +65,8 @@
type: String,
default: 'date',
},
+ // 占位提示
+ placeholder: String,
},
data() {
return {};
diff --git a/forms/datePicker/CDateRangeAction.vue b/forms/datePicker/CDateRangeAction.vue
index eb1d9c4..65c19d6 100644
--- a/forms/datePicker/CDateRangeAction.vue
+++ b/forms/datePicker/CDateRangeAction.vue
@@ -22,7 +22,10 @@
:show="drawerShow"
:onClose="evt => drawerShow=false"
>
- <view class="title">请选择日期</view>
+ <view class="title">
+ <view v-if="placeholder">{{placeholder}}</view>
+ <view v-else>请选择日期</view>
+ </view>
<view class="date">
<picker
mode='date'
@@ -76,8 +79,12 @@
AtButton,
},
props: {
- value: null,
+ // 项值
+ value: String,
+ // 变化回调
onChange: Function,
+ // 占位提示
+ placeholder: String,
},
data() {
return {
diff --git a/forms/datePicker/CDateTimeAction.vue b/forms/datePicker/CDateTimeAction.vue
index 4418f01..9ac2ad2 100644
--- a/forms/datePicker/CDateTimeAction.vue
+++ b/forms/datePicker/CDateTimeAction.vue
@@ -23,7 +23,8 @@
:onClose="evt => drawerShow=false"
>
<view class="title">
- <view>请选择日期时间</view>
+ <view v-if="placeholder">{{placeholder}}</view>
+ <view v-else>请选择日期与时间</view>
<AtButton
size="small"
type="primary"
@@ -85,9 +86,11 @@
},
props: {
// 项值
- value: null,
+ value: String,
// 变化回调
onChange: Function,
+ // 占位提示
+ placeholder: String,
},
data() {
return {
diff --git a/forms/form/cForm.scss b/forms/form/cForm.scss
index 5c9f348..fa48852 100644
--- a/forms/form/cForm.scss
+++ b/forms/form/cForm.scss
@@ -8,6 +8,9 @@
.c-form {
width: 100%;
.c-form-item {
+ .at-input__title {
+ margin-right: 20px;
+ }
.at-input__title--required {
position: relative;
&::before {
diff --git a/forms/numberStep/CNumberStep.vue b/forms/numberStep/CNumberStep.vue
index edf4536..324af11 100644
--- a/forms/numberStep/CNumberStep.vue
+++ b/forms/numberStep/CNumberStep.vue
@@ -13,15 +13,21 @@
:disabled="itemRes.disabled"
:error="itemRes.error"
/>
- <AtInputNumber
+ <view
+ class="c-number-step-step"
+ :class="unit?'on-unit':''"
ref="number"
- :min="range[0]"
- :max="range[1]"
- :step="step"
- :width="120"
- :value="itemRes.formData[itemRes.name]"
- :onChange="evt=>itemRes.onChange(evt)"
- />
+ >
+ <AtInputNumber
+ :min="range[0]"
+ :max="range[1]"
+ :step="step"
+ :width="120"
+ :value="itemRes.formData[itemRes.name]"
+ :onChange="evt=>itemRes.onChange(evt)"
+ />
+ <view class="c-number-step-unit">{{unit}}</view>
+ </view>
</view>
</template>
@@ -52,6 +58,11 @@
type: Number,
default: 1,
},
+ // 数值单位
+ unit: {
+ type: String,
+ default: '',
+ },
},
data() {
return {};
@@ -66,7 +77,7 @@
} else if (process.env.TARO_ENV === 'weapp') {
$(this.$refs.input.$el)
.find('.at-input__container')
- .append(this.$refs.number.$el);
+ .append(this.$refs.number);
}
},
};
diff --git a/forms/numberStep/cNumberStep.scss b/forms/numberStep/cNumberStep.scss
index 7308861..f66a649 100644
--- a/forms/numberStep/cNumberStep.scss
+++ b/forms/numberStep/cNumberStep.scss
@@ -18,12 +18,28 @@
.at-input {
padding: 16px 0;
}
- .at-input-number {
- .at-input-number__btn {
- padding: 16px 16px;
+ .c-number-step-step {
+ .at-input-number {
+ .at-input-number__btn {
+ padding: 16px 16px;
+ width: 30px;
+ height: 30px;
+ }
+ .at-input-number__input {
+ font-size: 30px;
+ }
}
- .at-input-number__input {
- font-size: 30px;
+ &.on-unit {
+ position: relative;
+ .at-input-number__input {
+ padding-right: 40px;
+ }
+ .c-number-step-unit {
+ @include position(absolute, 2px 186px n n);
+ width: 40px;
+ line-height: 62px;
+ color: #999;
+ }
}
}
}
\ No newline at end of file
diff --git a/forms/numberValve/CNumberValve.vue b/forms/numberValve/CNumberValve.vue
index 394d8c4..98e7af5 100644
--- a/forms/numberValve/CNumberValve.vue
+++ b/forms/numberValve/CNumberValve.vue
@@ -16,12 +16,15 @@
:required="itemRes.required"
:disabled="itemRes.disabled"
:error="itemRes.error"
- :value="itemRes.formData[itemRes.name]"
+ :value="itemRes.formData[itemRes.name] + unit"
+ :placeholder="placeholder"
>
<view class="at-icon at-icon-chevron-right"></view>
</AtInput>
</view>
<AtFloatLayout
+ :class="placeholder?'on-title':''"
+ :title="placeholder"
:isOpened="opened"
:onClose="evt => handleClose()"
>
@@ -93,6 +96,11 @@
type: Number,
default: 1,
},
+ // 数值单位（仅显示）
+ unit: {
+ type: String,
+ default: '',
+ },
},
data() {
return {
@@ -125,9 +133,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);
diff --git a/forms/numberValve/cNumberValve.scss b/forms/numberValve/cNumberValve.scss
index 7fc9ff5..c4c2c71 100644
--- a/forms/numberValve/cNumberValve.scss
+++ b/forms/numberValve/cNumberValve.scss
@@ -36,6 +36,11 @@
max-height: 100%;
min-height: auto;
}
+ &.on-title {
+ .at-float-layout__container {
+ height: 530px;
+ }
+ }
.layout-body {
height: 100%;
min-height: auto;
--
Gitblit v1.9.1