npm i vform-builds

/ ******* 引入并全局注冊VForm組件  *******/
 
import Vue from 'vue'
import App from './App.vue'
 
import ElementUI from 'element-ui'  //引入element-ui庫
import VForm from 'vform-builds'  //引入VForm庫
 
import 'element-ui/lib/theme-chalk/index.css'  //引入element-ui樣式
import 'vform-builds/dist/VFormDesigner.css'  //引入VForm樣式
 
Vue.config.productionTip = false
 
Vue.use(ElementUI)  //全局注冊element-ui
Vue.use(VForm)  //全局注冊VForm(同時注冊了v-form-designer和v-form-render組件)
 
new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <v-form-designer></v-form-designer>
</template>
 
<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>
 
<style lang="scss">
body {
  margin: 0;  /* 如果頁面出現(xiàn)垂直滾動條，則加入此行CSS以消除之 */
}
</style>

<template>
  <div>
    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
    </v-form-render>
    <el-button type="primary" @click="submitForm">Submit</el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        formJson: {"widgetList":[],"formConfig":{"labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":""}},
        formData: {},
        optionData: {}
      }
    },
    methods: {
      submitForm() {
        this.$refs.vFormRef.getFormData().then(formData => {
          // Form Validation OK
          alert( JSON.stringify(formData) )
        }).catch(error => {
          // Form Validation failed
          this.$message.error(error)
        })
      }
    }
  }
</script>

// extension-schema.js ******* 新增圖片 字段
export const imageSchema = {
    type: 'image',
    icon: 'picture-upload-field',
    formItemFlag: true,
    options: {
        name: '',
        label: '',
        labelAlign: '',
        labelWidth: null,
        defaultValue: './sign.jpg',
        imageWidth: '100',
        imageHeight: '100',
        labelHidden: false,
        customClass: '',
    }
}

// extension-loader.js
 
// 首先引入圖片組件和圖片組件的定義的字段
import {imageSchema} from "@/extension/samples/extension-schema"
import ImageWidget from '@/extension/samples/image/image-widget'
 
......
 
 
 
 
// 然后在最后組件 ‘/* 字段組件加載完畢 end */' 之前 注冊我們寫好的圖片組件
 
/** 注冊自定義圖片組件 */
  addCustomWidgetSchema(imageSchema)  //加載組件 Json Schema
  Vue.component(ImageWidget.name, ImageWidget)  //注冊組件
 
  // 這段代碼的意思是  如果組件的字段中出現(xiàn) ‘imageWidth' 這個屬性的時候，那么需要
  // 加載 image-editor 這個屬性編輯組件
  // 這個組件怎么寫  我們下邊再說
  PERegister.registerCPEditor('imageWidth', 'image-editor',
      PEFactory.createInputTextEditor('imageWidth', 'extension.setting.imageWidth'))

// us js
export default {
  extension: {
    widgetLabel: {
      card: 'Card',
      alert: 'Alert',
      // 新增的字段  
      image: 'Image'
    },
    setting: {
      cardFolded: 'Folded',
      cardShowFold: 'Show Fold',
      cardWidth: 'Width Of Card',
      cardShadow: 'Shadow',
      alertTitle: 'Title',
      alertType: 'Type',
      description: 'Description',
      closable: 'Closable',
      closeText: 'Text On Close Btn',
      center: 'Center',
      showIcon: 'Show Icon',
      effect: 'Effect',
      // 新增的字段
      imageWidth: 'Width',
      imageHeight: 'Height'
    },
  }
}
// cn js 
export default {
  extension: {
    widgetLabel: {
      card: '卡片',
      alert: '提示',
      // 新增
      image: '圖片'
    },
    setting: {
      cardFolded: '是否收起',
      cardShowFold: '顯示折疊按鈕',
      cardWidth: '卡片寬度',
      cardShadow: '顯示陰影',
      alertTitle: '標(biāo)題',
      alertType: '類型',
      description: '輔助性文字',
      closable: '是否可關(guān)閉',
      closeText: '關(guān)閉按鈕文字',
      center: '文字居中',
      showIcon: '顯示圖標(biāo)',
      effect: '顯示效果',
      // 新增
      imageWidth: '寬度',
      imageHeight: '高度'
    },
  }
}
 

<template>
  <div>
    <!-- 圖片寬度編輯 -->
    <el-form-item :label="i18nt('designer.setting.imageWidth')">
      <el-input 
      type="text" 
      v-model="optionModel.imageWidth" 
      ></el-input>
    </el-form-item>
     <!-- 圖片高度編輯 -->
    <el-form-item :label="i18nt('designer.setting.imageHeight')">
      <el-input 
      type="text" 
      v-model="optionModel.imageHeight" 
      ></el-input>
    </el-form-item>
  </div>
</template>
 
<script>
  import i18n from "@/utils/i18n"
  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"  
  export default {
    name: "image-editor",
    mixins: [i18n, propertyMixin],
    props: {
      designer: Object,
      selectedWidget: Object,
      optionModel: Object,
    },
  }
</script>
 
<style scoped>
  .html-content-editor {
    font-size: 14px;
  }
</style>

npm run lib-render