亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue:Bin Code Editor格式化JSON編輯器詳解

 更新時間：2024年12月27日 09:12:04   作者：是席木木啊  
文章介紹了BinCodeEditor組件的安裝、注冊、使用方法以及注意事項,組件可以通過npm或yarn安裝,支持全局或局部注冊,使用時,可以通過value屬性綁定JavaScript值,或使用v-model,組件事件與方法包括編輯區(qū)顯示問題的解決

最終效果如下圖所示：

Bin Code Editor安裝

npm或yarn安裝命令如下：

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';
 
Vue.use(CodeEditor);

局部注冊

在需要使用Bin Code Editor的組件中導入以下內容，

import { CodeEditor } from 'bin-code-editor'
import 'bin-code-editor/lib/style/index.css';
 
export default {
    components: {
        CodeEditor
    },
}

使用方式

基本使用

value：必需，對應要轉換的 JavaScript 值（通常為對象或數(shù)組），也可使用v-model代替，值的類型為String字符串，對于JavaScript對象，可以使用JSON.stringfy函數(shù)進行轉換。

<template>
<div>
  <b-code-editor v-model="jsonStr" :indent-unit="4" height="auto"/>
</div>
</template>
<script>
  const jsonData = `{"title":"測試json數(shù)據(jù)","children":[{"name":"子項名稱", "desc":"子項說明" },{"name":"子項名稱1", "desc":"子項說明1" }]}`
 
  export default {
    data() {
      return {
        jsonStr: jsonData
      }
    }
  }
</script>

組件屬性

組件事件與方法

踩坑指南

坑點描述

修改v-model綁定值之后，需要點擊一下編輯區(qū)才能顯示。

坑點解決：nextTick

將修改綁定值的操作，放在nextTick內部執(zhí)行，例如：

                this.$nextTick(()=>{
                    //TODO：假設綁定值為query
                    this.query = JSON.stringify({...});//轉為字符串
                });

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論