添加theme="my-awesome-json-theme"JsonViewer的组件属性 复制粘贴下面的模板并且根据自定义的theme名称做对应调整: // values are default one from jv-light template.my-awesome-json-theme{background:#fff;white-space: nowrap;color:#525252;font-size:14px;font-family: Consolas, Menlo, Courier, monospace...
<json-viewer :value="jsonData" :copyable="copyable"></json-viewer> </template> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 自定义主题 添加theme="my-awesome-json-theme"Vue-JSON-Viewer 的组件属性,复制粘贴下面的模板并且根据自定义的theme名称做对应调整...
Vue-json-viewer组件非常易用,只需要在Vue项目中安装该组件并在需要的地方引用即可。下面是一个简单的例子: <template><vue-json-viewer:data="jsonData":theme="theme"/></template>importVueJsonViewerfrom'vue-json-viewer'exportdefault{components: {VueJsonViewer}, data () {return{jsonData: {'name':'...
<json-viewer v-for="(ite, idx) in finallyJsonList" :key="idx" style="width: 100%; min-width: 3.125rem" :value="ite" :expand-depth="5" copyable boxed theme="my-awesome-json-theme" sort ></json-viewer> 第二步,在这个类名里面写样式了 需要注意的是,这个编辑器完全可以使用浏览器F12查...
<json-viewer:value="jsonData":expand-depth="5"copyableboxedsort></json-viewer> 1. jsonData是需要格式化渲染的数据,如果后台返回的格式为字符串,需要先通过JSON.parse将字符串转化为对象 属性说明: 效果展示: 4.自定义样式 给组件添加theme属性
addtheme="my-awesome-json-theme"to the JsonViewer component copy-pasta and customize this SCSS template: //values are default one from jv-light template.my-awesome-json-theme{background:#fff;white-space:nowrap;color:#525252;font-size:14px;font-family: Consolas, Menlo,Courier,monospace;.jv-el...
<json-viewer:value="content"copyable theme="my-awesome-json-theme"></json-viewer> value 代表显示的JSON数据; copyable 表示可以复制; theme 表示要引入的样式,引入的样式会覆盖默认的样式,如果对默认的样式不满意的话可以用这种方式进行重写,一般情况下用默认的就好,可以不用指定这个参数。
vue-json-viewer.js add js file 5年前 yarn.lock Bump acorn from 6.3.0 to 6.4.1 5年前 README MIT vue-json-viewer 简单易用的json内容展示组件,支持vue@2.0+,支持SSR,组件支持增量渲染即使大文件json也可以快速渲染。 安装 示例 选项 主题
addtheme="my-awesome-json-theme"to the JsonViewer component copy-pasta and customize this SCSS template: //values are default one from jv-light template.my-awesome-json-theme{background:#fff;white-space:nowrap;color:#525252;font-size:14px;font-family: Consolas, Menlo,Courier,monospace;.jv-el...
theme添加一个自定义的样式class用作主题jv-light 主题 有两个办法创建自定义主题, (e.g.my-awesome-json-theme): 添加theme="my-awesome-json-theme"JsonViewer的组件属性 复制粘贴下面的模板并且根据自定义的theme名称做对应调整: // values are default one from jv-light template.my-awesome-json-theme{bac...