粘贴代码文本(请勿用截图) 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 ...
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 : ''"/>
使用插件: <json-viewer:value="content"copyable theme="my-awesome-json-theme"></json-viewer> value 代表显示的JSON数据; copyable 表示可以复制; theme 表示要引入的样式,引入的样式会覆盖默认的样式,如果对默认的样式不满意的话可以用这种方式进行重写,一般情况下用默认的就好,可以不用指定这个参数。 其他参数...
1.下载 // Vue2 npm install vue-json-viewer@2 --save // Vue3 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"copyableb...
<json-viewer:value="content"copyable theme="my-awesome-json-theme"></json-viewer> value 代表显示的JSON数据; copyable 表示可以复制; theme 表示要引入的样式,引入的样式会覆盖默认的样式,如果对默认的样式不满意的话可以用这种方式进行重写,一般情况下用默认的就好,可以不用指定这个参数。
安装 npm install --save vue-json-viewer 使用 import JsonViewer from 'vue-json-viewer' export default { name: 'logRecord', components:{ JsonViewer }, data() { jsonData: {id: '111', name: 'hello'} } } <json-viewer :value="jsonData" :expand-depth=5 copyable boxed sort theme="my...
项目有些后端返回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> ...
<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查看元素的类名去...
@Tammylch 标签添加copyable属性后,用slot配置 <template slot="copy" slot-scope="scope"> <el-button v-if="!scope.copied" type="text">copy</el-button> <el-button v-else type="text" disabled>copied</el-button> </template> 👍 2 webstager commented Oct 25, 2022 这样好像确实解决了,...
copyable展示复制按钮,默认文案为:copy、copied!, 你可以设置一个对象{copyText: 'copy', copiedText: 'copied'}来自定义复制按钮文案false sort按照key排序展示false boxed为组件添加一个盒样式false theme添加一个自定义的样式class用作主题jv-light 主题 ...