开关组件，支持禁用

Tevin

2022-10-25 f2a3bc9eece65a31804e621f6679653e2ca8cffc

开关组件，支持禁用

 forms/switch/CSwitch.vue

@@ -4,10 +4,11 @@
 */

<template>
    <view :class="['c-switch', className]">
    <view :class="['c-switch', className, readOnly?'read-only':'']">
        <AtSwitch
            :title="itemRes.label"
            :checked="itemRes.formData[itemRes.name]"
            :disabled="readOnly"
            :onChange="evt=>itemRes.onChange(evt)"
        />
    </view>
@@ -23,6 +24,11 @@
    props: {
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
        // 只读模式
        readOnly: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {};

 forms/switch/cSwitch.scss

@@ -6,6 +6,16 @@
@import "../../common/sassMixin";

.c-switch {
    &.read-only {
        pointer-events: none;
        background-color: #fafafa;
        .at-switch {
            background-color: transparent;
        }
        .at-switch__container {
            background-color: transparent;
        }
    }
    .at-switch__title {
        font-size: 36px;
    }