欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

最終效果如下圖所示：

Bin Code Editor安裝

npm或yarn安裝命令如下：

npm i bin-code-editor -S
# or 
yarn add bin-code-editor

組件注冊(cè)

全局注冊(cè)

在 main.js 中寫(xiě)入導(dǎo)入以下內(nèi)容，

import Vue from 'vue';
import CodeEditor from 'bin-code-editor';
import 'bin-code-editor/lib/style/index.css';
 
Vue.use(CodeEditor);

局部注冊(cè)

在需要使用Bin Code Editor的組件中導(dǎo)入以下內(nèi)容，

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

使用方式

基本使用

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

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

組件屬性

組件事件與方法

踩坑指南

坑點(diǎn)描述

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

坑點(diǎn)解決：nextTick

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

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

總結(jié)

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

相關(guān)文章

最新評(píng)論