表单设计器中开发自定义组件流程

1. src\components\generator\config.js 中添加一个json
2. src\compontnes\目录下创建对应的组件
3. main.js中全局注册刚创建的组件
4. src\views\index\RightPanel.vue 中绑定第一步中json中添加的各个属性值

详细步骤

步骤一： src\components\generator\config.js 中添加一个json

export const layoutComponents = [
    {
        __config__: {
          label: '自定义按钮',
          showLabel: false,
          changeTag: true,
          labelWidth: null,
          tag: 'wsButton',
          tagIcon: 'button',
          span: 24,
          layout: 'colFormItem',
        },
        __slot__: {
          default: '分享按钮111'
        },
        style: {
          width: 'auto',
          height: '35px',
          margin: '20px',
          borderRadius: '30px',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#FFF',
          backgroundColor: '#409EFF',
          borderColor: '#409EFF'
        },
        dataName: '测试分享按钮',
        type: 'primary',
        icon: '',
        round: false,
        size: 'normal',
        site: 'center', // 按钮位置 左:flex-start 中:cneter 右:flex-end
        plain: false,
        circle: false,
        disabled: false,
        funcType: 'share'
    }
]

注意点：

a. 在 __config__ 中的tag属性要注意和注册组件名称一致， render时候会拿这个tag去渲染

步骤二： src\compontnes\目录下创建对应的组件

eg: wsButton组件
    <template>
    ** 这里 ref一定要加 **
      <div ref="wsButton" class="wsButton" @click="handleShare">
        <div v-text="shareText"> 去分享 </div>
      </div>
    </template>
    
    <script>
    import { EventBus } from '@/utils/bus.js'
    import resetpx from '@/mixins/resetpx.js'
    export default {
      name: 'WsButton',
      data () {
        return {}
      },
      mixins: [resetpx], // 用来转化px为vw
      computed: {
        shareText () {
          return this.$attrs.dataName
        }
      },
      methods: {
        handleShare () {
          EventBus.$emit('openShare', 'wsButton')
        }
      }
    }
    </script>

注意点：

a. 通过监听$attrs可以拿到元素上的自定义属性值和style等;
b. 组件最后要复制到另一个渲染的项目里，复制过去之后要加上 resetpx 这个混入把元素的px转换为vw;
c. 组件可以用vant提供的或者自定义组件，但是不能用element-ui的一些组件；
d. 组件的最外层一定要加上 ref="组件名称"

步骤三： main.js中全局注册刚创建的组件

    import Vue from 'vue'
    import wsButton from '@/components/wsButton/index.vue'
    Vue.component('wsButton', wsButton)

步骤四： src\views\index\RightPanel.vue 中绑定第一步中json中添加的各个属性值

    <el-form-item
        v-if="activeData.__config__.tag === 'wsButton'"
        label="按钮标题"
      >
        <el-input
          v-model="activeData.dataName"
          placeholder="请输入按钮标题"
          @input="changeRenderKey"
        />
    </el-form-item>

表单设计器嵌入后台系统的数据交互

表单系统通过iframe的形式嵌入到后台管理系统中，通过postMessage进行数据交互

1. 表单设计系统发送数据给后台管理系统

    <!--表单设计系统发送数据-->
    saveData() {
      const formConfData = {
        fields: deepClone(this.drawingList),
        ...this.formConf
      }
      window.parent.postMessage({
        source: 'formGenerator',
        data: formConfData
      }, '*')
    },
    
    <!-- 后台管理系统接收数据 -->
    mounted () {
        window.addEventListener('message', event => {
          if (event.data.source === 'formGenerator') {
            let formData = event.data.data
            this.fromConfData = formData
            localStorage.setItem('fromConfData', JSON.stringify(this.fromConfData))
          }
        }, '*')
    },

2. 后台管理系统发送数据给表单设计系统

    <!-- 后台管理系统发送数据 -->
    openPreView () {
      let formData = localStorage.getItem('fromConfData')
      let child = this.$refs.child.contentWindow
      child.postMessage({
        source: 'formGenerator',
        data: formData
      }, '*');
    }
    
    <!-- 表单设计系统接收数据 -->
    mounted () {
        window.addEventListener('message', event => {
            console.log('后台系统发送的数据===', event)
        })
    }
    

渲染部分系统引入组件流程

设计器开发完组件后要把组件复制、注册到渲染系统中

具体步骤：

1. 将组件复制到 src/components 目录下
2. main.js中全局注册

    import wsButton from './components/wsButton'

    Vue.component('wsButton', wsButton)

3. 在utils/global.js 中添加下组件的名称

这里添加是为了下一步中的px转化vw

    const allComponends = [
      'wsText',
      'wsButton',
      'wsImage' // 这里添加
    ]
    
    export {
      allComponends
    }

4. 在组件的 mixins 中引入 resetpx 方法进行px单位的转换

    <script>
        import resetpx from '@/mixins/resetpx.js'
        export default {
          name: 'WsButton',
          data () {
            return {}
          },
          mixins: [resetpx] // 重置元素style里的px为vw
        }
    </script>

参考资料：

form-generator官方文档：点这里 => link