From cde19a1c1471c1a4dbe51bd6b0903d6c948c9c26 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Wed, 29 May 2024 12:31:18 +0800
Subject: [PATCH] 优化开关式单选框排版显示
---
forms/switch/cSwitch.scss | 23 ++++++++++++++---------
forms/switch/CSwitchRadio.vue | 18 ++++++++++++++++--
2 files changed, 30 insertions(+), 11 deletions(-)
diff --git a/forms/switch/CSwitchRadio.vue b/forms/switch/CSwitchRadio.vue
index b82eb85..b4034c8 100644
--- a/forms/switch/CSwitchRadio.vue
+++ b/forms/switch/CSwitchRadio.vue
@@ -8,8 +8,14 @@
class="c-switch c-switch-radio"
:class="className"
>
- <AtSwitch :title="itemRes.label" />
- <view class="c-switch-radio-group">
+ <AtSwitch
+ :title="itemRes.label"
+ ref="switch"
+ />
+ <view
+ class="c-switch-radio-group"
+ ref="radio"
+ >
<view
class="c-switch-radio-item"
@tap="evt => handleChange(true)"
@@ -40,6 +46,7 @@
<script>
import { AtSwitch, AtIcon } from 'taro-ui-vue';
+import { $ } from '@tarojs/extend';
import './cSwitch.scss';
export default {
@@ -93,5 +100,12 @@
this.itemRes.onChange(value);
},
},
+ mounted() {
+ if (process.env.TARO_ENV === 'h5') {
+ $(this.$refs.switch.$el).find('.at-switch').prepend(this.$refs.radio.$el);
+ } else if (process.env.TARO_ENV === 'weapp') {
+ $(this.$refs.switch.$el).find('.at-switch').append(this.$refs.radio);
+ }
+ },
};
</script>
\ No newline at end of file
diff --git a/forms/switch/cSwitch.scss b/forms/switch/cSwitch.scss
index 93dd0ae..2e6d5d0 100644
--- a/forms/switch/cSwitch.scss
+++ b/forms/switch/cSwitch.scss
@@ -69,20 +69,25 @@
}
&.c-switch-radio {
position: relative;
+ .at-switch {
+ padding-top: 18px;
+ padding-bottom: 18px;
+ }
.at-switch__title {
- flex: 4;
+ flex: unset;
+ width: 162px;
+ margin-right: 20px;
}
.at-switch__container {
- visibility: hidden;
+ display: none;
}
.c-switch-radio-group {
- @include position(absolute, 50% n n 0);
- padding: 24px 32px 24px 0;
- transform: translateY(-50%);
+ @include flexbox(flex, flex-start center, n wrap);
+ flex: 1;
}
.c-switch-radio-item {
- display: inline-block;
- padding-left: 24px;
+ @include flexbox(flex, flex-start center);
+ padding: 6px 0 6px 26px;
}
.c-switch-radio-icon {
@include flexbox(inline, center center);
@@ -106,13 +111,13 @@
}
.c-switch-radio-label {
display: inline-block;
- vertical-align: middle;
padding-left: 6px;
+ vertical-align: middle;
+ white-space: pre-wrap;
}
}
&.c-switch-radio-left {
.c-switch-radio-group {
- width: calc(100% - 214px);
padding-right: 0;
.c-switch-radio-item {
padding-left: 0;
--
Gitblit v1.9.1