diff --git a/.gitignore b/.gitignore
index e7f7b34..a791aff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ dist
dist-ssr
*.local
.vscode
+*-old
yarn-*
*-lock.json
diff --git a/docs/.gitignore b/docs/.gitignore
index 5e9d4e2..9b8af8d 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -1,6 +1,6 @@
node_modules
.temp
-.cache
+cache
dist
*-error.log
diff --git a/docs/docs/.postcssrc.mjs b/docs/docs/.postcssrc.mjs
new file mode 100644
index 0000000..268a6d5
--- /dev/null
+++ b/docs/docs/.postcssrc.mjs
@@ -0,0 +1,9 @@
+import { postcssIsolateStyles } from 'vitepress';
+
+export default {
+ plugins: [
+ postcssIsolateStyles({
+ includeFiles: [/vp-doc\.css/] // 默认为 /base\.css/
+ })
+ ]
+};
diff --git a/docs/docs/.vitepress/components/Button.vue b/docs/docs/.vitepress/components/Button.vue
new file mode 100644
index 0000000..bf7bf05
--- /dev/null
+++ b/docs/docs/.vitepress/components/Button.vue
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+
+
diff --git a/docs/docs/.vuepress/components/DataParameter.vue b/docs/docs/.vitepress/components/DataParameter.vue
similarity index 94%
rename from docs/docs/.vuepress/components/DataParameter.vue
rename to docs/docs/.vitepress/components/DataParameter.vue
index 849b68c..e52fe62 100644
--- a/docs/docs/.vuepress/components/DataParameter.vue
+++ b/docs/docs/.vitepress/components/DataParameter.vue
@@ -1,62 +1,62 @@
-
-
-
-
-
- *required*,
-
-
- type: {{ t }},
- default: {{ d }}
- {{ f }}
-
-
-
-
-
-
-
+
+
+
+
+
+ *required*,
+
+
+ type: {{ t }},
+ default: {{ d }}
+ {{ f }}
+
+
+
+
+
+
+
diff --git a/docs/docs/.vuepress/components/Description.vue b/docs/docs/.vitepress/components/Description.vue
similarity index 67%
rename from docs/docs/.vuepress/components/Description.vue
rename to docs/docs/.vitepress/components/Description.vue
index 6ddda30..8f9038b 100644
--- a/docs/docs/.vuepress/components/Description.vue
+++ b/docs/docs/.vitepress/components/Description.vue
@@ -1,32 +1,37 @@
-
-
-
作者：{{ author }}
-
日期：{{ date }}
-
版本：{{ version }}
-
版权：{{ copyright }}
-
-
-
+
作者：{{ author }}
+
日期：{{ date }}
+
+ 版本：
+
+
版权：{{ copyright }}
+
+
+
![column-basic]()
+
-在 `v2.x` 版本中，我们添加了多层表头，它可以通过嵌套 `x-gantt-column` 来实现。
+在 `2.x` 版本中，我们添加了多层表头，它可以通过嵌套 `x-gantt-column` 来实现。
> 在多级表头的实现中，父级表头只接收 `label` 属性作为展示字段，其余字段均无效。
-```html{5,6}
-
-
-
-
-
-
-
-
+```html
+
+
+
+ // [!code focus]
+ // [!code focus]
+ // [!code focus]
+ // [!code focus]
```
它将显示成如下内容：
-![v2-multi-header]()
+
## 属性
@@ -98,13 +101,13 @@
设置空数据时显示的内容。如果数据内容为空，则会显示空数据内容。
-### prop
+### prop
`prop` 是一个重要的属性，它应当对应您给出数据的某一个键名。
-::: tip 更新
+::: tip 便捷操作
它支持通过 `.` 深度读取对象内部属性。
比如原始对象为：
@@ -122,10 +125,14 @@ const data = {
那么，`prop` 可以通过 `a.b.c` 直接读取到值，而不用像之前那样需要通过模板导出数据再读取内部属性。
:::
+
+
### merge
+
+
设置当前列是否需要与前一列合并。您可以给出一个 Boolean 值或者一个返回 Boolean 值的函数。
- 函数允许您使用行内数据。
@@ -159,9 +166,7 @@ mergeFunc: function({
### ~~selectable~~
-~~~~
-
-~~设置当前列内容的文本是否可以选择，默认禁止选择。~~
+该属性已废弃。
### width
@@ -231,4 +236,6 @@ mergeFunc: function({
:::
+
+
接下来，您将继续学习滑块组件的内容。
diff --git a/docs/docs/demo/column-demo/basic.md b/docs/docs/demo/column-demo/basic.md
new file mode 100644
index 0000000..0b8099a
--- /dev/null
+++ b/docs/docs/demo/column-demo/basic.md
@@ -0,0 +1,26 @@
+:::demo
+
+```vue
+
+
+
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/column-demo/merge.md b/docs/docs/demo/column-demo/merge.md
new file mode 100644
index 0000000..a7a504e
--- /dev/null
+++ b/docs/docs/demo/column-demo/merge.md
@@ -0,0 +1,40 @@
+:::demo
+
+```vue
+
+ 这个示例展示了如何合并具有子项的父级项。
+
+
+
+ // [!code focus]
+ // [!code focus]
+ // [!code focus]
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/column-demo/multi-col.md b/docs/docs/demo/column-demo/multi-col.md
new file mode 100644
index 0000000..b8eba1e
--- /dev/null
+++ b/docs/docs/demo/column-demo/multi-col.md
@@ -0,0 +1,31 @@
+:::demo
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+:::
\ No newline at end of file
diff --git a/docs/docs/demo/column-demo/prop-demo.md b/docs/docs/demo/column-demo/prop-demo.md
new file mode 100644
index 0000000..2bde636
--- /dev/null
+++ b/docs/docs/demo/column-demo/prop-demo.md
@@ -0,0 +1,27 @@
+:::demo
+
+```vue
+
+
+
+ // [!code focus]
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/column-demo/title-demo.md b/docs/docs/demo/column-demo/title-demo.md
new file mode 100644
index 0000000..403cd6f
--- /dev/null
+++ b/docs/docs/demo/column-demo/title-demo.md
@@ -0,0 +1,46 @@
+:::demo
+
+```vue
+
+
+
+
+ {{ label }}
+ 排序
+
+
+
+
+
+ {{ label }} - {{ level }}
+
+
+
+
+
+
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/root-demo/basic.md b/docs/docs/demo/root-demo/basic.md
new file mode 100644
index 0000000..670cf52
--- /dev/null
+++ b/docs/docs/demo/root-demo/basic.md
@@ -0,0 +1,39 @@
+
+:::demo
+
+```vue
+
+
+
+
+
+
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/root-demo/expand-false.md b/docs/docs/demo/root-demo/expand-false.md
new file mode 100644
index 0000000..54e4c28
--- /dev/null
+++ b/docs/docs/demo/root-demo/expand-false.md
@@ -0,0 +1,39 @@
+
+:::demo
+
+```vue
+
+
+
+
+
+
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/root-demo/link.md b/docs/docs/demo/root-demo/link.md
new file mode 100644
index 0000000..2ee76d3
--- /dev/null
+++ b/docs/docs/demo/root-demo/link.md
@@ -0,0 +1,70 @@
+:::demo
+
+```vue
+
+
+
+
+
+
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/root-demo/style-demo.md b/docs/docs/demo/root-demo/style-demo.md
new file mode 100644
index 0000000..9f6369c
--- /dev/null
+++ b/docs/docs/demo/root-demo/style-demo.md
@@ -0,0 +1,69 @@
+:::demo
+
+```vue
+
+
+ 黑暗
+ 高亮日期
+ 切换颜色
+
+
+
+
+
+
+
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/slider-demo/alignment.md b/docs/docs/demo/slider-demo/alignment.md
new file mode 100644
index 0000000..41a4c68
--- /dev/null
+++ b/docs/docs/demo/slider-demo/alignment.md
@@ -0,0 +1,35 @@
+:::demo
+
+```vue
+
+
+ 左对齐
+ 居中对齐
+ 右对齐
+
+
+
+
+
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/slider-demo/basic.md b/docs/docs/demo/slider-demo/basic.md
new file mode 100644
index 0000000..ed9be35
--- /dev/null
+++ b/docs/docs/demo/slider-demo/basic.md
@@ -0,0 +1,27 @@
+:::demo
+
+```vue
+
+
+
+ // [!code focus]
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/slider-demo/content-demo.md b/docs/docs/demo/slider-demo/content-demo.md
new file mode 100644
index 0000000..be8cce9
--- /dev/null
+++ b/docs/docs/demo/slider-demo/content-demo.md
@@ -0,0 +1,34 @@
+:::demo
+
+```vue
+
+
+
+
+
+
+ {{ row.name }} - {{ row.id }}
+
+
+
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/slider-demo/default-demo.md b/docs/docs/demo/slider-demo/default-demo.md
new file mode 100644
index 0000000..36a4376
--- /dev/null
+++ b/docs/docs/demo/slider-demo/default-demo.md
@@ -0,0 +1,32 @@
+:::demo
+
+```vue
+
+
+
+
+
+ {{ row.name }}
+
+
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/slider-demo/left-demo.md b/docs/docs/demo/slider-demo/left-demo.md
new file mode 100644
index 0000000..d5f5504
--- /dev/null
+++ b/docs/docs/demo/slider-demo/left-demo.md
@@ -0,0 +1,50 @@
+:::demo
+
+```vue
+
+
+
+
+
+
+ {{ row.name }} - {{ row.id }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/slider-demo/move-demo.md b/docs/docs/demo/slider-demo/move-demo.md
new file mode 100644
index 0000000..18177b8
--- /dev/null
+++ b/docs/docs/demo/slider-demo/move-demo.md
@@ -0,0 +1,51 @@
+:::demo
+
+```vue
+
+
+ {{ linked ? '已联动' : '未联动' }}
+ {{ moveByUnit ? '按单位移动' : '按像素移动' }}
+
+
+
+
+
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/demo/slider-demo/progress-demo.md b/docs/docs/demo/slider-demo/progress-demo.md
new file mode 100644
index 0000000..80437d3
--- /dev/null
+++ b/docs/docs/demo/slider-demo/progress-demo.md
@@ -0,0 +1,52 @@
+:::demo
+
+```vue
+
+
+ {{ show ? '隐藏进度' : '显示进度' }}
+
+
+
+
+
+
+
+
+
+```
+
+:::
diff --git a/docs/docs/README.md b/docs/docs/index.md
similarity index 69%
rename from docs/docs/README.md
rename to docs/docs/index.md
index d887ef0..a959c1e 100644
--- a/docs/docs/README.md
+++ b/docs/docs/index.md
@@ -1,175 +1,165 @@
-# 入门
-
-
-
-[](https://www.oscs1024.com/project/xpyjs/gantt?ref=badge_small)   
-   
- 
-
-通过入门的章节内容，可以快速了解、引入并使用 XGantt。
-
-::: tip 提示
-这是 vue3 版本的 Gantt 组件，如果需要使用 vue2 版本，请移步 [这里](./vue2/)
-:::
-
-::: tip 演示
-现已提供演示页面，如需要，请移步 [演示页面](https://docs.xiaopangying.com/gantt-demo/)。
-:::
-
-## 十分重要
-
-这个库是 `jz-gantt` 的 vue3 版本的继承库。如果您之前已经使用了 `jz-gantt`，则需要仔细阅读如下内容。
-
-**说明：**
-
-> 这个库的 `1.0.1` 相当于 `jz-gantt@1.3.1`。并且 `jz-gantt` 不再维护。
-
-### 如何迁移
-
-1. 包名不同， `@xpyjs/gantt` 替换了 `jz-gantt`。
-2. 所有以 `j-` 或 `J` 的前缀全都更新为 `x-` 或 `X`。
-
-除此之外，无需其他改动。
-
-## 关于版本
-
-`v1` 和 `v2` 不兼容。
-
-- 参数不同
- - `data-index` 改为 `data-id
- - 增加 `unit` 参数，替换之前的 `setHeaderUnit` 方法
- - `label` 改为 `prop`
- - `name` 改为 `label`
-- 插槽不同
- - `xg-gantt-column` 支持多层嵌套，以达到多级表头效果
-- 组件不同
- - 移除了抽屉组件
-
-相较 `v1`，`v2` 更加灵活，更加易用，更加强大。
-
-- 滚动更加流畅，重写了两边的滚动联动效果
-- 支持多级表头
-- 增加了连线模式
-- 调整了进度条的显示方式，移除了改变进度的功能
-
-## 什么是 XGantt
-
-`XGantt` 是一个基于 `vue` 的甘特图表插件，它包含常用的甘特图功能，如：
-
-- [x] 根据日期自动生成甘特图
-- [x] 支持多层扩展
-- [x] 高性能
-- [x] 多层联动
-- [x] 多级选取
-- [x] 支持自定义表内容
-- [x] 支持自定义甘特内容
-- [x] 支持自定义表头
-- [x] 动态更新数据
-- [x] 定制任意风格
-- [x] 支持黑暗模式
-- [x] 支持多种日期显示模式切换
-- [x] 支持表格部分多级表头
-- [x] 支持甘特部分的连线
-- [ ] 更多持续更新
-
-效果展示：
-
-![v2-preview.png]()
-
-## 安装
-
-
-
-
-```bash:no-line-numbers
-yarn add @xpyjs/gantt
-```
-
-
-
-
-
-```bash:no-line-numbers
-npm install @xpyjs/gantt --save
-```
-
-
-
-
-## 引入
-
-XGantt 会被整体引入，引入的 Gantt 就是 XGantt 的根组件。同时需要单独引入样式表，方式如下：
-
-```js
-import Gantt from '@xpyjs/gantt';
-import '@xpyjs/gantt/dist/index.css';
-
-createApp(App).use(Gantt).mount('#app');
-```
-
-## 使用
-
-XGantt 需要一个数组形式的数据对象。例如，您拥有如下数据：
-
-> 确保数组嵌套在 `reactive` 方法中，它可以保证数据的内外响应式。
-
-```js
-
-let id = 0;
-
-const dataList = reactive([]);
-
-function onAdd() {
- dataList.push({
- index: ++id,
- name: 't' + id,
- startDate: new Date(2023, 5, id),
- endDate: new Date(2023, 5, id + 5),
- o: { t1: 'a', t2: 'b' }
- });
-}
-
-for (let i = 0; i < 10; i++) {
- onAdd();
-}
-
-```
-
-那么只需要在 `html` 中简单的使用 XGantt，即可创建一个甘特内容：
-
-```html{2}
-
- :data="dataList"
-/>
-```
-
-如上操作之后，您将看到：
-
-![basic]()
-
-如果没有，请尝试重新操作。
-
-如果它正常显示，请继续深入学习其他属性，以便更好的适应您的页面。
-
-## 支持 TypeScript
-
-XGantt 有完整的 TypeScript 类型声明文件。
-
-如果您需要，只需要在使用中通过：
-
-```js
-import {
- XGanttComponent,
- XGanttColumnComponent,
- XGanttSliderComponent
-} from '@xpyjs/gantt';
-```
-
-按需导入使用即可。如：
-
-![type]()
-
-## 更新日志
-
-[CHANGELOG](https://github.com/xpyjs/gantt/CHANGELOG.md)
+# 入门
+
+
+
+[](https://www.oscs1024.com/project/xpyjs/gantt?ref=badge_small)         
+
+通过入门的章节内容，可以快速了解、引入并使用 XGantt。
+
+::: tip 提示
+这是 vue3 版本的 Gantt 组件，如果需要使用 vue2 版本，请移步 [这里](./vue2/)
+:::
+
+::: tip 演示
+现已提供演示页面，如需要，请移步 [演示页面](https://docs.xiaopangying.com/gantt-demo/)。
+:::
+
+## 十分重要
+
+这个库是 `jz-gantt` 的 vue3 版本的继承库。如果您之前已经使用了 `jz-gantt`，则需要仔细阅读如下内容。
+
+**说明：**
+
+> 这个库的 `1.0.1` 相当于 `jz-gantt@1.3.1`。并且 `jz-gantt` 不再维护。
+
+### 如何迁移
+
+1. 包名不同， `@xpyjs/gantt` 替换了 `jz-gantt`。
+2. 所有以 `j-` 或 `J` 的前缀全都更新为 `x-` 或 `X`。
+
+除此之外，无需其他改动。
+
+## 关于版本
+
+`v1` 和 `v2` 不兼容。
+
+- 参数不同
+ - `data-index` 改为 `data-id
+ - 增加 `unit` 参数，替换之前的 `setHeaderUnit` 方法
+ - `label` 改为 `prop`
+ - `name` 改为 `label`
+- 插槽不同
+ - `xg-gantt-column` 支持多层嵌套，以达到多级表头效果
+- 组件不同
+ - 移除了抽屉组件
+
+相较 `v1`，`v2` 更加灵活，更加易用，更加强大。
+
+- 滚动更加流畅，重写了两边的滚动联动效果
+- 支持多级表头
+- 增加了连线模式
+- 调整了进度条的显示方式，移除了改变进度的功能
+
+## 什么是 XGantt
+
+`XGantt` 是一个基于 `vue` 的甘特图表插件，它包含常用的甘特图功能，如：
+
+- [x] 根据日期自动生成甘特图
+- [x] 支持多层扩展
+- [x] 高性能
+- [x] 多层联动
+- [x] 多级选取
+- [x] 支持自定义表内容
+- [x] 支持自定义甘特内容
+- [x] 支持自定义表头
+- [x] 动态更新数据
+- [x] 定制任意风格
+- [x] 支持黑暗模式
+- [x] 支持多种日期显示模式切换
+- [x] 支持表格部分多级表头
+- [x] 支持甘特部分的连线
+- [ ] 更多持续更新
+
+效果展示：
+
+
+
+## 安装
+
+::: code-group
+
+```bash [YARN]
+yarn add @xpyjs/gantt
+```
+
+```bash [NPM]
+npm install @xpyjs/gantt --save
+```
+
+:::
+
+## 引入
+
+XGantt 会被整体引入，引入的 Gantt 就是 XGantt 的根组件。同时需要单独引入样式表，方式如下：
+
+```js
+import Gantt from '@xpyjs/gantt';
+import '@xpyjs/gantt/dist/index.css';
+
+createApp(App).use(Gantt).mount('#app');
+```
+
+## 使用
+
+XGantt 需要一个数组形式的数据对象。例如，您拥有如下数据：
+
+> 确保数组嵌套在 `reactive` / `ref` 方法中，它可以保证数据的内外响应式。
+
+下面是一个最简单的示例：
+
+:::demo
+
+```vue
+
+
+
+
+
+
+```
+
+:::
+
+如果没有，请尝试重新操作。
+
+如果它正常显示，请继续深入学习其他属性，以便更好的适应您的页面。
+
+## 支持 TypeScript
+
+XGantt 有完整的 TypeScript 类型声明文件。
+
+如果您需要，只需要在使用中通过：
+
+```js
+import {
+ XGanttComponent,
+ XGanttColumnComponent,
+ XGanttSliderComponent
+} from '@xpyjs/gantt';
+```
+
+按需导入使用即可。如：
+
+
+
+## 更新日志
+
+[CHANGELOG](https://github.com/xpyjs/gantt/CHANGELOG.md)
diff --git a/docs/docs/.vuepress/public/assets/basic.png b/docs/docs/public/assets/basic.png
similarity index 100%
rename from docs/docs/.vuepress/public/assets/basic.png
rename to docs/docs/public/assets/basic.png
diff --git a/docs/docs/.vuepress/public/assets/column-basic.png b/docs/docs/public/assets/column-basic.png
similarity index 100%
rename from docs/docs/.vuepress/public/assets/column-basic.png
rename to docs/docs/public/assets/column-basic.png
diff --git a/docs/docs/.vuepress/public/assets/gantt_v0.gif b/docs/docs/public/assets/gantt_v0.gif
similarity index 100%
rename from docs/docs/.vuepress/public/assets/gantt_v0.gif
rename to docs/docs/public/assets/gantt_v0.gif
diff --git a/docs/docs/.vuepress/public/assets/gantt_v1.gif b/docs/docs/public/assets/gantt_v1.gif
similarity index 100%
rename from docs/docs/.vuepress/public/assets/gantt_v1.gif
rename to docs/docs/public/assets/gantt_v1.gif
diff --git a/docs/docs/.vuepress/public/assets/slider-basic.png b/docs/docs/public/assets/slider-basic.png
similarity index 100%
rename from docs/docs/.vuepress/public/assets/slider-basic.png
rename to docs/docs/public/assets/slider-basic.png
diff --git a/docs/docs/.vuepress/public/assets/slider-content.png b/docs/docs/public/assets/slider-content.png
similarity index 100%
rename from docs/docs/.vuepress/public/assets/slider-content.png
rename to docs/docs/public/assets/slider-content.png
diff --git a/docs/docs/.vuepress/public/assets/v1_type.png b/docs/docs/public/assets/v1_type.png
similarity index 100%
rename from docs/docs/.vuepress/public/assets/v1_type.png
rename to docs/docs/public/assets/v1_type.png
diff --git a/docs/docs/.vuepress/public/assets/v2-basic.png b/docs/docs/public/assets/v2-basic.png
similarity index 100%
rename from docs/docs/.vuepress/public/assets/v2-basic.png
rename to docs/docs/public/assets/v2-basic.png
diff --git a/docs/docs/.vuepress/public/assets/v2-multi-header.png b/docs/docs/public/assets/v2-multi-header.png
similarity index 100%
rename from docs/docs/.vuepress/public/assets/v2-multi-header.png
rename to docs/docs/public/assets/v2-multi-header.png
diff --git a/docs/docs/.vuepress/public/assets/v2-preview.png b/docs/docs/public/assets/v2-preview.png
similarity index 100%
rename from docs/docs/.vuepress/public/assets/v2-preview.png
rename to docs/docs/public/assets/v2-preview.png
diff --git a/docs/docs/.vuepress/public/assets/v2-slider-basic.png b/docs/docs/public/assets/v2-slider-basic.png
similarity index 100%
rename from docs/docs/.vuepress/public/assets/v2-slider-basic.png
rename to docs/docs/public/assets/v2-slider-basic.png
diff --git a/docs/docs/root.md b/docs/docs/root.md
index 4e130bf..8f3d9fb 100644
--- a/docs/docs/root.md
+++ b/docs/docs/root.md
@@ -1,3 +1,7 @@
+---
+outline: [2, 4]
+---
+
# 根组件 XGantt
@@ -10,7 +14,9 @@
-数据源，接收数组类型，同时数组中的每一个对象都应当包含 `index`, `startDate`, `endDate` 和 ~~`children`~~ 这些键，确保正确显示数据内容。
+
+
+数据源，接收数组类型，同时数组中的每一个对象都应当包含 `id`, `startDate`, `endDate` 和 ~~`children`~~ 这些键，确保正确显示数据内容。
> `children` 不再是必填项。
@@ -18,8 +24,7 @@
::: tip 提示
-- `index` 确保数据的唯一性，它应对于所有数据全局唯一的。通过 [data-index](#data-index) 替换
-- ~~`children` 可以使数据层级嵌套，如果没有子集，只需要置空即可~~
+- `id` 确保数据的唯一性，它应对于所有数据全局唯一的。通过 [data-id](#data-id) 替换
- `startDate` 可以在甘特图中正确渲染数据的起始日期。通过 [start-key](#start-key) 替换
- `endDate` 可以在甘特图中正确渲染数据的截止日期。通过 [end-key](#end-key) 替换
@@ -33,38 +38,6 @@
:::
-### links
-
-
-
-数据的连线数据。接收数组类型，数组中的每一个对象都应当包含 `from`, `to`，确保正确显示数据内容。
-
-例如：
-
-```js
-const ganttLinks = reactive([
- {
- index: 1,
- from: 1,
- to: 2,
- color: 'green'
- },
- {
- index: 2,
- from: 2,
- to: 5
- },
- {
- index: 3,
- from: 4,
- to: 3,
- color: '#abc'
- }
-]);
-```
-
-如上，`from` 和 `to` 属性是必须的，这两个字段的值应当对应 `data` 中的 `data-id` 值。`color` 是可选的，可以设置连线的颜色。
-
### ~~data-index~~
@@ -92,13 +65,15 @@ const ganttLinks = reactive([
它对应数据中起始日期的键，默认值为 `endDate`。如果找不到，则不会渲染甘特图中的内容。
-### expand-all
+### links
-
+
-是否展开所有数据，默认为展开。如果设置为 `false`，则只会渲染首层数据。
+数据的连线数据。接收数组类型，数组中的每一个对象都应当包含 `from`, `to`，确保正确显示数据内容。
-**请注意**，当且仅当属性 [`show-expand`](#show-expand) 为真时，该属性才会生效，否则所有数据一定会被全部展开渲染。
+
+
+如上，`from` 和 `to` 属性是必须的，这两个字段的值应当对应 `data` 中的 `data-id` 值。`color` 是可选的，可以设置连线的颜色。
### start-key
@@ -116,6 +91,8 @@ const ganttLinks = reactive([
:::
+
+
### body-style
@@ -214,6 +191,16 @@ const ganttLinks = reactive([
它允许您将数据任意排序，但不允许拖拽具有子父关系的数据。
+### expand-all
+
+
+
+是否展开所有数据，默认为展开。如果设置为 `false`，则只会渲染首层数据。
+
+
+
+**请注意**，当且仅当属性 [`show-expand`](#show-expand) 为真时，该属性才会生效，否则所有数据一定会被全部展开渲染。
+
### header-height
@@ -504,21 +491,9 @@ const onAddLink = (
根组件不支持插入默认内容，它仅仅支持如下的具名插槽或者我们提供的子组件。
-### settings
+### ~~settings~~
-_我不知道这个插槽是否真正需要，但还是把它添加了。_
-
-这个插槽会允许您在设置抽屉中添加任意内容。
-
-使用方式：
-
-```html
-
-
-
-
-
-```
+该插槽已移除
### 列组件
diff --git a/docs/docs/slider.md b/docs/docs/slider.md
index 68ef534..6faf2c5 100644
--- a/docs/docs/slider.md
+++ b/docs/docs/slider.md
@@ -18,13 +18,10 @@
基于入门的示例，您现在应该拥有一个列，那么您可以继续这样使用：
-```html{6}
-
-
-
+```html{3}
+
+
+
```
@@ -32,7 +29,7 @@
它将显示成如下内容：
-![slider-basic]()
+
## 属性
@@ -42,12 +39,22 @@
设置内容对齐方式。接收字符串：`left`、`center` 或 `right`。
+
+
### allow-link
是否允许创建、修改连线。如果设置为 false，仅仅是不可以从当前 slider 创建连线，而不会影响已有连线的展示。
+::: tip 说明
+
+添加连线需要根组件的 [`add-link`](./root.html#add-link) 事件配合。它可以完全自定义添加的连线内容。
+
+:::
+
+
+
### bg-color
@@ -82,15 +89,11 @@
### ~~flat~~
-~~~~
-
-~~设置滑块样式是否扁平化。~~
+该属性已移除。
### ~~highlight-date~~
-~~~~
-
-~~允许鼠标悬停高亮表头对应日期~~
+该属性已移除。
::: tip 提示
@@ -108,10 +111,6 @@
-~~设置需要显示的内容字段。默认没有该属性情况下显示默认数据，即 `empty-data` 字段内容。~~
-
-~~如果您提供了插槽内容，则无论您是否提供了 `label` 属性，都将用插槽的内容进行替换。更多信息请查看 [插槽](#插槽) 。~~
-
该属性的值会直接显示在滑块组件内，它之前的功能被 [prop](#prop) 属性所替代，同时，`label` 的优先级要比 `prop` 更高。如果您需要显示更多内容，可以使用插槽。
### linked-resize
@@ -136,6 +135,8 @@
如果设置了 `true`，则意味着滑块可以被任意拖动。当拖动结束时，修改数据，同时会抛出 [`move-slider`](./root.html#move-slider) 事件。
+
+
### move-by-unit
@@ -156,6 +157,8 @@
同时，如果您自定义了滑块插槽，那么无论您是否开启了进度条，都不会显示这个功能。
+
+
### progress-color
@@ -170,18 +173,18 @@
### progress-decimal
-### prop
-
-
-
-`prop` 是一个重要的属性，它应当对应您给出数据的某一个键名。
-
允许自定义进度条数值位数，默认只显示整数，通过传递 `true` 值，可以启动默认 2 位的小数。
也可以传递一个数字（范围：[0, 10]）来自定义显示位数。
+### prop
+
+
+
+`prop` 是一个重要的属性，它应当对应您给出数据的某一个键名。
+
### resize-left
@@ -220,13 +223,7 @@
一个简单的示例：
-```html
-
-
- {{ row.name }}
-
-
-```
+
::: tip 提示
`default` 插槽会包含一定样式，如果您想尝试完全替换现有的滑块内容，那么下面的内容将会更适合。
@@ -240,17 +237,7 @@
一个简单的示例：
-```html
-
-
-
- {{ row.name }} - {{ row.index }}
-
-
-
-```
+
::: warning 注意
@@ -268,32 +255,7 @@
一个简单的示例：
-```html
-
-
-
- {{ row.name }} - {{ row.index }}
-
-
-
-
-
-
-
-
-
-
-
-```
+
::: tip 提示
@@ -321,8 +283,4 @@ border-right-bottom-radius: 4px;
它的功能与 `left` 插槽一致，仅仅是将 `left` 更换为 `right` 即可，参数与功能完全一致，不再赘述。
-上述示例的效果如下：
-
-![slider-content]()
-
恭喜您，您现在已经可以完全自定义属于您的甘特图组件了。
diff --git a/docs/docs/vue2/column.md b/docs/docs/vue2/column.md
index 7cb9711..e10473e 100644
--- a/docs/docs/vue2/column.md
+++ b/docs/docs/vue2/column.md
@@ -23,7 +23,7 @@
它将显示成如下内容：
-![column-basic]()
+
## 属性
diff --git a/docs/docs/vue2/README.md b/docs/docs/vue2/index.md
similarity index 93%
rename from docs/docs/vue2/README.md
rename to docs/docs/vue2/index.md
index 07af0a9..b054bab 100644
--- a/docs/docs/vue2/README.md
+++ b/docs/docs/vue2/index.md
@@ -1,163 +1,163 @@
-# 入门
-
-
-
-
-
-通过入门的章节内容，可以快速了解、引入并使用 XGantt。
-
-## vue2 使用问题，使用前阅读，特别重要
-
-********************************
-
-`vue2.6.x` 与 `vue2.7.x` 版本不兼容，本项目使用 `vue2.6.14` 开发，请勿在 `vue2.7.x` 下使用。
-
-同时，由于 npm 升级机制原因，请修改依赖版本为固定：
-
-```json
-"vue": "2.6.14",
-"vue-template-compiler": "2.6.14"
-```
-
-以上，能够解决初始化报错问题，详见 [ISSUE](https://github.com/xpyjs/gantt-vue2/issues/5)
-
-********************************
-
-## 十分重要
-
-这个库是 `jz-gantt` 的 vue2 版本的继承库。如果您之前已经使用了 `jz-gantt`，则需要仔细阅读如下内容。
-
-**说明：**
-
-> - `jz-gantt` vue2 版本（v0.0.17）已经被弃用。
-> - 本项目完全重写。基于 `vue3` 代码，支持内容到 `1.3.1`，但不再更新内容，只做基本维护。如需更新内容，请使用 vue3 版本，或者自行更新。
-> - 另外，如果您 fork 并提交了代码，我检测后会合并到主分支，并更新版本内容。
-
-### 如何迁移
-
-1. 包名不同， `@xpyjs/gantt-vue2` 替换了 `jz-gantt`。
-2. 所有以 `j-` 或 `J` 的前缀全都更新为 `x-` 或 `X`。
-
-除此之外，无需其他改动。
-
-## 什么是 XGantt
-
-`XGantt` 是一个基于 `vue` 的甘特图表插件，它包含常用的甘特图功能，如：
-
-- [x] 根据日期自动生成甘特图
-- [x] 支持多层扩展
-- [x] 高性能
-- [x] 多层联动
-- [x] 多级选取
-- [x] 支持自定义表内容
-- [x] 支持自定义甘特内容
-- [x] 支持自定义表头
-- [x] 动态更新数据
-- [x] 定制任意风格
-- [x] 支持黑暗模式
-- [x] 支持多种日期显示模式切换
-- [ ] 更多持续更新
-
-*动图展示*：
-
-![gif]()
-
-## 安装
-
-使用 `npm` 安装：
-
-
-
-
-```bash:no-line-numbers
-yarn add @xpyjs/gantt-vue2
-```
-
-
-
-
-
-```bash:no-line-numbers
-npm install @xpyjs/gantt-vue2 --save
-```
-
-
-
-
-## 引入
-
-XGantt 会被整体引入，同时需要单独引入样式表，方式如下：
-
-```js
-import Vue from "vue";
-import XGantt from "@xpyjs/gantt-vue2";
-import '@xpyjs/gantt-vue2/lib/index.css';
-
-Vue.use(XGantt);
-```
-
-## 使用
-
-XGantt 需要一个数组形式的数据对象。例如，您拥有如下数据：
-
-```js
-const dataList = [
- {
- index: 1,
- startDate: "2020-06-05",
- endDate: "2020-08-20",
- ttt: {
- a: "aaa",
- b: "bbb"
- },
- name: "mydata1",
- children: [] // children 是必须的，如果没有，给一个空数组即可
- },
- {
- index: 2,
- startDate: "2020-07-07",
- endDate: "2020-09-11",
- ttt: {},
- name: "mydata2",
- children: [
- {
- index: 3,
- startDate: "2020-07-10",
- endDate: "2020-08-15",
- ttt: {
- a: "aaa"
- },
- name: "child1",
- children: [] // children 是必须的，如果没有，给一个空数组即可
- }
- ]
- }
-];
-```
-
-那么只需要在 `html` 中简单的使用 XGantt，即可创建一个甘特内容：
-
-```html{2}
-
- :data="dataList">
-
-```
-
-如上操作之后，您将看到：
-
-![basic]()
-
-如果没有，请尝试重新操作。
-
-如果它正常显示，请继续深入学习其他属性，以便更好的适应您的页面。
-
-## 支持 TypeScript
-
-XGantt 已经有了完整的 TypeScript 类型声明文件，如果您需要，只需要在使用中通过：
-
-```js
-import { XGantt, XGanttColumn, XGanttSlider } from "@xpyjs/gantt-vue2";
-```
-
-按需导入即可。
+# 入门
+
+
+
+
+
+通过入门的章节内容，可以快速了解、引入并使用 XGantt。
+
+## vue2 使用问题，使用前阅读，特别重要
+
+********************************
+
+`vue2.6.x` 与 `vue2.7.x` 版本不兼容，本项目使用 `vue2.6.14` 开发，请勿在 `vue2.7.x` 下使用。
+
+同时，由于 npm 升级机制原因，请修改依赖版本为固定：
+
+```json
+"vue": "2.6.14",
+"vue-template-compiler": "2.6.14"
+```
+
+以上，能够解决初始化报错问题，详见 [ISSUE](https://github.com/xpyjs/gantt-vue2/issues/5)
+
+********************************
+
+## 十分重要
+
+这个库是 `jz-gantt` 的 vue2 版本的继承库。如果您之前已经使用了 `jz-gantt`，则需要仔细阅读如下内容。
+
+**说明：**
+
+> - `jz-gantt` vue2 版本（v0.0.17）已经被弃用。
+> - 本项目完全重写。基于 `vue3` 代码，支持内容到 `1.3.1`，但不再更新内容，只做基本维护。如需更新内容，请使用 vue3 版本，或者自行更新。
+> - 另外，如果您 fork 并提交了代码，我检测后会合并到主分支，并更新版本内容。
+
+### 如何迁移
+
+1. 包名不同， `@xpyjs/gantt-vue2` 替换了 `jz-gantt`。
+2. 所有以 `j-` 或 `J` 的前缀全都更新为 `x-` 或 `X`。
+
+除此之外，无需其他改动。
+
+## 什么是 XGantt
+
+`XGantt` 是一个基于 `vue` 的甘特图表插件，它包含常用的甘特图功能，如：
+
+- [x] 根据日期自动生成甘特图
+- [x] 支持多层扩展
+- [x] 高性能
+- [x] 多层联动
+- [x] 多级选取
+- [x] 支持自定义表内容
+- [x] 支持自定义甘特内容
+- [x] 支持自定义表头
+- [x] 动态更新数据
+- [x] 定制任意风格
+- [x] 支持黑暗模式
+- [x] 支持多种日期显示模式切换
+- [ ] 更多持续更新
+
+*动图展示*：
+
+
+
+## 安装
+
+使用 `npm` 安装：
+
+
+
+
+```bash:no-line-numbers
+yarn add @xpyjs/gantt-vue2
+```
+
+
+
+
+
+```bash:no-line-numbers
+npm install @xpyjs/gantt-vue2 --save
+```
+
+
+
+
+## 引入
+
+XGantt 会被整体引入，同时需要单独引入样式表，方式如下：
+
+```js
+import Vue from "vue";
+import XGantt from "@xpyjs/gantt-vue2";
+import '@xpyjs/gantt-vue2/lib/index.css';
+
+Vue.use(XGantt);
+```
+
+## 使用
+
+XGantt 需要一个数组形式的数据对象。例如，您拥有如下数据：
+
+```js
+const dataList = [
+ {
+ index: 1,
+ startDate: "2020-06-05",
+ endDate: "2020-08-20",
+ ttt: {
+ a: "aaa",
+ b: "bbb"
+ },
+ name: "mydata1",
+ children: [] // children 是必须的，如果没有，给一个空数组即可
+ },
+ {
+ index: 2,
+ startDate: "2020-07-07",
+ endDate: "2020-09-11",
+ ttt: {},
+ name: "mydata2",
+ children: [
+ {
+ index: 3,
+ startDate: "2020-07-10",
+ endDate: "2020-08-15",
+ ttt: {
+ a: "aaa"
+ },
+ name: "child1",
+ children: [] // children 是必须的，如果没有，给一个空数组即可
+ }
+ ]
+ }
+];
+```
+
+那么只需要在 `html` 中简单的使用 XGantt，即可创建一个甘特内容：
+
+```html{2}
+
+ :data="dataList">
+
+```
+
+如上操作之后，您将看到：
+
+
+
+如果没有，请尝试重新操作。
+
+如果它正常显示，请继续深入学习其他属性，以便更好的适应您的页面。
+
+## 支持 TypeScript
+
+XGantt 已经有了完整的 TypeScript 类型声明文件，如果您需要，只需要在使用中通过：
+
+```js
+import { XGantt, XGanttColumn, XGanttSlider } from "@xpyjs/gantt-vue2";
+```
+
+按需导入即可。
diff --git a/docs/docs/vue2/slider.md b/docs/docs/vue2/slider.md
index 8f96ce9..a6c1391 100644
--- a/docs/docs/vue2/slider.md
+++ b/docs/docs/vue2/slider.md
@@ -32,7 +32,7 @@
它将显示成如下内容：
-![slider-basic]()
+
## 属性
@@ -234,6 +234,6 @@
上述示例的效果如下：
-![slider-content]()
+
恭喜您，您现在已经可以完全自定义属于您的甘特图组件了。
diff --git a/docs/docs/vue3-v1/column.md b/docs/docs/vue3-v1/column.md
index f984f7e..67fdf26 100644
--- a/docs/docs/vue3-v1/column.md
+++ b/docs/docs/vue3-v1/column.md
@@ -23,7 +23,7 @@
它将显示成如下内容：
-![column-basic]()
+
## 属性
diff --git a/docs/docs/vue3-v1/README.md b/docs/docs/vue3-v1/index.md
similarity index 96%
rename from docs/docs/vue3-v1/README.md
rename to docs/docs/vue3-v1/index.md
index 69f0320..be54a92 100644
--- a/docs/docs/vue3-v1/README.md
+++ b/docs/docs/vue3-v1/index.md
@@ -51,7 +51,7 @@
_动图展示_：
-![gif]()
+
## 安装
@@ -136,7 +136,7 @@ const dataList = reactive([
如上操作之后，您将看到：
-![basic]()
+
如果没有，请尝试重新操作。
@@ -158,7 +158,7 @@ import {
按需导入使用即可。如：
-![type]()
+
## 更新日志
diff --git a/docs/docs/vue3-v1/slider.md b/docs/docs/vue3-v1/slider.md
index 31678e7..6d9a6b5 100644
--- a/docs/docs/vue3-v1/slider.md
+++ b/docs/docs/vue3-v1/slider.md
@@ -32,7 +32,7 @@
它将显示成如下内容：
-![slider-basic]()
+
## 属性
@@ -240,6 +240,6 @@
上述示例的效果如下：
-![slider-content]()
+
恭喜您，您现在已经可以完全自定义属于您的甘特图组件了。
diff --git a/docs/package.json b/docs/package.json
index 7684551..7b423cd 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,16 +1,15 @@
-{
- "name": "gantt-doc",
- "version": "2.0.1",
- "description": "xpyjs gantt document",
- "main": "index.js",
- "author": "jeremyjone ",
- "license": "MIT",
- "scripts": {
- "docs:dev": "vuepress dev docs",
- "docs:build": "vuepress build docs"
- },
- "devDependencies": {
- "@vuepress/plugin-register-components": "2.0.0-beta.53",
- "vuepress": "2.0.0-beta.53"
- }
+{
+ "scripts": {
+ "docs:dev": "vitepress dev docs",
+ "docs:build": "vitepress build docs",
+ "docs:preview": "vitepress preview docs"
+ },
+ "devDependencies": {
+ "postcss": "8.4.38",
+ "vitepress": "1.2.3",
+ "vitepress-theme-demoblock": "3.0.7"
+ },
+ "dependencies": {
+ "@xpyjs/gantt": "^2.1.7"
+ }
}
\ No newline at end of file