console 命令行工具 X clear

console

Vue.createApp({
    setup() {
        return {
            model: {
                text1: '',
                num: 2
            },
            fields: [{
                component: 'a-form',
                props: { model: '$:model', labelCol: { span: 4 } },
                children: [{
                    component: 'a-input',
                    value: 'model.text1',
                    formProps: {
                        label: 'input1',
                        name: 'text1',
                        rules: [{ required: true, trigger: 'blur' }]
                    }
                }, {
                    component: 'a-input-number',
                    numberValue: 'model.num',
                    formProps: {
                        label: 'num',
                        name: 'num',
                        rules: [{
                            type: 'number', required: true, trigger: 'blur'
                        }, {
                            type: 'number', min: 5, trigger: 'blur'
                        }]
                    }
                }]
            }, {
                component: 'p',
                text: '$:JSON.stringify(model)'
            }]
        }
    },
    methods: {
        onSetup({ prerender }) {
            // antd 的数字输入处理
            prerender(() => (field, next) => {
                if (field.numberValue == undefined) {
                    next(field)
                    return
                }

                if (typeof field.numberValue !== 'string' || field.numberValue.length <= 0) {
                    next(field)
                    return
                }

                const valueDefine = {
                    $type: 'computed',
                    $result: field.numberValue,
                }

                const updateDefine = {
                    $type: 'method',
                    $context: field.numberValue,
                    $result: 'arguments[0]',
                }

                field.props = field.props || {}
                field.props.value = valueDefine
                field.props.onChange = updateDefine

                next(field)
            })

            // 在组件外部套一个 el-form-item
            prerender(({ proxy, context }) => (field, next) => {
                if (!field.formProps) {
                    next(field)
                    return
                }

                const formProps = field.formProps

                delete field.formProps

                next(proxy.inject(
                    {
                        component: 'a-form-item',
                        props: formProps,
                        children: [field]
                    },
                    context
                ))
            }, 2)
        }
    }
})
    .use(antd)
    .use(JRenderFull)
    .mount('#app')

<html>

<head>
	<title>Json to render</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@next/dist/vue.global.prod.js">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@next/dist/antd.min.js">
	</script>
	<!-- <script src="https://cdn.jsdelivr.net/npm/@ant-design/icons-vue">
	</script> -->
	<script src="https://cdn.jsdelivr.net/npm/@json2render/vue-full">
	</script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@next/dist/antd.min.css">
</head>

<body>
	<div id="app">
		<v-jrender v-model="model" :fields="fields" @setup="onSetup"></v-jrender>
	</div>
</body>

</html>