自学内容网 自学内容网

Vue3 集成 json-editor-vue3

简介

快速编辑json数据,还需要支持全屏编辑,以及json校验。
https://github.com/guyue88/json-editor-vue3

安装依赖

npm install json-editor-vue3 --save

引入

在 main.js中添加

import “jsoneditor”;

全局引入

import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue3'
 
Vue.use(JsonEditorVue)

vue页面局部引入

import JsonEditorVue from 'json-editor-vue3'; 

示例

<script setup lang="tsx">
import { ref } from "vue";
import JsonEditorVue from "json-editor-vue3";

const valueData = ref<any>({"name":"zhangsan"});
</script>

<template>
   <JsonEditorVue v-model="valueData" style="height: 100vh" />
</template>

效果

在这里插入图片描述


原文地址:https://blog.csdn.net/lianghecai52171314/article/details/142780417

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!