Vue中 引入使用 vue |
您所在的位置：网站首页 › html中引入json › Vue中 引入使用 vue |
Vue中 引入使用 vue
|
「这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战」 项目开发过程中遇到展示 json 的场景，且 json 文件体积过大，小则几百kb。vue-json-views 即使加载 1M 左右的 json 文时，结合deep 深度限制，也能实现秒开的速度，组件压所过后体积只有15.7kb，开启gzip压缩后只有4.74kb。 1. 示例及文档在线示例 代码地址 git clone https://gitee.com/zhengyis/vue-json-views.git npm i npm run dev // 或 直接双击index.html 2. 安装 npm i -S vue-json-views // 注意是 views // 或直接将未编译的组件复制到项目内（推荐该方式，便于自定义修改） 3. 可选配置说明 属性说明类型默认值json传入的json数据（必填）Object-closed是否折叠全部Booleanfalsedeep展开深度,越大渲染速度越慢,建议不超过5）Number3icon-style折叠按钮样式，可选值为 [square, circle, triangle ]Stringsquareicon-color两个折叠按钮的颜色Arraytheme = vs-code 时，['#c6c6c6', '#c6c6c6']，其他情况为 ['#747983', '#747983']theme可选主题样式,可选值为 [one-dark, vs-code], 不选时为默认的白色主题String-font-size字体大小,单位 pxNumber14line-height行高，单位 pxNumber24注：行高和字体大小不建议选用过大值，因为 icon 大小、每行的 padding-left 等参数并不会随之发生改变 4. 应用4.1 在 vue 中使用 import jsonView from 'vue-json-views' export default { components: { jsonView, }, data() { return { // 可使用 JSON.parse() 对json数据转化 jsonData: { name:'dog', age:2, hobby:{ eat:{ food:'狗粮', water:'冰可乐' }, sleep:{ time:'白日梦' } } }, }; }, };4.2 在非工程化的项目内引用 Document #app{ height: 400px; } window.onload = function(){ new Vue({ el:'#app', data(){ return { json:{} } }, components:{ jsonView:window['vue-json-view'].default } }) } 5. 关于二次开发可根据自己项目的实际情况进行如下开发： 主题定制：根据需求定制主题，不同的主题名称会给组件定义对应的class名称，根据class重新定义样式即可，可参见项目内的主题配置； 修改icon样式：项目内icon使用的svg,支持三种样式，可自定义更换或者删除不需要的svg文件，以降低打包体积；推荐阅读： vue-json-editor （ 一款 json 数据编辑插件） |
【本文地址】
今日新闻 |
推荐新闻 |