npm 安裝
npm i bin-code-editor -S
# or
yarn add bin-code-editor
引入
在 main.js 中寫入以下內容:
import Vue from 'vue'; import CodeEditor from 'bin-code-editor'; import 'bin-code-editor/lib/style/index.css'; import App from './App.vue'; Vue.use(CodeEditor); new Vue({ el: '#app', render: h => h(App) });
示例代碼
<template> <div> <b-code-editor v-model="jsonStr" :indent-unit="4" height="auto"/> </div> </template> <script> const jsonData = `{"title":"測試json數據","children":[{"name":"子項名稱", "desc":"子項說明" },{"name":"子項名稱1", "desc":"子項說明1" }]}` export default { data() { return { jsonStr: jsonData } } } </script>
refer:
https://wangbin3162.gitee.io/bin-code-editor/#/guide