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

vue3-js版组件库

import { ref, provide } from 'vue'
const Form = {
    name: 'McForm',
    props: {
        data: [Object, null],
        rules: [Object, null],
        labelWidth: [String, Number],
        keyName: String,
        required: Boolean
    },
    emits: ['click', 'update:data'],
    setup(props, { emit, slots, expose }) {

        const errorMessageCollect = ref({})
        const _labelWidth = ref(Number(props.labelWidth))

        const validating = (key, value, trigger) => {
            return new Promise((resolve) => {
                const rule = props.rules && props.rules[key]
                if (rule) {
                    const _valid = rule.validator || new Function()
                    const _trigger = rule.trigger
                    if (_trigger.includes(trigger)) {
                        _valid(value, (err) => {
                            if (err) {
                                errorMessageCollect.value[key] = err.message
                                resolve(false)
                            } else {
                                errorMessageCollect.value[key] = ''
                                resolve(true)
                            }
                        }, props.data)
                    } else {
                        resolve(false)
                    }
                } else {
                    resolve(false)
                }
            })
        }

        const check = async (cb) => {
            const arr = []
            for (const key in props.rules) {
                const _r = props.rules[key]
                const _t = Array.isArray(_r.trigger) ? _r.trigger[0] : _r.trigger
                const _val = props.data[key]
                const _res = await validating(key, _val, _t)
                arr.push(_res)
            }
            const result = await arr.every(n => n)
            cb && cb(result)
            return result
        }

        const checkField = async (fieldname, cb) => {
            const fieldRule = props.rules[fieldname]
            if(fieldRule){
                const trigger = Array.isArray(fieldRule.trigger)? fieldRule.trigger[0] : fieldRule.trigger
                const _val = props.data[fieldname]
                const _res = await validating(fieldname, _val, trigger)
                cb && cb(_res)
            }
        }

        const resetHint = () => {
            errorMessageCollect.value = {}
            emit('update:data', {})
        }

        provide('labelWidth', _labelWidth)
        provide('errorMessageCollect', errorMessageCollect)
        provide('validating', validating)

        expose({
            check,
            checkField,
            resetHint,
        })

        return () => (
            <div class="mc-form">
                {
                    slots.default ? slots.default() : ''
                }
            </div>
        )
    }
}

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

const McForm = Form

export { McForm, McForm as default }