vue-json-viewer 플러그인은 페이지에 JSON 데이터 표시를 구현합니다(강조 표시, 폴더 가능 및 복사 가능).

vue-json-viewer 플러그인을 사용하면 이 플러그인을 사용하여 강조 표시, JSON 접기, 복사의 세 가지 기능을 빠르고 쉽게 구현할 수 있습니다 ! ! !

공식 홈페이지 주소: https://www.npmjs.com/package/vue-json-viewer

결과 보여줘

표시할 JSON 데이터:

{
  "Data": {
    "Body": "ew0KICAgICJuYW1lIjogIlN5c3RlbSIsDQogICAgImNvbmRpdGlvbnMiOiAiQ29udHJhY3RDb25kaXRpb25zKFwiQDFEudVwiLCBpdGVtcylcblxuICAgICAgICBleHBvcnRKU09OID0gY3JlYXRlRXhwb3J0KGl0ZW1zKVxuICAgICAgICBVcGxvYWRCaW5hcnkoXCJOYW1lLERhdGEsQXBwbGljYXRpb25JZCxEYXRhTWltZVRFwiLCBcInNldFwiLCAkQnVmZmVyS2V5LCBKU09ORW5jb2RlKGJ1ZmZlcl9kYXRhKSlcbiAgICAgICAgJHJlc3VsdCA9IGJ1ZmZlcl9kYXRhW1wiYmluYXJ5X2lkXCJdXG4gICAgfVxufSIsDQogICAgICAgICAgICAiVHlwZSI6ICJjb250cmFjdHMiDQogICAgICAgIH0NCiAgICBdDQp9",
    "MimeType": "application/json",
    "Name": "system.json"
  }
}

최종 효과를 먼저 살펴보겠습니다.

효과를 본 후, 실용적인 내용으로 넘어가겠습니다!

vue-json-viewer 플러그인 설치

npm 기반 설치:

$ npm install vue-json-viewer --save

Yarn 기반 설치:

$ yarn add vue-json-viewer

암호

스크립트에서 패키지 가져오기

import Vue from 'vue';
import JsonViewer from 'vue-json-viewer';
// Import JsonViewer as a Vue.js plugin
Vue.use(JsonViewer);

vue 프로젝트에 다음을 추가합니다. jsonData는 json 유형 데이터여야 합니다.

  <div class="block-content-single-item">
        <label class="block-content-label">{
   
   { $t('parameters') }}</label>
        <span class="block-content-text">
          <json-viewer
            :value="jsonViewer"
            :expand-depth="5"
            :copyable="copyable"
            boxed
            sort
            @copied="onCopy"
          ></json-viewer>
        </span>
      </div>

그런 다음 정적 파일과 가져오기가 작성된 후 스크립트에서 jsonData를 정의하고 값을 할당합니다.

1. 하드 코딩된 구현:

export default {
  data() {
    return {
      jsonData: {
        name: 'renlei',
        age: 18
      },
      copyable: {
        copyText: this.$t('share'),
        copiedText: this.$t('shared'),
        timeout: 2000
      },
    };
  },

2. 동적 할당 구현

값이 동적으로 할당되는 경우 반환되는 배경 데이터는 문자 json일 수 있으며, 이는 문자열 유형 json string이 필요하며 사용하기 전에 json 형식으로 변환됩니다 . 그런 다음 처리된 데이터를 jsonData에 복사합니다. 그렇지 않으면 오류가 보고됩니다.

선택적 구성 설명

<json-viewer
:value="jsonData"
:expand-length=5
복사 가능한
박스형
정렬></json-viewer>

매개변수	설명하다	기본값
`value`	JSON 데이터(및 지원 `v-model使用`)	필수의
`expand-depth`	이 깊이에서는 더 가라앉는다.	`1`
`copyable`	"복사" 버튼을 표시하면 복사 텍스트를 사용자 정의할 수 있습니다. {복사 텍스트:'복사', CopyText:'복사'}를 설정하거나 기본 copyText를 사용하려면 true로 설정하세요.	`false`
`sort`	전면 정렬 키 표시	`false`
`boxed`	구성 요소에 멋진 "박스형" 스타일을 추가하세요.	`false`
`theme`	사용자 정의 CSS 클래스를 추가하여 테마 만들기	`jv-light`

청취자

경청자	설명	값
`copied`	텍스트가 복사된 후 copyEvent를 발생시킵니다.	클립보드 성공 이벤트

코디를 클릭한 후 복사 후 응답 정보 프롬프트를 확인해야 하는 경우 복사에 대한 이벤트 모니터링을 수행해야 하는데 이때 @copied 이벤트를 추가해야 합니다.