Vue JSON Schema Form 自定义Widget

Vue JSON Schema Form：一个根据JSON Schema数据生成表单的插件。

项目技术栈是Vue3+ TS + ElementPlus，因此我选择它的合适的版本 @lljj/vue3-form-element

安装插件

npm install @lljj/vue3-form-element

在main.ts中全局注册

import { createApp } from 'vue'
import VueForm from '@lljj/vue3-form-element'
import App from './App.vue'

const app = createApp(App)
app.component('VueForm', VueForm)
app.mount('#app')

在开发中，发现VJSF的upload组件不符合需求，所以就需要自定义upload组件。

自定义Widget（upload-image）

自定义widget组件实现 v-model 来实现同步值到formData，ui:xxx 配置会以 props 的形式传递给自定义的widget。

<div :class="uploadUrl ? 'image' : ''">
   <div class="image-delete">
       <el-icon v-if="uploadUrl" class="closeIcon" @click="removeImage">
         <Close />
       </el-icon>
   </div>
   <el-image v-if="uploadUrl" :src="uploadUrl" fit="cover" :preview-src-list="[uploadUrl]" />
   <el-upload v-else action="#" accept="image/*" class="upload" :show-file-list="false" :before-upload="beforeUpload">
     <el-icon class="upload-icon">
       <Plus />
     </el-icon>
   </el-upload>
</div>

// 我把认为重要的方法贴出来，供大家参考
const emit = defineEmits(['update:modelValue']);
// -------图片上传之前的回调-------
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
  //要求:上传文件格式png|jpg|gif 4M
  if (rawFile.type.includes('image')) {
    if (rawFile.size / 1024 / 1024 < 4) {
      toUploadFile(rawFile);
    } else {
      ElMessage.error('上传文件大小小于4M')
      return false;
    }
  } else {
    ElMessage.error("上传文件格式务必为图片")
    return false;
  }
  return false; // 手动上传
}
//---------上传图片----------
const toUploadFile = (rawFile: File) => {
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '上传中...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  const formData = new FormData();
  formData.append('file', rawFile);
  uploadFile(formData).then(res => {
    ElMessage.success('上传成功')
    uploadUrl.value = res.data.url;
    emit('update:modelValue', uploadUrl.value);
  }).catch(() => {
    ElMessage.error('上传失败')
  }).finally(() => {
    loadingInstance.close()
  })
}
// --------删除图片---------
const removeImage = () => {
  uploadUrl.value = '';
  emit('update:modelValue', uploadUrl.value);
}

当上传图片的url发生改变时，需要更新modelValue的值。这个很重要。

使用

<vue-form v-model="formData" :schema="schemaInfo" ></vue-form>

import uploadImage from '@/components/uploadImage.vue'
const schemaInfo = ref({
	type: object,
	properties:{
		"uploadImage": {
            "type": "string",
            "title": "图片",
            "ui:widget": uploadImage
          },
	}
})

最后，贴上Vue JSON Schema Form的官方文档，有需要可自行去查阅。