在vue项目中使用 JSON 编辑器： vue-json-editor

一、安装

npm install vue-json-editor --save或者yarn add vue-json-editor

二、使用

<template><vue-json-editorv-model="jsonContent"        <!--绑定的JSON数据-->:show-btns="true"            <!--是否显示按钮-->mode="tree"                  <!--模式：tree  text  form code等-->lang="zh"                    <!--语言-->:expandedOnStart="false"     <!--初始化时，是否自动展开-->@json-change="jsonChange"    <!--json改变时，触发的事件-->@json-save="jsonSave"        <!--json保存事件-->@has-error="hasError"/>      <!--出现错误时，触发的事件-->
</template>

<script>
import vueJsonEditor from 'vue-json-editor'
import '@/styles/jsoneditor.css' // 该本地文件用于覆盖编辑器默认的样式export default {components: { vueJsonEditor },data() {return {jsonContent: null}},mounted() {this.init()},methods: {// 初始化init() {this.jsonContent = JSON.parse(this.value)},// 点击按钮进行保存save() {if (!this.isJSON(this.jsonStr)) return this.$message.error(`json格式错误`)this.$message.success('json格式正确')},// json数据改变jsonChange() {console.log('json change')},// json数据保存jsonSave() {console.log('json save')},// 数据错误hasError() {console.log('has error')},// 判断是不是JSONisJson(str) {if (typeof str == 'object' && str) return trueif (typeof str == 'string') {try {var obj = JSON.parse(str)if (typeof obj == 'object' && obj) return truereturn false} catch (e) {return false}}},}
}
</script>

三、使用坑点

1、图标找不到–原因：是包里的图片引入是相对路径
解决步骤1：① 把 node_modules/vue-json-editor/assets/img/jsoneditor-editor.svg 转换成 png 图片（取名 json_editor2.png ），然后把图片放在项目 assets 文件夹中

解决步骤2：② 把 node_modules/vue-json-editor/assets/jsoneditor.css 文件拿出来放到项目的某个文件夹下( styles )，也方便后面自己去重写编辑器的样式。里面的图标图片引入改成本地图片放置的位置

2、设置 mode 为中文不成功–不明原因，未解决

3、在线 svg 转图片地址： https://www.bejson.com/ui/svg_editor/

在vue项目中使用 JSON 编辑器： vue-json-editor相关推荐

vue项目中使用代码编辑器，视频播放器插件
1.Vue-代码编辑器插件 1)安装 npm install monaco-editor --save npm install monaco-editor-webpack-plugin --save- ...
从0开始在vue项目中使用quill编辑器
快速.便捷的创建在vue cli中使用quill. 参考资料: quill中文文档在线示例: 点我预览 github仓库地址:https://github.com/font-size/vue-qui ...
如何在vue项目中使用markdown编辑器
在Vue 中使用 Vditor 官方文档 Vditor 安装 npm install vditor --save 引入 import Vditor from 'vditor' import 'vdit ...
php项目引入vue,怎样实现Vue项目中使用Vux
这次给大家带来怎样实现Vue项目中使用Vux,Vue项目中使用Vux的注意事项有哪些,下面就是实战案例,一起来看一下. 默认已安装vue环境 1.安装vux npm install vux --sav ...
在VUE项目中使用SCSS ，对SCSS的理解和使用（简单明了）
首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...
vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑
vue之猫眼json数据的获取直接用于自己的vue项目中遇到问题总结: 加载不出猫眼数据,无法调用,数据被限制猫眼电影图片的拼接及删除问题 swiper的迷幻坑** 首先来说一下第一问题加载不出 ...
Vue项目中最简单的使用集成UEditor方式，含图片上传
Vue 3 项目参考这里前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热 ...
Vue项目中最简单的使用集成百度UEditor方式，含图片上传
前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热度.而不少公司和个人也仍然 ...
vue项目中更换tinymce版本踩坑
项目需求: vue项目中实现多图片批量上传功能问题: tinymce富文本编辑器的多图片批量上传插件支持版本:5.0.4+ 项目中现有的富文本编辑器版本:4.9.4 为实现这一功能选择更换tiny ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...

在vue项目中使用 JSON 编辑器： vue-json-editor

一、安装

二、使用

三、使用坑点

在vue项目中使用 JSON 编辑器： vue-json-editor相关推荐

最新文章

热门文章