vue-codemirror 和 jsonlint-mod实现 form-create-designer的导入导出JSO_前端框架_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

vue-codemirror 和 jsonlint-mod实现 form-create-designer的导入导出JSO

来源：我爱模板网作者：类型：图文教程点击次数：发布时间：2021-07-05 14:21:01

form-create-designer很完美，但是后台需要表单生成后的JSON和配置的JSON数据，form-create-designer本身提供的API，结合vue-codemirror 和 jsonlint-mod就能实现预览、导入导出了，效果如下：

使用方法：
1、下载插件

1# vue-codemirror
2npm install vue-codemirror --save
3# JSON校验器插件
4npm install jsonlint-mod --save

2、在main.js引入vue-codemirror

`1`	`import VueCodemirror from` `'vue-codemirror'`

`2`	`Vue.use(VueCodemirror)`

3、在使用form-create-designer的页面引入相关css和js

1import jsonlint from 'jsonlint-mod';
2import 'codemirror/addon/lint/lint'
3import 'codemirror/addon/lint/json-lint'
4import 'codemirror/lib/codemirror.css'
5import 'codemirror/addon/lint/lint.css'
6import 'codemirror/addon/edit/matchbrackets.js'
7import 'codemirror/mode/javascript/javascript.js'

4、HTML代码

01<template>
02  <div class="form-container">
03    <el-row>
04      <el-button icon="el-icon-download" type="primary" size="small" round @click="handleDownloadRule()">生成表单JSON</el-button>
05      <el-button icon="el-icon-upload2" type="success" size="small" round @click="handleUploadRule()">导入表单JSON</el-button>
06      <el-button icon="el-icon-download" type="primary" size="small" round @click="handleDownloadOption()">生成表单配置</el-button>
07      <el-button icon="el-icon-upload2" type="success" size="small" round @click="handleUploadOption()">导入表单配置</el-button>
08    </el-row>
09 
10    <!--form-create-designer-->
11    <fc-designer ref="designer" />
12 
13    <!--代码预览-->
14    <el-dialog :title="dialogTitle" :visible.sync="dialogState" :close-on-click-modal="false" append-to-body>
15      <!--vue-codemirror-->
16      <codemirror v-model="codemirrorContent" :options="codemirrorOptions" style="height: 90%;text-align: left;border: 1px solid #ccc;" />
17      <el-row v-if="dialogMenu">
18        <el-button @click="dialogState = false">取 消</el-button>
19        <el-button type="primary" @click="handleImport()">导 入</el-button>
20      </el-row>
21    </el-dialog>
22  </div>
23</template>

5、js关键代码：

01export default {
02    beforeCreate() {
03        // 开启JSON校验
04        window.jsonlint = jsonlint
05    },
06    data() {
07        return {
08            dialogTitle: '', // 对话框标题
09            dialogState: false, // 对话框状态
10            dialogMenu: false, // 对话框菜单状态
11             
12            // codemirror配置
13            codemirrorOptions: {
14                mode: "application/json",
15                theme: "default",
16                gutters: ['CodeMirror-lint-markers'],
17                tabSize: 2,
18                lint: true,
19                line: true,
20                lineNumbers: true,
21                matchBrackets: true,
22                lineWrapping: true,
23                styleActiveLine: true,
24                readOnly: false
25            },
26            // codemirror内容
27            codemirrorContent: null
28        }
29    },
30    components: {
31        codemirror
32    },
33    methods: {
34        // 导出表单JSON
35        handleDownloadRule(){
36            this.dialogTitle = "表单规则"
37            this.dialogState = true
38            this.dialogMenu = false
39 
40            this.codemirrorOptions.readOnly = true
41            this.codemirrorContent = JSON.stringify(this.$refs.designer.getRule(),
42                                                    null, 2)
43        },
44        // 导出表单配置
45        handleDownloadOption(){
46            this.dialogTitle = "表单配置"
47            this.dialogState = true
48            this.dialogMenu = false
49 
50            this.codemirrorOptions.readOnly = true
51            this.codemirrorContent = JSON.stringify(this.$refs.designer.getOption(),
52                                                    null, 2)
53        },
54        // 导入表单JSON
55        handleUploadRule(){
56            this.dialogTitle = "导入表单规则"
57            this.dialogState = true
58            this.dialogMenu = true
59 
60            this.codemirrorOptions.readOnly = false
61            this.codemirrorContent = JSON.stringify([], null, 2)
62        },
63        // 导入表单配置
64        handleUploadOption(){
65            this.dialogTitle = "导入表单配置"
66            this.dialogState = true
67            this.dialogMenu = true
68 
69            this.codemirrorOptions.readOnly = false
70            this.codemirrorContent = JSON.stringify({}, null, 2)
71        },
72        // 配置导入
73        handleImport(){
74            try {
75                let content = JSON.parse(this.codemirrorContent)
76                if(this.dialogTitle == "导入表单规则"){
77                    this.$refs.designer.setRule(content)
78                }
79                if(this.dialogTitle == "导入表单配置"){
80                    this.$refs.designer.setOptions(content)
81                }
82                this.dialogState = false
83            } catch(e) {
84                alert('输入内容格式有误!')
85            }
86        }
87    }
88}