重写 CSwitchRadio，弃用 Taro radio 组件

Tevin

2022-03-07 69acc93bc052651b725008beb83db0baee8f3259

重写 CSwitchRadio，弃用 Taro radio 组件

 forms/switch/CSwitchRadio.vue

@@ -9,30 +9,45 @@
        :class="className"
    >
        <AtSwitch :title="itemRes.label" />
        <radio-group @change="evt => handleChange(evt.detail.value)">
            <label>
                <radio
                    value="true"
                    :checked="itemRes.formData[itemRes.name]"
                >{{checkedLabel}}</radio>
            </label>
            <label>
                <radio
                    value="false"
                    :checked="!itemRes.formData[itemRes.name]"
                >{{uncheckedLabel}}</radio>
            </label>
        </radio-group>
        <view class="c-switch-radio-group">
            <view
                class="c-switch-radio-item"
                @tap="evt => handleChange(true)"
            >
                <text
                    class="c-switch-radio-icon"
                    :class="current === true ? 'checked' : ''"
                >
                    <AtIcon value="check" />
                </text>
                <text>{{checkedLabel}}</text>
            </view>
            <view
                class="c-switch-radio-item"
                @tap="evt => handleChange(false)"
            >
                <text
                    class="c-switch-radio-icon"
                    :class="current === false ? 'checked' : ''"
                >
                    <AtIcon value="check" />
                </text>
                <text>{{uncheckedLabel}}</text>
            </view>
        </view>
    </view>
</template>

<script>
import { AtSwitch } from 'taro-ui-vue';
import { AtSwitch, AtIcon } from 'taro-ui-vue';
import './cSwitch.scss';

export default {
    name: 'CSwitchRadio',
    components: { AtSwitch },
    components: {
        AtSwitch,
        AtIcon,
    },
    props: {
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
@@ -59,10 +74,13 @@
            }
            return className;
        },
        current() {
            return this.itemRes.formData[this.itemRes.name];
        },
    },
    methods: {
        handleChange(value) {
            this.itemRes.onChange(JSON.parse(value));
            this.itemRes.onChange(value);
        },
    },
};

 forms/switch/cSwitch.scss

@@ -39,13 +39,33 @@
        .at-switch__container {
            visibility: hidden;
        }
        .weui-cells_radiogroup {
        .c-switch-radio-group {
            @include position(absolute, 50% n n 0);
            padding: 24px 32px 24px 0;
            transform: translateY(-50%);
        }
        .weui-check:checked+.weui-icon-checked:before {
            color: #2093df;
        .c-switch-radio-item {
            display: inline-block;
            padding-left: 8px;
        }
        .c-switch-radio-icon {
            @include flexbox(inline, center center);
            width: 48px;
            min-width: 48px;
            height: 48px;
            color: transparent;
            font-size: 32px;
            line-height: 1;
            border: 1PX solid #c9c9c9;
            border-radius: 50%;
            background-color: #fff;
            box-sizing: border-box;
            transition: all .2s;
            &.checked {
                color: #fff;
                border: none;
                background-color: #2093df;
            }
        }
    }
}