1.4.0 • Published 1 year ago
vue-vis-layout v1.4.0
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, //索引
showClose: false //title标题的显示隐藏
},
component: 'vis-top-chart', //动态组件的名称
id: '1'
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);
});
1.4.0
1 year ago