2021-01-02发表2023-09-17更新8 分钟读完 (大约1170个字)0次访问

【Vue】JSON编辑器Bin-Coder

InterviewCoder

# 【Vue】JSON 编辑器 Bin-Coder

# 1 安装

# 1.1 CDN 安装

<!-- import Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/bin-code-editor@0.1.0/lib/styles/index.css">
<!-- import bin-code-editor -->
<script src="https://unpkg.com/bin-code-editor@0.1.0/lib/bin-code-editor.min.js"></script>

@0.1.0 表示版本号，我们建议锁定版本号来保证代码的稳定性

# 1.2 npm 安装

推荐使用 npm 安装，它能更好地和 webpack 打包工具配合使用。而且可以更好的和 es6 配合使用。并且支持按需引入

1
2
3

npm i bin-code-editor -S
# or 
yarn add bin-code-editor

# 2 引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import CodeEditor from 'bin-code-editor';
import 'bin-code-editor/lib/style/index.css';
import App from './App.vue';

Vue.use(CodeEditor);

new Vue({
  el: '#app',
  render: h => h(App)
});

# 3 用法

注意，初始化如果有数据，则会默认格式化一次，格式化快捷键默认为 F7, 使用时可以进行格式化结构！

1 2	JSON.stringify(JSON.parse(jsonData),null,2)`可以将默认json进行预格式化,也可以手动触发formatCode()来格式化 `JSON.stringify(value[, replacer[, space]])

参数说明：

value: 必需，要转换的 JavaScript 值（通常为对象或数组）。
replacer: 可选。用于转换结果的函数或数组。如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：“”。如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
space: 可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

在这里插入图片描述

<template>
<div>
  <b-code-editor v-model="jsonStr" :indent-unit="4" height="auto"/>
</div>
</template>
<script>
  const jsonData = `{"title":"测试json数据","children":[{"name":"子项名称", "desc":"子项说明" },{"name":"子项名称1", "desc":"子项说明1" }]}`

  export default {
    data() {
      return {
        jsonStr: jsonData
      }
    }
  }
</script>

# 4 其他配置项

参数	说明	类型	可选值	默认值
value	绑定数据，可用 v-model	String	—	0
show-number	显示行号	Boolean	—	true
mode	模式	String	‘application/json’,‘text/javascript’	‘application/json’
theme	提供若干个默认比较好看的皮肤	String	可选值参考其他配置项中列出	idea
lint	是否进行 lint 检查	Boolean	暂时只支持 json	true
readonly	只读模式	Boolean	-	false
auto-format	是否自动格式化	Boolean	-	true
indent-unit	缩进字符	Number	-	2
smart-indent	是否自动缩进	Boolean	-	true
line-wrap	代码换行	Boolean	-	true
gutter	代码折叠	Boolean	-	true
height	默认编辑器高度	String	—	300px

# 5 Events 事件

<template>
	<div>
	  <b-code-editor v-model="jsonStr" :indent-unit="4" height="auto"/>
	  <p><b-button @click="$refs['editor'].formatCode()">手动触发格式化</b-button></p>
	</div>
</template>