快捷導(dǎo)航

使用json-editor-vue3(Json字段編輯器)

更新時(shí)間：2025年01月24日 10:01:20 作者：滿腦子技術(shù)的前端工程師

文章介紹了如何在Vue3+Ts項(xiàng)目中使用json-editor-vue3插件,并解決了導(dǎo)入過(guò)程中遇到的模塊識(shí)別問(wèn)題,通過(guò)步驟說(shuō)明和代碼示例,展示了如何在項(xiàng)目中成功引入和使用該插件,并提供了一些常見(jiàn)參數(shù)和事件說(shuō)明

前言

背景：在公司使用的中臺(tái)項(xiàng)目中,有需要使用對(duì)Json數(shù)據(jù)進(jìn)行編輯的場(chǎng)景,就想到了json編輯框插件!

最終找到了,這個(gè)插件json-editor-vue3,還有一些其他的插件比如:json-editor-vue,大致用法都是相同的,

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

效果圖如下

安裝插件(這里很正常)

控制臺(tái)執(zhí)行：npm install json-editor-vue3安裝插件

json-editor-vue3的使用步驟(這里遇到了問(wèn)題)

1.導(dǎo)入json-editor-vue3

① 導(dǎo)入json-editor-vue3(問(wèn)題出現(xiàn))

執(zhí)行

import JsonEditorVue from 'json-editor-vue3'

背景：我使用的項(xiàng)目是 Vue3+Ts 創(chuàng)建的項(xiàng)目，在導(dǎo)入 json-editor-vue3的時(shí)候出現(xiàn)了無(wú)法識(shí)別模塊的問(wèn)題.

如下圖所示：

② 解決（無(wú)法找到模塊的問(wèn)題）

第一種npm的方法行不通 不ok
第二種新聲明的方式是 ok 成功解決問(wèn)題

具體如下圖：

2.使用json-editor-vue3

① 步驟說(shuō)明：

1.在文件中導(dǎo)入 json-editor-vue3
2.然后直接再temlate中使用就可以

② 編寫(xiě)代碼如下：

<template>
    <button>點(diǎn)擊我修改</button>
    <!-- modeList:可選的編輯模式列表 ["tree", "code", "form", "view"] -->
    <!-- currentMode:當(dāng)前編輯模式(小寫(xiě)) -->
    <!-- v-model:綁定需要修改的值 -->
    <!-- update:modelValue:監(jiān)聽(tīng)到修改的值發(fā)生變化 -->
    <JsonEditorVue v-model="jsonStr"
     :modeList="couldView"
     :currentMode="'tree'" 
     @update:modelValue="updateModelValue">
    </JsonEditorVue>

</template>


<script lang="ts" setup>
import { ref } from 'vue'

//1.導(dǎo)入json-editor-vue3
import JsonEditorVue from 'json-editor-vue3'

//2.定義修改的json字段的值,
const jsonStr = ref({ "key": "key", "value": "value" })


const couldView = ref(["tree", "code", "form", "view"])
const updateModelValue = (val: unknown) => {
    console.log(val,"修改了值");
}



</script>

③ 內(nèi)容如下圖所示：

總結(jié): json-editor-vue3的Api說(shuō)明

點(diǎn)擊下方可跳轉(zhuǎn)，github地址如下：

json-editor-vue3的文檔說(shuō)明

全局引入

import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue3'

Vue.use(JsonEditorVue)

組件內(nèi)引入

import JsonEditorVue from 'json-editor-vue3'

export default {
  name: 'app',
  components: {
    JsonEditorVue
  },
  data() {
    return {
      data: {
        "hello": "vue"
      }
    }
  },
  methods: {}
}

模板使用

<json-editor-vue class="editor" v-model="data" />

常見(jiàn)參數(shù)

對(duì)應(yīng)的事件

總結(jié)

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线