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 数据 在自己文件夹里找