import{o as n,c as s,a}from"./app.51e46c58.js";const t='{"title":"JsonEditor JSON编辑器组件（2.2.0+）","description":"","frontmatter":{},"headers":[{"level":2,"title":"用法","slug":"用法"},{"level":2,"title":"JsonEditor 属性","slug":"jsoneditor-属性"},{"level":2,"title":"Editor 事件","slug":"editor-事件"}],"relativePath":"components/json-editor.md","lastUpdated":1721205967753}',p={},o=a('

JsonEditor JSON编辑器组件（2.2.0+）

基于 vue-json-pretty 封装。

可自行阅读 vue-json-pretty文档

JsonEditor 组件位于 src/components/JsonEditor 内

用法

<script setup lang="ts">\n<script setup lang="ts">\nimport { ContentWrap } from '@/components/ContentWrap'\nimport { JsonEditor } from '@/components/JsonEditor'\nimport { useI18n } from '@/hooks/web/useI18n'\nimport { ref, watch } from 'vue'\n\nconst { t } = useI18n()\n\nconst defaultData = ref({\n  title: '标题',\n  content: '内容'\n})\n\nwatch(\n  () => defaultData.value,\n  (val) => {\n    console.log(val)\n  },\n  {\n    deep: true\n  }\n)\n\nsetTimeout(() => {\n  defaultData.value = {\n    title: '异步标题',\n    content: '异步内容'\n  }\n}, 4000)\n</script>\n\n<template>\n  <ContentWrap :title="t('richText.jsonEditor')" :message="t('richText.jsonEditorDes')">\n    <JsonEditor v-model="defaultData" />\n  </ContentWrap>\n</template>\n\n

JsonEditor 属性

可查看 vue-json-pretty文档

Editor 事件

可查看 vue-json-pretty文档

',10);p.render=function(a,t,p,e,c,l){return n(),s("div",null,[o])};export default p;export{t as __pageData};