实现同级显示的单选、多选框组件

Tevin

2022-03-07 8e8e161971d8876e159f94e7e0f9e0d52d548e8a

实现同级显示的单选、多选框组件

 forms/checkbox/CCheckBox.vue

New file
@@ -0,0 +1,96 @@
/**
 * CCheckBox
 * @author Tevin
 */

<template>
    <view class="c-check-box">
        <AtInput
            ref="input"
            :name="itemRes.name"
            :title="itemRes.label"
            :required="itemRes.required"
            :disabled="itemRes.disabled"
            :error="itemRes.error"
        />
        <AtCheckbox
            ref="check"
            :class="'c-check-box-' + boxType"
            :options="options"
            :selectedList="selectedList"
            :onChange="evt => handleChange(evt)"
        />
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import { AtInput, AtCheckbox } from 'taro-ui-vue';
import { Tools } from '@components/common/Tools';
import './cCheckBox.scss';

export default {
    name: 'CCheckBox',
    components: {
        AtInput,
        AtCheckbox,
    },
    props: {
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
        // 选项列表
        options: {
            type: Array,
            default: () => [],
        },
        // 勾选类型
        boxType: {
            type: String,
            default: 'checkbox', // checkbox 多选、radio 单选
        },
    },
    data() {
        return {};
    },
    computed: {
        selectedList() {
            const value = this.itemRes.formData[this.itemRes.name];
            if (Tools.isArray(value)) {
                return value;
            } else {
                return [value];
            }
        },
    },
    methods: {
        handleChange(evt) {
            // 多选
            if (this.boxType === 'checkbox') {
                const next = [];
                evt.forEach(item => {
                    if (typeof item === 'undefined') {
                        return;
                    }
                    next.push(item);
                });
                this.itemRes.onChange(next);
            }
            // 单选
            else if (this.boxType === 'radio') {
                const next = evt[evt.length - 1];
                this.itemRes.onChange(next);
            }
        },
    },
    mounted() {
        if (process.env.TARO_ENV === 'h5') {
            $(this.$refs.input.$el)
                .find('.at-input__container')
                .prepend(this.$refs.check.$el);
        } else if (process.env.TARO_ENV === 'weapp') {
            $(this.$refs.input.$el).find('.at-input__container').append(this.$refs.check);
        }
    },
};
</script>

 forms/checkbox/cCheckBox.scss

New file
@@ -0,0 +1,51 @@
/**
 * CCheckBox
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-check-box {
    .at-input {
        padding-bottom: 0;
    }
    .at-input__container {
        @include flexbox(flex, flex-start center, row wrap);
        .at-input__title {
            width: auto;
        }
        .at-input__input,
        .weui-input,
        input {
            display: none;
        }
        .at-checkbox {
            width: 96%;
            padding-left: 4%;
            &::before,
            &::after {
                display: none;
            }
            &.c-check-box-checkbox {
                .at-checkbox__icon-cnt {
                    width: 48px;
                    height: 48px;
                    font-size: 32px;
                    border-radius: 0;
                    border-color: #c9c9c9;
                }
            }
            &.c-check-box-radio {
                .at-checkbox__icon-cnt {
                    width: 48px;
                    height: 48px;
                    font-size: 32px;
                    border-color: #c9c9c9;
                }
            }
        }
    }
    .at-input__icon {
        display: none;
    }
}

 forms/checkbox/index.js

New file
@@ -0,0 +1,10 @@
/**
 * CCheckBox
 * @author Tevin
 */

import CCheckBox from '@components/forms/checkBox/CCheckBox.vue';

export {
    CCheckBox,
}