使用

快堆生成平台使用声明

此平台基于vue3和vantUI开发的在使用此组件请确保引入该组件

npm安装方式

npm install -s  json-to-formui

全局导入方式

import { createApp } from 'vue'
import JsonForm from "json-to-formui"
const app = createApp(App)
app.use(JsonForm)

CDN安装方式(创作平台可直接下载)

<script src="https://www.swapinfo.cn/addons/jsontoform/lib/vue@next.js"></script>
<script src="https://www.swapinfo.cn/addons/jsontoform/lib/vant.min.js"></script>
<link rel="stylesheet" href="https://www.swapinfo.cn/addons/jsontoform/lib/index.css" />
<link rel="stylesheet" href="https://www.swapinfo.cn/addons/jsontoform/ydyl.css" />
<script src="https://www.swapinfo.cn/addons/jsontoform/ydyl.umd.js"></script>

app.use(ydyl.JsonForm);
app.mount('#app');

基础用法

选项配置

jsonForm组件通过list属性配置选项数据，list属性是一个对象的数组；emit所有事件的回调

 <json-form 
 :list="list"  
 @emit="print" 
 ></json-form>

export default {
    data() {
        return {
            list: [
                    {
                    type: "title",
                    name: "国家及地区",
                    prop: {
                        value: "",
                        name: "",
                    },
                    icon: "notes-o",
                    state: "",
                    openSet: 0,
                    },
                    {
                    type: "picker",
                    name: "国家及地区",
                    exhibitionType: "line",
                    mustFill: true,
                    rules: [],
                    events: {},
                    prop: {
                        name: "",
                        value: "",
                        placeholder: "",
                    },
                    ext: {
                        columns: [],
                    },
                    msgs: {
                        className: "class-msg",
                        msg: "",
                    },
                    }
                    
                ],
        }
    },
  methods: {
    print(param) {
        //param包含三个参数，event触发事件类型，index当前list的下标，item当前对象
    },
  },
}

文件上传用法

选项upload-fun当文件被选中时触发，upload-fun属性是一个函数

 <json-form 
 :list="list"  
 @emit="print"
:upload-fun="uploadFun"
 ></json-form>

export default {
    data() {
        return {
            list: [
                     {
                    type: "uploader",
                    name: "文件上传",
                    exhibitionType: "row",
                    mustFill: false,
                    rules: [],
                    events: {
                    uploadDel:'xxxx'
                    },
                    prop: {
                        name: "upload",
                        value: [
                        { url: 'https://img.yzcdn.cn/vant/leaf.jpg',
                        status: 'done',
                        message: '上传中...',
                        },
                        // Uploader 根据文件后缀来判断是否为图片文件
                        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
                        //{ url: 'https://cloud-image', isImage: true },
                        ],
                        accept:'aplication/zip',
                        multiple:true,//是否多传
                        maxCount:3, //最大上传个数,
                        maxSize:"5 * 1024", //文件大小 
                    },
                    icon:'point-gift',
                    msgs: {
                        className: "class-msg",
                        msg: "",
                    },
                    }
                    
                ],
        }
    },
  methods: {
    print(param) {
        //param包含三个参数，event触发事件类型，index当前list的下标，item当前对象
    },
    async  uploadFun(file,index){
        //file对象，index当前list的下标
        //在这里写压缩，上传等逻辑
      return new Promise(resolve=>{
        let  res = [];
        for(let i=0;i< file.length;i++ ){
            let ress = {
              status:true,
              src:'https://img.yzcdn.cn/vant/leaf.jpg'
            };
            res.push(ress)
        }
        console.log(res)
          resolve(res)
       })
    }
  },
}

API

对外增加重置表单和获得表单数据的方法

 <json-form 
 :list="list"  
 @emit="print" 
 ref="sonRef"
 ></json-form>
 <div @click="reset()">重置表单</div>
 <div @click="getJson()">获得json表单</div>

export default defineComponent({
  name: "App",
  setup(props, context) {
    const sonRef = ref(null);
    const getJson = () => {
      let cc = sonRef.value.getform();
      console.log(cc);
    };
    const reset=()=>{
      sonRef.value.reset();
    }
    return { sonRef, getJson ,reset};
  }
})