magiccube-vue3/package/components/form-item/index.js

vue3-js版组件库

import { inject, computed, ref } from 'vue'
const FormItem = {
    name: 'McFormItem',
    props: {
        label: String,
        keyName: String,
        required: Boolean,
        align: {
            type: String,
            default: 'right'
        }
    },
    emits: ['click'],
    setup(props, { slots, expose }) {

        const labelWidth = inject('labelWidth')
        const errorMessageCollect = inject('errorMessageCollect')
        const validating = inject('validating')

        const errorMessage = computed(() => {
            return errorMessageCollect.value[props.keyName] || ''
        })

        const labelEl = ref(null)
        const errorNoticeNode = () => {
            if (errorMessage.value) {
                const paddingLeftValue = labelWidth.value || labelEl.value.offsetWidth
                return (
                    <div class="mc-form-item__hint"
                        style={{
                            paddingLeft: paddingLeftValue + 'px'
                        }}>
                        <span class="mc-form-item__hint--message">{errorMessage.value}</span>
                    </div>
                )
            }
        }

        const valid = async (action, value) => {
            return await validating(props.keyName, value, action)
        }

        expose({
            valid
        })

        return () => (
            <div class="mc-form-item">
                <div class={[
                    'mc-form-item__field',
                    {'align-top': props.align === 'top'}
                ]}>
                    <label class={[
                        'mc-form-item__field--label',
                        {
                            required: props.required
                        }
                    ]}
                    ref={labelEl}
                    style={{
                        width: labelWidth.value + 'px',
                        textAlign: props.align
                    }}>
                        {slots.label ? slots.label() : props.label}
                    </label>
                    <div class="mc-form-item__field--action">
                        {
                            slots.default ? slots.default() : ''
                        }
                    </div>
                </div>
                {
                    errorNoticeNode()
                }
            </div>
        )
    }
}

FormItem.install = (app) => {
    app.component(FormItem.name, FormItem)
}

const McFormItem = FormItem

export { McFormItem, McFormItem as default }