v-gantt-chart - npm Package Compare versions

Comparing version 1.2.6 to 1.3.0

lib/components/dynamic-render.js

@@ -20,2 +20,3 @@ let dynamicRender = {
   },
+
   data() {
@@ -30,2 +31,3 @@ return {
   },
+
   computed: {
@@ -44,2 +46,3 @@ blockHeight() {
   },
+
   watch: {
@@ -66,3 +69,3 @@ currentIndex(val) {
     },
-    datas(){
+    datas() {
       this.spliceData()
@@ -77,5 +80,7 @@ },
   },
+
   created() {
     this.spliceData();
   },
+
   methods: {
@@ -92,2 +97,7 @@ /**
       } = this;
+      //没有高度，不需要渲染元素
+      if (heightOfRenderAera === 0 || cellHeight === 0) {
+        return []
+      }
+
       if (preload === 0) {
@@ -97,6 +107,3 @@ this.showDatas = this.datas
       }
-      //没有高度，不需要渲染元素
-      if (heightOfRenderAera === 0 || cellHeight === 0) {
-        return []
-      }
+
       let end = currentIndex + Math.ceil(heightOfRenderAera / cellHeight) +
@@ -103,0 +110,0 @@ preload;

package.json

 {
   "name": "v-gantt-chart",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "description": "display gantt-like vaule,like use this to order bus schedule.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -68,2 +68,3 @@ <p align="center"><img src="https://raw.githubusercontent.com/w1301625107/vue-gantt-chart/master/screenshot/icon.png" alt="logo" width="180"></p>
 import moment from "moment" //时间库
+
 export default {
@@ -83,5 +84,7 @@ name: "App",
 };
+```
 
-//渲染的数据，有特殊格式 ，目前要求数组中每一个值均为对象，且有gtAarry对象数组这个属性(默认取gtArray，也可以自定义多个数组key值)
-//数组中每一个对象需有两个属性，start和end(不提供的情况，偏移与宽度将为0)，需为合法的时间字符串.例如
+在**默认情况**下（即`customGenerateBlocks`为`false`）的渲染的数据需要**特殊格式** ，目前要求数组中每一个值均为对象，且有`gtAarry`对象数组这个属性(默认取`gtArray`，也可以自定义多个数组`key`值)
+//数组中每一个对象需有两个属性，`start`和`end`(不提供的情况，偏移与宽度将为0)，需为合法的时间字符串.例如
+```js
 [
@@ -109,5 +112,5 @@ {
 
-### render slot
+## Slot
 
-```
+```js
 // 假设你传入的数据为
@@ -132,43 +135,103 @@ [
 
-#### block 容器块slot
+### block 容器块slot
+#### `customGenerateBlocks` 为false（默认值） 的情况
+
+```html
+<template v-slot:block="{data,item}">
+    <!-- 你的容器块组件 -->
+    <Test :data="data" :item="item"></Test>
+</template>
 ```
- <template v-slot:block="{data,item}">
-        <!-- 你的容器块组件 -->
-        <Test :data="data" :item="item"></Test>
- </template>
- //则data 为
-  {
-    id:'test', 
-    name:'sala',
-    gtArray:[{...}]，
-    //...
-  } 
 
- //item 为
-  {
-    name:'test', 
-    start:'2019-01-11 18:18:18',
-    end:'2019-01-11 18:18:18'
-    //...
-  }
+`data` 为
+```js
+{
+  id:'test', 
+  name:'sala',
+  gtArray:[{...}]，
+  //...
+} 
 ```
 
-#### left 行名slot
+`item` 为
+```js
+{
+  name:'test', 
+  start:'2019-01-11 18:18:18',
+  end:'2019-01-11 18:18:18'
+  //...
+}
 ```
-  <template v-slot:left="{data}">
+
+#### `customGenerateBlocks` 为true 的情况
+
+此时`arrayKeys`，`itemkey`将不在生效，如何渲染，渲染什么，将由你自己决定，下方是一个例子
+
+```html
+<template v-slot:block="{data,
+                        getPositonOffset,
+                        getWidthAbout2Times,
+                        isInRenderingTimeRange}">
+  <div class="myBlockContainer"
+        v-for="item in data.gtArray"
+        v-if="isInRenderingTimeRange(item.start)
+              ||isInRenderingTimeRange(item.end)"
+        :key="item.id"
+        :style="{position:'absolute',
+                left:getPositonOffset(item.start)+'px',
+                width:getWidthAbout2Times(item.start,item.end)+'px'}">
+    <Test :data="data" 
+          :item="item"></Test>
+  </div>
+</template>
+```
+
+ `data` 为
+```js
+{
+  id:'test', 
+  name:'sala',
+  gtArray:[{...}]，
+  //...
+} 
+```
+
+`getPositonOffset(time:string):number `
+定位函数，根据给定字符串形式的时间生成相对时间轴起点的的偏移值
+
+`getWidthAbout2Times(start:string,end:string):number`
+为宽度计算函数，根据给定字符串形式的时间计算两个时间差的宽度值
+
+`isInRenderingTimeRange(time:string):boolean`
+判定给定的时间是否在屏幕显示的时间轴范围之内
+  
+
+### left 行名slot
+```html
+<template v-slot:left="{data}">
     <!-- 你的行名组件 -->
     <TestLeft :data="data"></TestLeft>
-  </template>
-  //则data 为
-  {
-    id:'test', 
-    name:'sala',
-    gtArray:[{...}]，
-    //...
-  }
+</template>
 ```
 
+`data` 为
+```js
+{
+  id:'test', 
+  name:'sala',
+  gtArray:[{...}]，
+  //...
+} 
+```
 
-## Doc
+### title 标题slot
+```html
+<template v-slot:title>
+    <!-- 你的表头组件 -->
+    hola
+</template>
+````
 
+## API
+
 <style>
@@ -185,2 +248,3 @@ .param table th:first-of-type {
 </style>
+
 <div class="param">
@@ -192,4 +256,4 @@
 | :-------------- | :------: | :-----: | :----: | :---- |
-| startTime       |    ✅     | string  |   --   | 时间轴开始时间，需为合法的时间字符串，如：‘2019-01-11 18:18:18’|
-| endTime         |    ✅     | string  |   --   | 时间轴结束时间，需为合法的时间字符串，如：‘2019-01-11 18:18:18’|
+| startTime       |    ✅     | string  |   --   | 时间轴开始时间，需为合法的时间字符串，如：`2019-01-11 18:18:18`|
+| endTime         |    ✅     | string  |   --   | 时间轴结束时间，需为合法的时间字符串，如：`2019-01-11 18:18:18`|
 | cellWidth       |    ❌     | number  |   50   | 时间区间的宽度 |
@@ -199,4 +263,4 @@ | cellHeight      |    ❌     | number  |   20   | 时间区间的高度 |
 | titleWidth      |    ❌     | number  |  200   | 表头和行的宽度 |
-| scale           |    ❌     | number  |   60   | 时间轴的刻度值。单位:分钟，允许值[1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30, 60, 120，180,240,360, 720, 1440]                                    |
-| datas           |    ✅     |  array  |   --   | 渲染的数据，有特殊格式 ，目前要求数组中每一个值均为对象，且有gtAarry对象数组这个属性，gtArray中每一个对象需有两个属性，start和end(不提供的情况，偏移与宽度将为0)，需为合法的时间字符串.例如```[{id:'test',gtArray:[{start:'2019-01-11 18:18:18',end:'2019-01-11 18:18:18'}]}] ``` 其他不做限制。 |
+| scale           |    ❌     | number  |   60   | 时间轴的刻度值。单位:分钟，允许值`[1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30, 60, 120，180,240,360, 720, 1440] `                                   |
+| datas           |    ✅     |  array  |   --   | 在**默认情况**下（即`customGenerateBlocks`为`false`）的渲染的数据需要**特殊格式** ，目前要求数组中每一个值均为对象，且有gtAarry对象数组这个属性，gtArray中每一个对象需有两个属性，start和end(不提供的情况，偏移与宽度将为0)，需为合法的时间字符串.例如```[{id:'test',gtArray:[{start:'2019-01-11 18:18:18',end:'2019-01-11 18:18:18'}]}] ``` 其他不做限制。 |
 | arrayKeys|    ❌     | array  |   ["gtArray"]   | 需要渲染的数组的key  |
@@ -213,4 +277,7 @@ | dataKey         |    ❌     | string  |   --   | 渲染的每一行的key  |
 | hideYScrollBar |    ❌     | boolean  |   false   | 隐藏纵向滚动轴 |
+| customGenerateBlocks |    ❌     | boolean  |   false | 开启自定义生成渲染块，具体使用见说明 |
 
+
 </div>
+
 <style>
@@ -227,2 +294,3 @@ .event table th:first-of-type {
 </style>
+
 <div class="event">
@@ -236,2 +304,3 @@
 | scrollTop | number | Y轴的滚动值|
+
 </div>
@@ -242,4 +311,2 @@
 
-
-
 ## Run Demo
@@ -261,5 +328,10 @@
 ## Caution
-IE 需要注意一下
+IE 需要自己处理一些ployfill
 
+
 ## Update
+1.3.0
+- 优化渲染速度
+- 相比之前的自定义渲染，添加一个新的slot，支持自定义的定位和渲染，更加的灵活
+
 1.2.6
@@ -266,0 +338,0 @@ - 修复当时间线宽度比渲染宽度小的情况下的部分白屏

No alert changes

Improved metrics

Total package byte prevSize

372845

increased by0.83%

Number of lines in readme file

364

increased by24.66%

No dependency changes