使用插件: <json-viewer:value="content"copyable theme="my-awesome-json-theme"></json-viewer> value 代表显示的JSON数据; copyable 表示可以复制; theme 表示要引入的样式,引入的样式会覆盖默认的样式,如果对默认的样式不满意的话可以用这种方式进行重写,一般情况下用默认的就好,可以不用指定这个参数。 其他参数...
npm install vue-json-viewer@3 --save 1. 2. 3. 4. 2.引入并全局注册 main.js文件中 import JsonViewer from 'vue-json-viewer' Vue.use(JsonViewer) 1. 2. 3.使用 <json-viewer:value="jsonData":expand-depth="5"copyableboxedsort></json-viewer> 1. jsonData是需要格式化渲染的数据,如果后台返...
1、先import JsonViewer from "vue-json-viewer"; 2、定义组件 components: { JsonViewer, }, 3、用JsonViewer展示json格式的数据 <JsonViewer style="top: 150px":expand-depth=5copyable=truev-if="text":value="text ? text : ''"/>
jsonData: {id: '111', name: 'hello'} } } <json-viewer :value="jsonData" :expand-depth=5 copyable boxed sort theme="my-awesome-json-theme"></json-viewer>
<json-viewer:value="content"copyable theme="my-awesome-json-theme"></json-viewer> value 代表显示的JSON数据; copyable 表示可以复制; theme 表示要引入的样式,引入的样式会覆盖默认的样式,如果对默认的样式不满意的话可以用这种方式进行重写,一般情况下用默认的就好,可以不用指定这个参数。
项目有些后端返回json 数据需要前端展示给用户看,就需要用到vue-json-viewer 安装: $ npm install vue-json-viewer--save 使用: //引入importJsonViewerfrom'vue-json-viewer'// 注册components:{JsonViewer,}, //使用<json-viewer:value="responseJs":expand-depth="4"copyable sort></json-viewer> ...
import "@/assets/scss/jvStyle.scss"; import "vue3-json-viewer/dist/index.css"; <json-viewer :value="viewParam" boxed :sort="true" :expand-depth=5 :copyable="{ copyText: '复制代码', copiedText: '复制成功' }" @copied="textCopy" ></json-viewer> main.js import {createApp} from ...
<json-viewerv-for="(ite, idx) in finallyJsonList":key="idx"style="width: 100%; min-width: 3.125rem":value="ite":expand-depth="5"copyableboxedtheme="my-awesome-json-theme"sort></json-viewer> 第二步,在这个类名里面写样式了 需要注意的是,这个编辑器完全可以使用浏览器F12查看元素的类名去...
使用 <json-viewer :value="responseJs" :expand-depth="4" copyable sort></json-viewer> 具体参数 https://www.npmjs.com/package/vue-json-viewer 效果文章标签: JavaScript 数据格式 JSON 关键词: JSON数据 vue JSON vue JSON数据 JSON vue vue JSON vue-json-viewer 微...
copyable展示复制按钮,默认文案为:copy、copied!, 你可以设置一个对象{copyText: 'copy', copiedText: 'copied'}来自定义复制按钮文案false sort按照key排序展示false boxed为组件添加一个盒样式false theme添加一个自定义的样式class用作主题jv-light 主题 ...