vue-json-viewer插件的使用

阅读数:146 评论数:0

分类

html/css/js

正文

一、基本使用

1、安装

pnpm install vue-json-viewer
// 如果是vue3
pnpm install vue3-json-viewer

2、引入插件

引入插件有两种方式，可以全局引入，也可以在单个页面文件中引入该插件。

（1）全局引入（main.js）

    import {JsonViewer} from 'vue3-json-viewer';
    import "vue3-json-viewer/dist/index.css";
app.use(JsonViewer);

3、使用

                        <json-viewer :value="JSON.parse(props.row.content)"
                                     :expand-depth="5"
                                     sort copyable
                                     theme="my-awesome-json-theme"
                        ></json-viewer>

（1）属性

属性	描述	默认值	是否必填
value	json数据源		✅
copyable	复制按钮	false	❌
boxed	卡片风格	false	❌
sort	排序	false	❌
theme	主题	light（light \|\| dark）	❌
expandDepth	展开层数	1	❌
expanded	自动展开	false	❌

（2）事件

事件	描述	回调值
onKeyClick	点击key触发	被点击key

vue2与vue3对比

一、生命周期 1、vue2生命周期 beforeCreate #实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用 created #实例创建完成后被立即同步调用 beforeMount #

vite+vue3+pinia+pnpm+element-plus开发记录

一、使用pnpm新建项目可以使用npm 或yarn或pnpm来初始化Vite项目 pnpm create vite xxx(项目名称) #选择vue #选择js cd xxx (进入项目目录) #安

vue3 setup语法糖

一、概述 <script setup> 是在单文件组件（SFC）中使用组合式API的编译时语法糖，解决Vue3.0中setup需要频繁将声明的变量、函数以及import引入的内容通过return向外

vue3中的ref、computed、reactive、toRef、toRefs

一、概述在vue2中，data函数里返回的值直接为响应式，但在vue3中我们需要使用一些函数才能达到这个效果。 setup函数中拿不到vue的this。二、常用函数 <template> <d

vue3使用setup代替created

vue3中vue router4下使用keep-alive

缓存页面主要Jul为了防止重复渲染dom，减少加载时间及性能消耗，提高用户体验。一、旧版的语法 <keep-alive> <router-view v-if="$route.meta.kee

vue3中全局挂载和获取的方式

一、在main.js挂载 import { createApp } from 'vue' import App from './App.vue' import router from './route

vue3中使用$refs

一、概述在vue3中没有$refs这个对象，可以使用如下方法 <template> <div><input type="text" ref="txt1" value="hello" /></div>

vue3中使用element plus 的ElMessage

方式一、全局引入全局引入element之后事，element已经在app.config.globalProperties添加了全局方法$message，所以可以在组件中直接使用。方式二、按需引入

vue3中的useRoute和useRouter

一、useRouter传参的方式 1、隐匿传参params import { useRouter } from 'vue-router' export default { setup() {

秒吧学习