从零封装一个 JSON 编辑器组件：Vue 3 开发者的快乐之旅

大家好！今天我们要一起做一件非常酷的事情——封装一个 JSON 编辑器组件！如果你是一个 Vue 3 开发者，或者对前端开发感兴趣，那么这篇文章绝对适合你。我们会从零开始，一步步封装一个功能强大、颜值在线的 JSON 编辑器，最后还会把它变成一个可复用的组件。准备好了吗？Let's go! 🎉

编辑器状态：

渲染状态：

---

第一步：需求分析——为什么我们需要一个 JSON 编辑器？

想象一下，你正在开发一个后台管理系统，突然产品经理跑过来对你说：“我们需要一个 JSON 编辑器，用户可以输入 JSON，还能格式化和高亮显示！” 你心里一紧，但表面上淡定地说：“没问题，交给我吧！” 😎

于是，你开始思考：

• 用户需要输入 JSON。
• 点击“格式化”按钮后，JSON 应该被格式化并高亮显示。
• 如果 JSON 格式错误，需要提示用户。
• 编辑器要好看，最好有科技感！

嗯，需求明确了，接下来就是动手实现了！

---

第二步：搭建基础结构——从零开始

我们先创建一个 Vue 3 项目（如果你已经有项目了，可以直接跳到下一步）。假设你已经有了一个项目，我们在 @/zdpui/components/editor/ 目录下创建一个新文件：EditorJson.vue。

mkdir -p src/zdpui/components/editor
touch src/zdpui/components/editor/EditorJson.vue

接下来，我们写一个简单的模板：

<template>
  <div class="json-editor">
    <textarea v-model="jsonInput" placeholder="请输入 JSON 内容..."></textarea>
    <button @click="formatJson">格式化</button>
    <pre v-if="formattedJson">{{ formattedJson }}</pre>
    <div v-if="error" class="error-message">{{ error }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const jsonInput = ref('');
const formattedJson = ref('');
const error = ref('');

const formatJson = () => {
  try {
    const parsedJson = JSON.parse(jsonInput.value);
    formattedJson.value = JSON.stringify(parsedJson, null, 2);
    error.value = '';
  } catch (e) {
    error.value = '无效的 JSON 格式';
    formattedJson.value = '';
  }
};
</script>

<style scoped>
.json-editor {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #2d2d44;
  border-radius: 8px;
}

textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #444;
  border-radius: 4px;
  resize: none;
}

button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #3aa876;
}

pre {
  margin-top: 10px;
  padding: 10px;
  background-color: #1e1e2f;
  border-radius: 4px;
  color: #ffffff;
  white-space: pre-wrap;
}

.error-message {
  margin-top: 10px;
  color: #ff4d4f;
}
</style>

现在，你已经有了一个基础的 JSON 编辑器！用户可以输入 JSON，点击“格式化”按钮后，JSON 会被格式化并显示在下方。如果 JSON 格式错误，还会提示用户。

---

第三步：高亮显示——让 JSON 更美观

光有格式化还不够，我们还需要高亮显示 JSON 的键、字符串、布尔值和数字。这里我们用正则表达式来实现高亮功能。

在 EditorJson.vue 中添加高亮逻辑：

const highlightJson = (json) => {
  return json
    .replace(/("[^"]*"):/g, (match) => {
      return `<span class="json-key">${match}</span>`;
    })
    .replace(/("[^"]*")/g, (match) => {
      return `<span class="json-string">${match}</span>`;
    })
    .replace(/\b(true|false|null)\b/g, (match) => {
      return `<span class="json-boolean">${match}</span>`;
    })
    .replace(/\b\d+\b/g, (match) => {
      return `<span class="json-number">${match}</span>`;
    });
};

然后在模板中使用 v-html 渲染高亮后的 JSON：

<pre v-if="formattedJson" v-html="highlightJson(formattedJson)"></pre>

最后，添加高亮样式：

.json-key {
  color: #42b983;
}

.json-string {
  color: #ff79c6;
}

.json-boolean {
  color: #bd93f9;
}

.json-number {
  color: #f1fa8c;
}

现在，你的 JSON 编辑器不仅支持格式化，还能高亮显示 JSON 内容！是不是很酷？ 😎

---

第四步：封装为组件——让代码更优雅

为了让这个 JSON 编辑器可以在其他地方复用，我们把它封装成一个组件。在 @/zdpui/components/editor/EditorJson.vue 中，我们已经完成了大部分工作，现在只需要在 Demo.vue 中使用它。

在 Demo.vue 中引入并使用组件：

<template>
  <div class="demo-container">
    <h1>JSON 编辑器示例</h1>
    <EditorJson />
  </div>
</template>

<script setup>
import EditorJson from '@/zdpui/components/editor/EditorJson.vue';
</script>

<style scoped>
.demo-container {
  width: 100%;
  min-height: 50vh;
  padding: 20px;
  background-color: #1e1e2f;
  color: #ffffff;
  font-family: Arial, sans-serif;
}

h1 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #42b983;
}
</style>

---

第五步：测试与优化——让组件更完美

现在，你的 JSON 编辑器已经可以正常工作了！但我们可以进一步优化：

• 添加滚动条样式，让滚动条更美观。
• 支持切换编辑模式和格式化模式。
• 优化响应式布局，确保在不同设备上都能正常显示。

---

文末悬念——你还能做什么？

现在，你已经学会了如何封装一个 JSON 编辑器组件。但故事还没有结束！你可以尝试以下挑战：

1. 如何让编辑器支持 JSON 校验？
2. 如何实现 JSON 的折叠功能？
3. 如何将编辑器集成到你的项目中？

如果你对这些问题感兴趣，或者想获取完整代码，欢迎在后台私信我！我会把完整代码和更多高级功能分享给你！ 🚀

---

总结

今天，我们从零开始封装了一个 JSON 编辑器组件，不仅支持格式化和高亮显示，还能在项目中复用。希望这篇文章对你有帮助！如果你喜欢这篇文章，记得点赞、收藏，并分享给你的朋友！我们下次再见！ 😄

---