vue3+ts使用vue3-ts-jsoneditor

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、下载依赖

 npm i vue3-ts-jsoneditor 

二、使用步骤

1.引入库

代码如下（示例）：

import JsonEditor from 'vue3-ts-jsoneditor';

2.读入数据

代码如下（示例）：

<template>
    <json-editor ref="jsonEditorRef" :style="{ height: '100%' }" :mode="'text'" v-model="data" />
</template>
<script setup lang="ts">
import JsonEditor from 'vue3-ts-jsoneditor';
const data = ref({});
</script>

效果如图：

3.监听键盘ctrl+s

  <json-editor ref="jsonEditorRef" :style="{ height: '100%' }" :mode="'text'" v-model="data"  @keydown.native.ctrl.s="handleSave"/>

<script setup lang="ts">
import JsonEditor from 'vue3-ts-jsoneditor';
   const data = ref({});
   const handleSave = async (e: Event) => {
      e.preventDefault(); // 阻止浏览器默认行为
      e.stopImmediatePropagation(); // 阻止事件继续传播
      //写自己的保存的api
    };
</script>

总结

代码小垃圾的我