vue3-json-view

1.3.2 • Public • Published

vue3-json-view

Typescript support a vue3-json-view lib which can better show

🦄 Usage

It is recommended to use this way

import JsonView from "vue3-json-view"
in vue3

<template>
    <json-view :data="data"/>
</template>

setup () {
  components: {
    JsonView
  },
  const data = reactive({
    name: 'yugang.cao',
    age: 23,
    home: 'my home'
  })
  return {
    data
  }
}
or

in main.js
import { JsonView } from 'vue3-json-view'
app.use(JsonView)

📦 Install

npm i vue3-json-view --save

or

yarn add vue3-json-view --save

相关配置说明

属性 说明 类型 默认值
data 传入的 json 数据(必填) Object -
closed 是否折叠全部 Boolean false
deep 展开深度,越大渲染速度越慢,建议不超过 5 Number 3
icon-style 折叠按钮样式,可选值为 square、circle、triangle String square
icon-color 两个折叠按钮的颜色 Array theme=vs-code 时,['#c6c6c6', '#c6c6c6'],其他情况为['#747983', '#747983']
theme 可选主题样式,可选值为 one-dark、vs-code,不选时为默认的白色主题 String -
json-key 显示对象的 key 值 String ''
font-size 字体大小,单位 px Number 14
line-height 行高,单位 px Number 24

🌸 Thanks

This project is heavily inspired by the following awesome projects.

📄 License

MIT License © 2021-PRESENT caoyugang_1

Package Sidebar

Install

npm i vue3-json-view

Weekly Downloads

11

Version

1.3.2

License

MIT

Unpacked Size

58.6 kB

Total Files

25

Last publish

Collaborators

  • caoyugang