优化开关式单选框排版显示

Tevin

2024-05-29 cde19a1c1471c1a4dbe51bd6b0903d6c948c9c26

优化开关式单选框排版显示

 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>

 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;