Closed zhangluJs closed 1 year ago
我尝试在自己的demo中运行 /components/parser/example/index.vue 相关代码,但是无法绑定表单中的值,相关事件也无法触发。 和源码一样,只是部分文件路径有调整。不知道问题出在了哪里
render.js
import { deepClone } from '../utils/index' const componentChild = {} /** * 将./slots中的文件挂载到对象componentChild上 * 文件名为key,对应JSON配置中的__config__.tag * 文件内容为value,解析JSON配置中的__slot__ */ const slotsFiles = require.context('./slots', false, /\.js$/) const keys = slotsFiles.keys() || [] keys.forEach(key => { const tag = key.replace(/^\.\/(.*)\.\w+$/, '$1') const value = slotsFiles(key).default componentChild[tag] = value }) function vModel(dataObject, defaultValue, conf) { dataObject.props.value = this.formData ? this.formData[conf.__vModel__] : defaultValue dataObject.on.input = val => { this.$emit('input', val) } } function mountSlotFiles(h, confClone, children) { const childObjs = componentChild[confClone.__config__.tag] if (childObjs) { Object.keys(childObjs).forEach(key => { const childFunc = childObjs[key] if (confClone.__slot__ && confClone.__slot__[key]) { children.push(childFunc(h, confClone, key)) } }) } } function emitEvents(confClone) { ['on', 'nativeOn'].forEach(attr => { const eventKeyList = Object.keys(confClone[attr] || {}) eventKeyList.forEach(key => { const val = confClone[attr][key] if (typeof val === 'string') { confClone[attr][key] = event => this.$emit(val, event) } }) }) } function buildDataObject(confClone, dataObject) { Object.keys(confClone).forEach(key => { const val = confClone[key] if (key === '__vModel__') { vModel.call(this, dataObject, confClone.__config__.defaultValue, confClone) } else if (dataObject[key] !== undefined) { if (dataObject[key] === null || dataObject[key] instanceof RegExp || ['boolean', 'string', 'number', 'function'].includes(typeof dataObject[key])) { dataObject[key] = val } else if (Array.isArray(dataObject[key])) { dataObject[key] = [...dataObject[key], ...val] } else { dataObject[key] = { ...dataObject[key], ...val } } } else { dataObject.attrs[key] = val } }) // 清理属性 clearAttrs(dataObject) } function clearAttrs(dataObject) { delete dataObject.attrs.__config__ delete dataObject.attrs.__slot__ delete dataObject.attrs.__methods__ } function makeDataObject() { // 深入数据对象: // https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1 return { class: {}, attrs: {}, props: {}, domProps: {}, nativeOn: {}, on: {}, style: {}, directives: [], scopedSlots: {}, slot: null, key: null, ref: null, refInFor: true } } export default { props: { conf: { type: Object, required: true }, formData: { type: Object } }, render(h) { const dataObject = makeDataObject() const confClone = deepClone(this.conf) const children = this.$slots.default || [] // 如果slots文件夹存在与当前tag同名的文件,则执行文件中的代码 mountSlotFiles.call(this, h, confClone, children) // 将字符串类型的事件,发送为消息 emitEvents.call(this, confClone) // 将json表单配置转化为vue render可以识别的 “数据对象(dataObject)” buildDataObject.call(this, confClone, dataObject) return h(this.conf.__config__.tag, dataObject, children) } }
Parser.vue
import { deepClone } from './utils/index'; import render from './render/render.js'; const ruleTrigger = { 'el-input': 'blur', 'el-input-number': 'blur', 'el-select': 'change', 'el-radio-group': 'change', 'el-checkbox-group': 'change', 'el-cascader': 'change', 'el-time-picker': 'change', 'el-date-picker': 'change', 'el-rate': 'change' } const layouts = { colFormItem(h, scheme) { const config = scheme.__config__ const listeners = buildListeners.call(this, scheme) let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null if (config.showLabel === false) labelWidth = '0' return ( <el-col span={config.span}> <el-form-item label-width={labelWidth} prop={scheme.__vModel__} label={config.showLabel ? config.label : ''}> <render conf={scheme} on={listeners} formData={this[this.formConf.formModel]}/> </el-form-item> </el-col> ) }, rowFormItem(h, scheme) { let child = renderChildren.apply(this, arguments) if (scheme.type === 'flex') { child = <el-row type={scheme.type} justify={scheme.justify} align={scheme.align}> {child} </el-row> } return ( <el-col span={scheme.span}> <el-row gutter={scheme.gutter}> {child} </el-row> </el-col> ) } } function renderFrom(h) { const { formConfCopy } = this return ( <el-row gutter={formConfCopy.gutter}> <el-form size={formConfCopy.size} label-position={formConfCopy.labelPosition} disabled={formConfCopy.disabled} label-width={`${formConfCopy.labelWidth}px`} ref={formConfCopy.formRef} // model不能直接赋值 https://github.com/vuejs/jsx/issues/49#issuecomment-472013664 props={{ model: this[formConfCopy.formModel] }} rules={this[formConfCopy.formRules]} > {renderFormItem.call(this, h, formConfCopy.fields)} {formConfCopy.formBtns && formBtns.call(this, h)} </el-form> </el-row> ) } function formBtns(h) { return <el-col> <el-form-item size="large"> <el-button type="primary" onClick={this.submitForm}>提交</el-button> <el-button onClick={this.resetForm}>重置</el-button> </el-form-item> </el-col> } function renderFormItem(h, elementList) { return elementList.map(scheme => { const config = scheme.__config__ const layout = layouts[config.layout] if (layout) { return layout.call(this, h, scheme) } throw new Error(`没有与${config.layout}匹配的layout`) }) } function renderChildren(h, scheme) { const config = scheme.__config__ if (!Array.isArray(config.children)) return null return renderFormItem.call(this, h, config.children) } function setValue(event, config, scheme) { console.log(event, config, scheme, 'this is setValue'); this.$set(config, 'defaultValue', event) this.$set(this[this.formConf.formModel], scheme.__vModel__, event) } function buildListeners(scheme) { const config = scheme.__config__ const methods = this.formConf.__methods__ || {} const listeners = {} // 给__methods__中的方法绑定this和event Object.keys(methods).forEach(key => { console.log(key); listeners[key] = event => methods[key].call(this, event) }) // 响应 render.js 中的 vModel $emit('input', val) listeners.input = event => setValue.call(this, event, config, scheme) return listeners } export default { name: 'Parse', components: { render }, props: { formConf: { type: Object, required: true } }, data() { const data = { formConfCopy: deepClone(this.formConf), [this.formConf.formModel]: {}, [this.formConf.formRules]: {} } this.initFormData(data.formConfCopy.fields, data[this.formConf.formModel]) this.buildRules(data.formConfCopy.fields, data[this.formConf.formRules]) return data }, methods: { initFormData(componentList, formData) { componentList.forEach(cur => { const config = cur.__config__ if (cur.__vModel__) formData[cur.__vModel__] = config.defaultValue if (config.children) this.initFormData(config.children, formData) }) }, buildRules(componentList, rules) { componentList.forEach(cur => { const config = cur.__config__ if (Array.isArray(config.regList)) { if (config.required) { const required = { required: config.required, message: cur.placeholder } if (Array.isArray(config.defaultValue)) { required.type = 'array' required.message = `请至少选择一个${config.label}` } required.message === undefined && (required.message = `${config.label}不能为空`) config.regList.push(required) } rules[cur.__vModel__] = config.regList.map(item => { item.pattern && (item.pattern = eval(item.pattern)) item.trigger = ruleTrigger && ruleTrigger[config.tag] return item }) } if (config.children) this.buildRules(config.children, rules) }) }, resetForm() { this.formConfCopy = deepClone(this.formConf) this.$refs[this.formConf.formRef].resetFields() }, submitForm() { this.$refs[this.formConf.formRef].validate(valid => { if (!valid) return false // 触发sumit事件 this.$emit('submit', this[this.formConf.formModel]) return true }) } }, render(h) { return renderFrom.call(this, h) } }
@zhangluJs 大佬,这个问题咋解决的?
我尝试在自己的demo中运行 /components/parser/example/index.vue 相关代码,但是无法绑定表单中的值,相关事件也无法触发。 和源码一样,只是部分文件路径有调整。不知道问题出在了哪里
render.js
Parser.vue