前端低代码form-generator实现及新增自定义组件详解

//第一步：在/form-generator/src/components/generator/config.js里面加入组件json
{
    __config__: {
      label: '自定义按钮',
      showLabel: false,
      changeTag: true,
      labelWidth: null,
      tag: 'customButton',
      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'
}

//第二步：在components里面写自己的组件 
//如：/form-generator/src/components/customButton/index.vue

<template>
  <div ref="customButton" class="customButton" @click="handleShare">
    <div v-text="btnText"></div>
  </div>
</template>
    
<script>
export default {
  name: "customButton",
  data() {
    return {};
  },
  computed: {
    btnText() {
      return this.$attrs.dataName;
    },
  },
  methods: {
    handleShare() {
      this.$emit("openShare", "customButton");
    },
  },
};
</script>

//第三步：在/form-generator/src/views/index/main.js里面引入我们的自定义组件
import customButton from '@/components/customButton/index.vue'
Vue.component('customButton', customButton)

//第四步：在/form-generator/src/views/index/RightPanel.vue里面写上想要配置的属性值
<el-form-item v-if="activeData.__config__.tag === 'customButton'" label="按钮标题">
     <el-input v-model="activeData.dataName" placeholder="请输入按钮标题" @input="changeRenderKey"
     />
</el-form-item>