1.5.3 • Published 1 year ago
vue-2006layout v1.5.3
vue-vis-layout
数据结构的方式和dom的排列方式
<vue-vus-panel></vue-vus-panel> //panel布局 这一种采取的是定位排版 24*24的占比排版
{
id: 0, //id
item: {
row: 0, //位置 x轴的
col: 0, //位置 y轴的
width: 24, //宽度的占比
height: 3, //高度的占比
title: '测试', //标题的内容
showTitle: true //标题的现实和隐藏
},
name: 'vis-area-chart' // 组件的名字非常重要
},
栅格布局
dom结构
// 用的是css样式 grid的演示去做的这个可以吧栅格的col 和 row 动态的展示出来
<div class="wrap">
<rasterize-page
class="ap-rasterize"
:col="state.compsJson.col"
:row="state.compsJson.row"
>
<template
v-for="item in state.compsJson.data"
:key="item.component + item.id"
>
<panel-page :boderDebugger="false" :property="item">
<slot></slot>
<component :is="item.component"></component>
</panel-page>
</template>
</rasterize-page>
</div>
数据结构
col: 24, //动态的占比 x轴和y轴的演示
row: 24,
data: [
{
attrs: {
col: 0, //x轴的位置
row: 0, //y轴的位置
width: 3, //宽的占比
height: 8, //高的占比
zIndex: 1, //索引
},
component: 'vis-top-chart', //动态组件的名称
id: '1'
isHideHead: true, //标题的控制
title: '僵木蠕毒类型分布' //标题
},
#动态映入组件 特别重要 !!!重要程度 ★★★★★
映入的位置main.ts 或者是 main.js
image.png
requireComponent.keys().forEach((fileName) => {
const componentConfig = requireComponent(fileName);
// 兼容 import export 和 require module.export 两种规范
const ctrl = componentConfig.default || componentConfig;
console.log(' require.context:', ctrl);
app.component(ctrl.name, ctrl);
});
新增内容
`<brtter-scrool>` 2个事件 pullingUp 上拉加载事件 pullingDown 下拉刷新事件
需要传递的参数是 高height 内置了插槽了位置,放内容
<vue-map>
地图组件 需要引入json 数据 在自己文件夹里找