tuoyuan-vue-json-schema

Install

npm install tuoyuan-vue-json-schema -S

Quick Start

import Vue from "vue"
import VueJsonSchema from "tuoyuan-vue-json-schema"

Vue.use(VueJsonSchema)

<template>
  <div class="page">
    <el-card class="left">
      <pre>{{ schema }}</pre>
      <div>
        <el-button @click="handleOpenForm">生成表单</el-button>
      </div>
    </el-card>
    <el-card class="right">
      <json-schema-editor v-model="schema" @input="schemaChange" />
    </el-card>

    <el-dialog title="表单预览" :visible.sync="formVisible" width="800px">
      <json-schema-form
        v-if="formVisible"
        :schema="schema"
        :defaultValue="defaultValue"
        @onSubmit="onSubmit"
        @onCancel="formVisible = false"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultValue: {},
      schema: {
        type: 'object',
        title: '这是一个表单',
        description: '这是表单的描述',
        properties: {},
        $schema: 'http://json-schema.org/draft-07/schema#',
      },
      formVisible: false,
    };
  },
  methods: {
    schemaChange(data) {
      console.log(data)
    },
    handleOpenForm() {
      this.formVisible = true
    },
    onSubmit(form) {
      console.log(JSON.stringify(form))
      console.log(form)
    },
  },
};
</script>
<style lang="less">
.page {
  height: 100%;
  padding: 12px;
  display: grid;
  grid-template-columns: 350px 1fr;
  column-gap: 12px;

  .left,
  .right {
    height: 100%;
    overflow: auto;
    /deep/ .el-card__body {
      padding: 8px;
      height: 100%;
      overflow: auto;
      position: relative;
    }
  }
  .left /deep/ .el-card__body {
    display: grid;
    grid-template-rows: 1fr 50px;
    overflow: hidden;
    .json-view {
      overflow: auto;
    }
  }
}
</style>