docs: 添加 vue 版的下钻组件 (#1530)

antvis · Jul 8, 2022 · 4d2c256 · 4d2c256
1 parent 2913ce9
commit 4d2c256
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 25 deletions.
diff --git a/s2-site/docs/api/components/drill-down.zh.md b/s2-site/docs/api/components/drill-down.zh.md
@@ -5,19 +5,60 @@ order: 2
 
 # React 下钻组件
 
+```jsx
+const s2Options = {
+  width: 600,
+  height: 480,
+  hierarchyType: 'tree', // 树形结构
+};
+
+<SheetComponent
+  options={s2Options}
+  partDrillDown={PartDrillDown}
+  sheetType="pivot"  // 透视模式
+/>
+```
+
+📊 查看 [React 版下钻 demo](/zh/examples/react-component/drill-dwon#for-pivot)
+
+# Vue 下钻组件
+
+下钻组件只有在表格，透视模式才能使用。
+
+```vue
+const s2Options = {
+  width: 600,
+  height: 480,
+  hierarchyType: 'tree',
+};
+
+<template>
+ <SheetComponent
+    ref="s2"
+    :sheetType="pivot"
+    :partDrillDown="partDrillDown"
+    :options="s2Options"
+  />
+</template>
+```
+
+📊 查看 [Vue 版下钻 demo](https://codesandbox.io/s/vue-drilldown-demo-8p1lmv?file=/src/App.vue:6385-6396)
+
+# 公共 API
+
+<description>功能描述：配置维度下钻，当前仅支持透视模式的树形结构下，行头维度下钻</description>
+
 ## PartDrillDown
 
 类型：`object`，**可选**，默认值：`{}`
 
-<description>功能描述：配置维度下钻，当前仅支持树形模式下的行头维度下钻</description>
-
-| 参数 | 说明 | 类型 | 默认值 | 必选 |
-| --- | --- | --- | --- | --- |
-| drillConfig | 下钻菜单组件配置项 | [DrillDownProps](#drilldownprops) | - | ✓ |
-| drillItemsNum | 下钻完成后展示的个数，默认全部展示 | `number` | -1 |  |
-| fetchData | 点击下钻后的回调 | [FetchCallBack](#fetchcallback) | - | ✓ |
-| clearDrillDown | 清除下钻信息，当有指定的 rowId 传递时清除对应 rowId 的下钻信息；如果参数是 空对象 {}，则清空所有的下钻信息 | `{rowId: string;}` | - |  |
-| displayCondition | 配置下钻 `icon` 的展示条件， 同 HeaderActionIcon | `(meta: Node) => boolean` | - |  |
+| 参数 | 说明 | 类型 | 默认值 | 必选 | 备注                |
+| --- | --- | --- | --- | --- |-------------------|
+| drillConfig | 下钻菜单组件配置项 | [DrillDownProps](#drilldownprops) | - | ✓ |                   |
+| drillItemsNum | 下钻完成后展示的个数，默认全部展示 | `number` | -1 |  |                   |
+| fetchData | 点击下钻后的回调 | [FetchCallBack](#fetchcallback) | - | ✓ |                   |
+| clearDrillDown | 清除下钻信息，当有指定的 rowId 传递时清除对应 rowId 的下钻信息；如果参数是 空对象 {}，则清空所有的下钻信息 | `{rowId: string;}` | - |  | 仅 `React` 组件支持此属性 |
+| displayCondition | 配置下钻 `icon` 的展示条件， 同 HeaderActionIcon | `(meta: Node) => boolean` | - |  | 仅 `React` 组件支持此属性 |
 
 注意：PartDrillDown 中 `drillConfig`、`displayCondition` 字段会影响下钻模式的重渲，请注意使用 memo 或 state 控制其可变性。
 
@@ -46,18 +87,18 @@ order: 2
 
 <description>功能描述：下钻菜单组件配置项</description>
 
-| 参数 | 说明 | 类型 | 默认值 | 必选 |
-| --- | --- | --- | --- | --- |
-| dataSet | 下钻数据源配置 | [DataSet[]](#dataset) |  | ✓ |
-| className | 透传样式名 | `string` |  |  |
-| titleText | 标题 | `string` |  |  |
-| searchText | 搜索框文案 | `string` |  |  |
-| clearButtonText | 重置按钮文案 | `string` |  |  |
-| extra | 自定义插入的节点（插入在搜索框和下钻菜单中间） | `ReactNode` |  |  |
-| drillFields | 允许下钻的维度 | `string[]` |  |  |
-| disabledFields | 不允许下钻的维度 | `string[]` |  |  |
-| getDrillFields | 内部获取当前下钻维度的回调 | `Function` |  |  |
-| setDrillFields | 内部设置当前下钻维度的回调 | `Function` |  |  |
+| 参数 | 说明                                    | 类型 | 默认值 | 必选 | 备注 |
+| --- |---------------------------------------| --- | --- | --- | ---  |
+| dataSet | 下钻数据源配置                               | [DataSet[]](#dataset) |  | ✓ |  |
+| className | 透传样式名                                 | `string` |  |  |  |
+| titleText | 标题                                    | `string` |  |  |  |
+| searchText | 搜索框文案                                 | `string` |  |  |  |
+| clearButtonText | 重置按钮文案                                | `string` |  |  |  |
+| disabledFields | 不允许下钻的维度                              | `string[]` |  |  |  |
+| getDrillFields | 内部获取当前下钻维度的回调                         | `Function` |  |  |  |
+| setDrillFields | 内部设置当前下钻维度的回调                         | `Function` |  |  |  |
+| extra | 自定义插入的节点，插入在搜索框和下钻菜单中间 | `ReactNode` |  |  | 仅 `React` 组件支持此属性 |
+| drillFields | 允许下钻的维度      | `string[]` |  |  | 仅 `React` 组件支持此属性  |
 
 #### DataSet
 
@@ -72,7 +113,3 @@ order: 2
 | type | 维度类型, 不同类型对应 icon 不同 | `text` \| `location` \| `date` |  |  |
 | disabled | 是否允许选择 | `boolean` |  |  |
 | icon | 列表 item 的 icon | `React.ReactNode` |  |  |
-
-# Vue 下钻组件
-
-开发中，敬请期待
diff --git a/s2-site/docs/manual/basic/analysis/vue.zh.md b/s2-site/docs/manual/basic/analysis/vue.zh.md
@@ -43,6 +43,15 @@ order: 13
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
    ></iframe>
 
+### Vue 组件下钻 demo
+
+<iframe src="https://codesandbox.io/embed/vue-drilldown-demo-8p1lmv?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="vue-drilldown-demo"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
+
 ## 布局
 
 ### Vue 组件自适应 demo