form-generator 添加自定义的.vue 组件（一）

在表单设计器中如何添加自己的自定义表单组件

1.新建你的.vue 组件

<template>
  <div :class="conf.size" class="input-group">
    <div v-if="conf.__slot__.prepend" class="input-group-prepend" >
      <span class="input-group-text">{{conf.__slot__.prepend}}</span>
    </div>
    <input v-model="input_val" :maxlength="conf.maxlength" :placeholder="conf.placeholder" :readonly="conf.readonly" :disabled="conf.disabled||disabled?true:false" :type="conf.type==='password'?'password':'text'"  class="form-control">
    <div v-if="conf.__slot__.append" class="input-group-append" >
      <span class="input-group-text">{{conf.__slot__.append}}</span>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    value: {
      default:''
    },
    conf: {
      type: Object
    },
    disabled: {}
  },
  data() {
    return {
      input_val: this.value,
      inp_size:this.conf.size
    }
  },
  computed: {},
  watch: {
    input_val(val) {
      this.$emit('input', val)
    },
    value(val) {
      this.input_val = val
    }
  },
  mounted() {
  },
  methods: {}
}
</script>

2.在generator/config.js 中添加自定义组件的相关配置，这样你的自定义组件才会在左侧的工具栏中显示出来。

48.png

45.png

3.在render.js中注册自定义组件

import htitle from './aritical/htitle.vue'   // 引入自定义组件
import ptext from './aritical/ptext.vue'
import mediaImg from './aritical/media_img.vue'

/**********************************************/
export default {
  components: {
    htitle,        // 注册组件
    ptext,
    mediaImg
  },
  props: {
    conf: {
      type: Object,
      required: true
    }
  },
  render(h) {
    const dataObject = makeDataObject()
    const confClone = deepClone(this.conf)
    const children = []

    // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码
    mountSlotFlies.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)
  }
}

4.向自定义组件传参和自定义组件返回输入的数据

自定义组件会经常需要用到config 中的配置，可以通过props 传入到自定义组件中。

<script>
// 自定义组件接受props 参数
export default {
  components: {},
  props: {
    value: {
      default:''
    },
    conf: {       // 组件的config 配置
      type: Object
    },
    disabled: {}
  },
  data() {
    return {
      input_val: this.value,
      inp_size:this.conf.size
    }
  },
  computed: {},
  watch: {
    input_val(val) {
      this.$emit('input', val)   // 向父级组件返回输入的数据
    },
    value(val) {
      this.input_val = val
    }
  },
  mounted() {
  },
  methods: {}
}
</script>

在render.js 中添加需要传给子组件的参数。

// buildDataObject() 方法
 Object.keys(confClone).forEach(key => {
    const val = confClone[key]
    if (key === '__vModel__') {
      vModel.call(this, dataObject, confClone.__config__.defaultValue)
    } else if (dataObject[key]) {
      dataObject[key] = { ...dataObject[key], ...val }
    } else {
      dataObject.attrs[key] = val
    }
  })
// 添加额外的自定义的参数传给子组件
  //在prop 中传入当前组件所有的config 配置
  dataObject.props.conf = confClone
  // 清理属性
  clearAttrs(dataObject)

子组件向父组件传参

this.$emit('input', val)   // 向父级组件返回输入的数据

以parser 页面为例,父组件parser 会在buildListeners() 方法中响应子组件传过来的数据

function buildListeners(scheme) {
  const config = scheme.__config__
  const methods = this.formConf.__methods__ || {}
  const listeners = {}

  // 给__methods__中的方法绑定this和event
  Object.keys(methods).forEach(key => {
    listeners[key] = event => methods[key].call(this, event)
  })
  // 响应 render.js 中的 vModel $emit('input', val)
  listeners.input = event => setValue.call(this, event, config, scheme)
  // 响应 render.js 中的 vModel $emit('input', val)
  listeners.uploadError = event => setupload.call(this, event, config, scheme)

  return listeners
}