1.2.14 • Published 2 years ago
tuoyuan-vue-json-schema v1.2.14
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>
1.2.8
2 years ago
1.2.7
2 years ago
1.2.12
2 years ago
1.2.13
2 years ago
1.2.10
2 years ago
1.2.11
2 years ago
1.2.14
2 years ago
1.2.9
2 years ago
1.2.6
2 years ago
1.2.5
2 years ago
1.2.4
2 years ago
1.2.3
2 years ago
1.1.29
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.1.30
2 years ago
1.1.34
2 years ago
1.1.33
2 years ago
1.1.32
2 years ago
1.1.31
2 years ago
1.1.35
2 years ago
1.1.28
2 years ago
1.1.27
2 years ago
1.1.26
2 years ago
1.1.23
3 years ago
1.1.25
3 years ago
1.1.24
3 years ago
1.1.19
3 years ago
1.1.18
3 years ago
1.1.17
3 years ago
1.1.22
3 years ago
1.1.21
3 years ago
1.1.20
3 years ago
1.1.16
3 years ago
1.1.15
3 years ago
1.1.9
3 years ago
1.1.8
3 years ago
1.1.7
3 years ago
1.1.6
3 years ago
1.1.11
3 years ago
1.1.14
3 years ago
1.1.13
3 years ago
1.1.5
3 years ago
1.1.4
3 years ago
1.1.3
3 years ago
1.1.2
3 years ago
1.1.1
3 years ago