@opentiny/vue-docs 1.0.2 → 1.0.4

package/resources/pc/demo-config/zh-CN/grid-tree-grid.json

@@ -1 +1,114 @@
-[{"title":"有子级的数据结构","content":"<p>在 grid 标签上配置 tree-config=&quot;{children: 'children'}&quot;以树的形式来展示数据,还需要在展示树节点的字段上配置 tree-node 属性</p>\n","link":"grid/tree-table/tree-grid-base","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-base"},{"title":"扁平化数据结构","content":"<p>注意：扁平化的数据结构需要调用 aggregateTableData 方法把数据转换成带有子级的数据才能正常的显示出树表的结构</p>\n","link":"grid/tree-table/tree-grid-data","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-data"},{"title":"操作列","content":"<p>列通过配置 type=&quot;radio&quot; 实现单选，配置 type=&quot;selection&quot; 实现多选</p>\n","link":"grid/tree-table/tree-grid-operation-column","component":" 树表","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-operation-column"},{"title":"手动展开所有树节点","content":"<p><code>setAllTreeExpansion(checked)</code> 可设置所有树节点的展开与否。</p>\n","link":"grid/methods/set-all-tree-expansion","component":" 树表","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"methods-set-all-tree-expansion"},{"title":"手动展开指定树节点","content":"<p><code>setTreeExpansion(rows, checked)</code> 可设置展开指定的树形节点，第二个参数设置这一行展开与否。</p>\n","link":"grid/methods/set-tree-expansion","component":" 树表","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"methods-set-tree-expansion"},{"title":"手动切换展开树形节点","content":"<p><code>toggleTreeExpansion(row)</code> 可设置切换展开树形节点。</p>\n","link":"grid/methods/toggle-tree-expansion","component":" 树表","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"methods-toggle-tree-expansion"},{"title":"冻结列","content":"<p>在列的标签上可以通过配置 fixed=&quot;left&quot; 属性把该列固定在左侧，配置 fixed=&quot;right&quot; 属性把该列固定在右侧</p>\n","link":"grid/tree-table/tree-grid-fixed-column","component":" 树表","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-fixed-column"},{"title":"展开行","content":"<p>在 column 标签上配置 type=&quot;expand&quot; 展开行,可以通过 v-slot 插槽插入需要的模板信息</p>\n","link":"grid/tree-table/tree-grid-expand","component":" 树表","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-expand"},{"title":"检查树节点是否已展开","content":"<p>通过 <code>hasTreeExpand(row)</code> 方法可以检查树节点是否已展开，参数 row 为行数据对象。</p>\n","link":"grid/tree-table/hasTreeExpand","component":" 树表","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tree-table-hasTreeExpand"},{"title":"展开行序号列配置","content":"<p>在 <code>treeConfig</code> 属性里配置 <code>ordered</code> 为 <code>false</code> 展开行，序号列按父子级的结构排序。默认 <code>ordered</code> 属性为 <code>true</code> 展开行后序号列按序号排序。</p>\n","link":"grid/tree-table/tree-grid-index","component":" 树表","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-index"},{"title":"基本用法","content":"<p>表格属性 <code>expand-config</code> 设置展开行配置项。</p>\n","link":"grid/tree-table/tree-grid-expand-config","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-expand-config"},{"title":"增删改","content":"<p>在 grid-toolbar 标签上配置 slot=&quot;toolbar&quot; 插槽，配置相关的操作按钮 ，注意：新增数据需要在 grid 标签上配置 edit-config 编辑框的配置信息，并通过 ref 获取到组件实例调用方法进行相关操作，findTree、filterTree 是工具类里的查找和过滤方法。由于tree数据节构的特殊性，grid的<code>getInsertRecords</code>与<code>getRecordset</code>方法无法获取到新增数据，此类数据需要用户自行处理。</p>\n","link":"grid/tree-table/tree-grid-insert-delete-update","component":" 树表","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-insert-delete-update"},{"title":"键盘操作","content":"<p>键盘移动高亮行,设置斑马线属性 stripe 为 false,鼠标悬停高亮行 highlight-hover-row 为 false,高亮当前行 highlight-current-row ,并配置 keyboard-config={isArrow: true} 属性启用方向键功能\n | Arrow Up ↑ | 移动到高亮行的上一行\n | Arrow Down ↓ | 移动到高亮行的下一行\n | Enter | 展开节点，进入子节点\n | Backspace | 关闭节点，返回到父节点</p>\n","link":"grid/tree-table/tree-grid-keyboard-operation","component":" 树表","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-keyboard-operation"}]
+[
+  {
+    "title": "有子级的数据结构",
+    "content": "<p>在 grid 标签上配置 tree-config=&quot;{children: 'children'}&quot;以树的形式来展示数据,还需要在展示树节点的字段上配置 tree-node 属性</p>\n",
+    "link": "grid/tree-table/tree-grid-base",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tree-table-tree-grid-base"
+  },
+  {
+    "title": "扁平化数据结构",
+    "content": "<p>注意：扁平化的数据结构需要调用 aggregateTableData 方法把数据转换成带有子级的数据才能正常的显示出树表的结构</p>\n",
+    "link": "grid/tree-table/tree-grid-data",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tree-table-tree-grid-data"
+  },
+  {
+    "title": "操作列",
+    "content": "<p>列通过配置 type=&quot;radio&quot; 实现单选，配置 type=&quot;selection&quot; 实现多选</p>\n",
+    "link": "grid/tree-table/tree-grid-operation-column",
+    "component": " 树表",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tree-table-tree-grid-operation-column"
+  },
+  {
+    "title": "手动展开所有树节点",
+    "content": "<p><code>setAllTreeExpansion(checked)</code> 可设置所有树节点的展开与否。</p>\n",
+    "link": "grid/methods/set-all-tree-expansion",
+    "component": " 树表",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "methods-set-all-tree-expansion"
+  },
+  {
+    "title": "手动展开指定树节点",
+    "content": "<p><code>setTreeExpansion(rows, checked)</code> 可设置展开指定的树形节点，第二个参数设置这一行展开与否。</p>\n",
+    "link": "grid/methods/set-tree-expansion",
+    "component": " 树表",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "methods-set-tree-expansion"
+  },
+  {
+    "title": "手动切换展开树形节点",
+    "content": "<p><code>toggleTreeExpansion(row)</code> 可设置切换展开树形节点。</p>\n",
+    "link": "grid/methods/toggle-tree-expansion",
+    "component": " 树表",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "methods-toggle-tree-expansion"
+  },
+  {
+    "title": "冻结列",
+    "content": "<p>在列的标签上可以通过配置 fixed=&quot;left&quot; 属性把该列固定在左侧，配置 fixed=&quot;right&quot; 属性把该列固定在右侧</p>\n",
+    "link": "grid/tree-table/tree-grid-fixed-column",
+    "component": " 树表",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tree-table-tree-grid-fixed-column"
+  },
+  {
+    "title": "展开行",
+    "content": "<p>在 column 标签上配置 type=&quot;expand&quot; 展开行,可以通过 v-slot 插槽插入需要的模板信息</p>\n",
+    "link": "grid/tree-table/tree-grid-expand",
+    "component": " 树表",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tree-table-tree-grid-expand"
+  },
+  {
+    "title": "检查树节点是否已展开",
+    "content": "<p>通过 <code>hasTreeExpand(row)</code> 方法可以检查树节点是否已展开，参数 row 为行数据对象。</p>\n",
+    "link": "grid/tree-table/hasTreeExpand",
+    "component": " 树表",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tree-table-hasTreeExpand"
+  },
+  {
+    "title": "展开行序号列配置",
+    "content": "<p>在 <code>treeConfig</code> 属性里配置 <code>ordered</code> 为 <code>false</code> 展开行，序号列按父子级的结构排序。默认 <code>ordered</code> 属性为 <code>true</code> 展开行后序号列按序号排序。</p>\n",
+    "link": "grid/tree-table/tree-grid-index",
+    "component": " 树表",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tree-table-tree-grid-index"
+  },
+  {
+    "title": "基本用法",
+    "content": "<p>表格属性 <code>expand-config</code> 设置展开行配置项。</p>\n",
+    "link": "grid/tree-table/tree-grid-expand-config",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tree-table-tree-grid-expand-config"
+  },
+  {
+    "title": "增删改",
+    "content": "<p>在 grid-toolbar 标签上配置 slot=&quot;toolbar&quot; 插槽，配置相关的操作按钮 ，注意：新增数据需要在 grid 标签上配置 edit-config 编辑框的配置信息，并通过 ref 获取到组件实例调用方法进行相关操作，findTree、filterTree 是工具类里的查找和过滤方法。由于tree数据节构的特殊性，grid的<code>getInsertRecords</code>与<code>getRecordset</code>方法无法获取到新增数据，此类数据需要用户自行处理。</p>\n",
+    "link": "grid/tree-table/tree-grid-insert-delete-update",
+    "component": " 树表",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tree-table-tree-grid-insert-delete-update"
+  },
+  {
+    "title": "键盘操作",
+    "content": "<p>键盘移动高亮行,设置斑马线属性 stripe 为 false,鼠标悬停高亮行 highlight-hover-row 为 false,高亮当前行 highlight-current-row ,并配置 keyboard-config={isArrow: true} 属性启用方向键功能\n | Arrow Up ↑ | 移动到高亮行的上一行\n | Arrow Down ↓ | 移动到高亮行的下一行\n | Enter | 展开节点，进入子节点\n | Backspace | 关闭节点，返回到父节点</p>\n",
+    "link": "grid/tree-table/tree-grid-keyboard-operation",
+    "component": " 树表",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tree-table-tree-grid-keyboard-operation"
+  },
+  {
+    "title": "自定义展开和隐藏行",
+    "content": "<p>表格属性 <code>expandConfig.activeMethod</code> 配置一个方法控制行是否可展开，参数为 <code>row</code> 和 <code>rowLevel</code>，返回 <code>false</code> 则此行不可展开，且不显示展开图标\n表格属性 <code>expandConfig.showIcon</code> 配置是否显示展开图标，默认为 <code>true</code> 表示显示展开图标\n表格属性 <code>treeConfig.hideMethod</code> 配置一个方法控制行是否渲染，参数为 <code>row</code> 和 <code>rowLevel</code>，返回 <code>true</code> 则此行隐藏不渲染</p>\n",
+    "link": "grid/tree-table/tree-grid-expand-active-method",
+    "component": " 树表",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tree-table-tree-grid-expand-active-method"
+  }
+]

package/resources/pc/demo-config/zh-CN/grid-validation.json

@@ -1 +1,82 @@
-[{"title":"编辑时校验","content":"<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则。具体参考下面示例。</p>\n","link":"grid/grid_Example/gridValid/editing-validation","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-editing-validation"},{"title":"隐藏列编辑时校验","content":"<p>grid 标签配置 edit-config 对象且列配置type：visible 且配置isValidAlways属性时, 即列总是显示可编辑状态时，支持编辑时校验,并配置 edit-rules 对象来设置校验对象和校验规则。具体参考下面示例。</p>\n","link":"grid/grid_Example/gridValid/editing-isvalidalways-validation","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-editing-isvalidalways-validation"},{"title":"数据关联校验","content":"<p>在自定义校验时，<code>validator</code>方法<code>rule</code>参数中可获取到当前行与列的信息。可以按业务的需求实现数据关联的校验逻辑</p>\n","link":"grid/grid_Example/gridValid/row-data-valid","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-row-data-valid"},{"title":"自定义组件与插槽编辑器校验","content":"<p>在使用自定义组件时，组件需要实现<code>v-model</code>的功能。在使用插槽时想要实时校验需要手动触发组件的校验方法</p>\n","link":"grid/grid_Example/gridValid/custcomp","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-custcomp"},{"title":"选中时校验","content":"<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。</p>\n","link":"grid/grid_Example/gridValid/select-validation","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-select-validation"},{"title":"提交前校验","content":"<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。</p>\n","link":"grid/grid_Example/gridValid/before-submit-validation","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-before-submit-validation"},{"title":"触发校验时自动定位到当前校验的单元格","content":"<p>grid 编辑器引入 tiny.0 组件，标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。</p>\n","link":"grid/grid_Example/gridValid/validation-scroll-to-col","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-validation-scroll-to-col"},{"title":"错误提示配置项","content":"<p>表格默认错误提示显示在 <code>body</code> 上， 可以通过设置 <code>tooltip-config</code> 的 <code>appendTobody</code> 设置为 <code>false</code> 来解决页面滚动时tip位置错误的问题。设置 <code>placement</code> 属性调整默认显示方向。<code>tooltip-config</code> 的配置可参参考 tooltip 组件</p>\n","link":"grid/grid_Example/gridValid/tipconfig","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-tipconfig"}]
+[
+  {
+    "title": "编辑时校验",
+    "content": "<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则。具体参考下面示例。</p>\n",
+    "link": "grid/grid_Example/gridValid/editing-validation",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "grid_Example-gridValid-editing-validation"
+  },
+  {
+    "title": "隐藏列编辑时校验",
+    "content": "<p>grid 标签配置 edit-config 对象且列配置type：visible 且配置isValidAlways属性时, 即列总是显示可编辑状态时，支持编辑时校验,并配置 edit-rules 对象来设置校验对象和校验规则。具体参考下面示例。</p>\n",
+    "link": "grid/grid_Example/gridValid/editing-isvalidalways-validation",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "grid_Example-gridValid-editing-isvalidalways-validation"
+  },
+  {
+    "title": "数据关联校验",
+    "content": "<p>在自定义校验时，<code>validator</code>方法<code>rule</code>参数中可获取到当前行与列的信息。可以按业务的需求实现数据关联的校验逻辑</p>\n",
+    "link": "grid/grid_Example/gridValid/row-data-valid",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "grid_Example-gridValid-row-data-valid"
+  },
+  {
+    "title": "自定义组件与插槽编辑器校验",
+    "content": "<p>在使用自定义组件时，组件需要实现<code>v-model</code>的功能。在使用插槽时想要实时校验需要手动触发组件的校验方法</p>\n",
+    "link": "grid/grid_Example/gridValid/custcomp",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "grid_Example-gridValid-custcomp"
+  },
+  {
+    "title": "选中时校验",
+    "content": "<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。</p>\n",
+    "link": "grid/grid_Example/gridValid/select-validation",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "grid_Example-gridValid-select-validation"
+  },
+  {
+    "title": "提交前校验",
+    "content": "<p>grid 标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。</p>\n",
+    "link": "grid/grid_Example/gridValid/before-submit-validation",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "grid_Example-gridValid-before-submit-validation"
+  },
+  {
+    "title": "校验提示跟随单元格移动",
+    "content": "<p>通过配置 tooltipConfig.popperOptions.bubbling 为 true ，可实现表格的校验提示跟随其外部的滚动条滚动。</p>\n",
+    "link": "grid/grid_Example/gridValid/bubbling",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "grid_Example-gridValid-bubbling"
+  },
+  {
+    "title": "触发校验时自动定位到当前校验的单元格",
+    "content": "<p>grid 编辑器引入 tiny 组件，标签配置 edit-config 对象，并配置 edit-rules 对象来设置校验对象和校验规则，通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验，具体参考下面示例。</p>\n",
+    "link": "grid/grid_Example/gridValid/validation-scroll-to-col",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "grid_Example-gridValid-validation-scroll-to-col"
+  },
+  {
+    "title": "错误提示配置项",
+    "content": "<p>表格默认错误提示显示在 <code>body</code> 上， 可以通过设置 <code>tooltip-config</code> 的 <code>appendTobody</code> 设置为 <code>false</code> 来解决页面滚动时tip位置错误的问题。设置 <code>placement</code> 属性调整默认显示方向。<code>tooltip-config</code> 的配置可参参考 tooltip 组件</p>\n",
+    "link": "grid/grid_Example/gridValid/tipconfig",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "grid_Example-gridValid-tipconfig"
+  },
+  {
+    "title": "隐藏必填星号",
+    "content": "<p>通过表格属性 <code>editRules</code> 可以配置表格的编辑规则，如果指定某一字段的 <code>required</code> 为 <code>true</code>，就会在表头显示必填星号。如果想要隐藏掉必填星号，可以通过表格属性 <code>validConfig</code> 配置一个方法 <code>asteriskMethod</code> 来控制，返回 <code>false</code> 则隐藏。参考示例：</p>\n",
+    "link": "grid/grid_Example/gridValid/asterisk-method",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "grid_Example-gridValid-asterisk-method"
+  }
+]

package/resources/pc/demo-config/zh-CN/grid-width-height.json

@@ -1 +1,114 @@
-[{"title":"开启列宽拖拽","content":"<p>列宽默认开启，如需禁用需要设置<code>resizable</code>为<code>false</code></p>\n","link":"grid/tiny-first-menu/resize-column-width","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-resize-column-width"},{"title":"表格列属性设置宽度","content":"<p>表格列属性设置 width 固定宽度，支持数值和百分比。</p>\n","link":"grid/tiny-first-menu/fixed-column-width","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-fixed-column-width"},{"title":"列宽自适应撑开","content":"<p>表格属性设置 fit 自动撑开，默认值为 true 开启自适应撑开，值为 false 时必须设置列宽度，否则表格宽度由单元格内容撑开。</p>\n","link":"grid/tiny-first-menu/adaptive-column-width","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-adaptive-column-width"},{"title":"列宽不自适应撑开","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/adaptive-un-column-width","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-adaptive-un-column-width"},{"title":"表格属性设置高度","content":"<p>表格属性设置 height 固定表格高度。</p>\n","link":"grid/tiny-first-menu/fixed-grid-height","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-fixed-grid-height"},{"title":"关闭响应式表格宽高","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/adaptive-grid-off-width-height","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-adaptive-grid-off-width-height"},{"title":"开启响应式表格宽高","content":"<p>表格属性设置 autoResize 属性开启响应式表格宽高的同时，将高度<code>heigh</code>设置为<code>auto</code>就可以自动跟随父容器高度。</p>\n","link":"grid/news/auto-height","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"news-auto-height"},{"title":"设置 minHeight 最小高度","content":"<p>表格属性设置 minHeight 限制最小高度，maxHeight 限制最大高度。</p>\n","link":"grid/tiny-first-menu/min-grid-height","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-min-grid-height"},{"title":"设置 maxHeight 最大高度","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/max-min-grid-height","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-max-min-grid-height"},{"title":"设置总体列宽","content":"<p>通过属性 <code>column-min-width</code> 设置总体列可以调整到的最小宽度，不设置时默认为列头 span 的宽度 + 36（头部固定宽度）。\n</p>\n","link":"grid/tiny-first-menu/column-min-width","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-column-min-width"},{"title":"本列最小宽度","content":"<p>通过表格列属性 <code>min-width</code> 本列最小宽度；会自动将剩余空间按比例分配。\n</p>\n","link":"grid/tiny-first-menu/min-width","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-min-width"},{"title":"设置所有列宽度","content":"<p>通过属性 <code>column-width</code> 设置所有列宽度，默认值为均匀分配。\n</p>\n","link":"grid/tiny-first-menu/column-width","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-column-width"},{"title":"重新计算表格","content":"<p>通过 <code>recalculate()</code> 方法可以重新计算表格，当父容器宽度变化时可通过该方法重新计算表格。</p>\n","link":"grid/recalculate","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"recalculate"}]
+[
+  {
+    "title": "开启列宽拖拽",
+    "content": "<p>列宽默认开启，如需禁用需要设置<code>resizable</code>为<code>false</code></p>\n",
+    "link": "grid/tiny-first-menu/resize-column-width",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-resize-column-width"
+  },
+  {
+    "title": "表格列属性设置宽度",
+    "content": "<p>表格列属性设置 width 固定宽度，支持数值和百分比。</p>\n",
+    "link": "grid/tiny-first-menu/fixed-column-width",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-fixed-column-width"
+  },
+  {
+    "title": "列宽自适应撑开",
+    "content": "<p>表格属性设置 fit 自动撑开，默认值为 true 开启自适应撑开，值为 false 时必须设置列宽度，否则表格宽度由单元格内容撑开。</p>\n",
+    "link": "grid/tiny-first-menu/adaptive-column-width",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-adaptive-column-width"
+  },
+  {
+    "title": "列宽不自适应撑开",
+    "content": "详细用法参考如下示例",
+    "link": "grid/tiny-first-menu/adaptive-un-column-width",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-adaptive-un-column-width"
+  },
+  {
+    "title": "表格属性设置高度",
+    "content": "<p>表格属性设置 height 固定表格高度。</p>\n",
+    "link": "grid/tiny-first-menu/fixed-grid-height",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-fixed-grid-height"
+  },
+  {
+    "title": "关闭响应式表格宽高",
+    "content": "详细用法参考如下示例",
+    "link": "grid/tiny-first-menu/adaptive-grid-off-width-height",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-adaptive-grid-off-width-height"
+  },
+  {
+    "title": "开启响应式表格宽高",
+    "content": "<p>表格属性设置 autoResize 属性开启响应式表格宽高的同时，将高度<code>heigh</code>设置为<code>auto</code>就可以自动跟随父容器高度。tips:在自动高度场景，请确保表格或其父容器被设置了一个固定的高度。</p>\n",
+    "link": "grid/news/auto-height",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "news-auto-height"
+  },
+  {
+    "title": "同时创建多个隐藏的自动高度表格",
+    "content": "<p>使用表格属性 `intersectionOption` 可设置相交检测配置，具体配置参考 IntersectionObserver API。\n设置 `intersectionOption.disabled` 为 `true` 可关闭表格的相交检测。\n通过事件 `visible-change` 可获取表格的显示隐藏状态，参考示例。</p>\n",
+    "link": "grid/news/intersection-observer",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "news-intersection-observer"
+  },
+  {
+    "title": "设置 minHeight 最小高度",
+    "content": "<p>表格属性设置 minHeight 限制最小高度，maxHeight 限制最大高度。</p>\n",
+    "link": "grid/tiny-first-menu/min-grid-height",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-min-grid-height"
+  },
+  {
+    "title": "设置 maxHeight 最大高度",
+    "content": "详细用法参考如下示例",
+    "link": "grid/tiny-first-menu/max-min-grid-height",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-max-min-grid-height"
+  },
+  {
+    "title": "设置总体列宽",
+    "content": "<p>通过属性 <code>column-min-width</code> 设置总体列可以调整到的最小宽度，不设置时默认为列头 span 的宽度 + 36（头部固定宽度）。\n</p>\n",
+    "link": "grid/tiny-first-menu/column-min-width",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-column-min-width"
+  },
+  {
+    "title": "本列最小宽度",
+    "content": "<p>通过表格列属性 <code>min-width</code> 本列最小宽度；会自动将剩余空间按比例分配。\n</p>\n",
+    "link": "grid/tiny-first-menu/min-width",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-min-width"
+  },
+  {
+    "title": "设置所有列宽度",
+    "content": "<p>通过属性 <code>column-width</code> 设置所有列宽度，默认值为均匀分配。\n</p>\n",
+    "link": "grid/tiny-first-menu/column-width",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-column-width"
+  },
+  {
+    "title": "重新计算表格",
+    "content": "<p>通过 <code>recalculate()</code> 方法可以重新计算表格，当父容器宽度变化时可通过该方法重新计算表格。</p>\n",
+    "link": "grid/recalculate",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "recalculate"
+  }
+]

package/resources/pc/demo-config/zh-CN/guide.json

@@ -0,0 +1,98 @@
+[
+  {
+    "title": "基础用法",
+    "content": "详细用法参考如下示例",
+    "link": "guide/base",
+    "component": " Guide 引导",
+    "findIntroStr": "Guide 用户引导。",
+    "demoId": "base"
+  },
+  {
+    "title": "引导框箭头距离",
+    "content": "<p>通过 <code>pop-position</code> 属性设置箭头方向。<br>该属性的可选值为 <code>top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end</code> <br>若存在多个步骤，需要单独给每个步骤设置不同的展示位置，可以在 <code>dom-data</code> 里面添加 <code>popPosition</code> 属性并赋值，若存在单独设置的箭头方向，则会覆盖全局的箭头方向</p>\n",
+    "link": "guide/arror-position",
+    "component": " Guide 引导",
+    "findIntroStr": "Guide 用户引导。",
+    "demoId": "arror-position"
+  },
+  {
+    "title": "窗口的事件回调",
+    "content": "<p>窗口的事件回调<br>在 <code>dom-data<code> 中使用：<br> <code>beforeShow</code> ：展示前回调<br> <code>show</code> ：展示回调<br> <code>beforeHide</code> ：隐藏前回调<br> <code>hide</code> ：隐藏回调<br> <code>cancel</code> ：关闭取消回调<br> <code>complete</code> ：完成回调<br>  <code>destroy</code> ：销毁回调</p>",
+    "link": "guide/callback",
+    "component": " Guide 引导",
+    "findIntroStr": "Guide 用户引导。",
+    "demoId": "callback"
+  },
+  {
+    "title": "纯段落用户引导",
+    "content": "<p>通过添加 <code>only-content</code> 类名实现纯段落用户引导</p>\n",
+    "link": "guide/content-step",
+    "component": " Guide 引导",
+    "findIntroStr": "Guide 用户引导。",
+    "demoId": "content-step"
+  },
+  {
+    "title": "多步骤纯段落用户引导",
+    "content": "<p>通过添加 <code>only-content</code> 类名实现纯段落用户引导</p>\n",
+    "link": "guide/content-steps",
+    "component": " Guide 引导",
+    "findIntroStr": "Guide 用户引导。",
+    "demoId": "content-steps"
+  },
+  {
+    "title": "高亮多处",
+    "content": "<p>在 <code>dom-data</code> 里面通过 <code>hightBox</code>属性添加需要高亮的元素</p>\n",
+    "link": "guide/dom-hight",
+    "component": " Guide 引导",
+    "findIntroStr": "Guide 用户引导。",
+    "demoId": "dom-hight"
+  },
+  {
+    "title": "引导框主轴（纵轴）距离",
+    "content": "<p>通过设置 <code>main-axis</code> 大小来设置主轴（纵轴）距离</p>\n",
+    "link": "guide/guide-poistion-mainAxis",
+    "component": " Guide 引导",
+    "findIntroStr": "Guide 用户引导。",
+    "demoId": "guide-poistion-mainAxis"
+  },
+  {
+    "title": "引导框横轴距离",
+    "content": "<p>通过设置 <code>cross-axis</code> 大小来设置横轴距离</p>\n",
+    "link": "guide/guide-poistion-crossAxis",
+    "component": " Guide 引导",
+    "findIntroStr": "Guide 用户引导。",
+    "demoId": "guide-poistion-crossAxis"
+  },
+  {
+    "title": "引导框对齐轴距离",
+    "content": "<p>通过设置 <code>alignment-axis</code> 大小来设置对齐轴距离</p>\n",
+    "link": "guide/guide-poistion-alignmentAxis",
+    "component": " Guide 引导",
+    "findIntroStr": "Guide 用户引导。",
+    "demoId": "guide-poistion-alignmentAxis"
+  },
+  {
+    "title": "图文结合用户引导",
+    "content": "<p>可以在插槽里面添加任何 <code>html</code> 或通过 <code>dom-data</code> 里面的 <code>text</code> 属性实现图文结合用户引导</p>\n",
+    "link": "guide/image-text",
+    "component": " Guide 引导",
+    "findIntroStr": "Guide 用户引导。",
+    "demoId": "image-text"
+  },
+  {
+    "title": "自定义宽高",
+    "content": "<p>通过添加 <code>width</code>和 <code>height</code>来自定义宽高</p>\n",
+    "link": "guide/size",
+    "component": " Guide 引导",
+    "findIntroStr": "Guide 用户引导。",
+    "demoId": "size"
+  },
+  {
+    "title": "通过添加多个类名实现用户引导",
+    "content": "<p>详细用法参考如下示例</p>\n",
+    "link": "guide/title-steps",
+    "component": " Guide 引导",
+    "findIntroStr": "Guide 用户引导。",
+    "demoId": "title-steps"
+  }
+]

package/resources/pc/demo-config/zh-CN/ip-address.json

@@ -1 +1,98 @@
-[{"title":"IPv4 类型","content":"<p>可通过 <code>type</code> 属性配置 <code>IPv4</code> 类型，默认是 <code>IPv4</code>。</p>\n","link":"ip-address/ipv4-type","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。","demoId":"ipv4-type"},{"title":"IPv6 类型","content":"<p>可通过 <code>type</code>属性配置为 <code>IPv6</code> 类型，默认是 <code>IPv4</code>。</p>\n","link":"ip-address/ipv6-type","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。","demoId":"ipv6-type"},{"title":"文本只读","content":"<p>通过 <code>readonly</code> 属性设置文本的只读行，默认为 false 。</p>\n","link":"ip-address/readonly","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。","demoId":"readonly"},{"title":"禁用","content":"<p>通过 <code>disabled</code> 属性设置文本是否禁用，默认为 false。</p>\n","link":"ip-address/disabled","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。","demoId":"disabled"},{"title":"输入框大小","content":"<p>可设置为<code>medium</code>，<code>small</code>，<code>mini</code></p>\n","link":"ip-address/size","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。","demoId":"size"},{"title":"属性设置分隔符","content":"<p>可通过 <code>delimiter</code> 属性设置分隔符(图标类)。</p>\n","link":"ip-address/delimiter","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。","demoId":"delimiter"},{"title":"默认插槽","content":"<p>可通过默认插槽设置分隔符。</p>\n","link":"ip-address/slots","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。","demoId":"slots"},{"title":"focus 事件","content":"<p>文本框获取焦点时触发 <code>focus</code> 事件。</p>\n","link":"ip-address/focus","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。","demoId":"focus"},{"title":"blur 事件","content":"<p>文本框失去焦点时触发 <code>blur</code> 事件。</p>\n","link":"ip-address/blur","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。","demoId":"blur"},{"title":"change 事件","content":"<p>文本框内容改变后触发 <code>change</code> 事件。</p>\n","link":"ip-address/change","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。","demoId":"change"},{"title":"select 事件","content":"<p>文本框内容选中时触发 <code>select</code> 事件。</p>\n","link":"ip-address/select","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。","demoId":"select"}]
+[
+  {
+    "title": "IPv4 类型",
+    "content": "<p>可通过 <code>type</code> 属性配置 <code>IPv4</code> 类型，默认是 <code>IPv4</code>。</p>\n",
+    "link": "ip-address/ipv4-type",
+    "component": " IpAddress 输入框",
+    "findIntroStr": "IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。",
+    "demoId": "ipv4-type"
+  },
+  {
+    "title": "IPv6 类型",
+    "content": "<p>可通过 <code>type</code>属性配置为 <code>IPv6</code> 类型，默认是 <code>IPv4</code>。</p>\n",
+    "link": "ip-address/ipv6-type",
+    "component": " IpAddress 输入框",
+    "findIntroStr": "IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。",
+    "demoId": "ipv6-type"
+  },
+  {
+    "title": "文本只读",
+    "content": "<p>通过 <code>readonly</code> 属性设置文本的只读行，默认为 false 。</p>\n",
+    "link": "ip-address/readonly",
+    "component": " IpAddress 输入框",
+    "findIntroStr": "IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。",
+    "demoId": "readonly"
+  },
+  {
+    "title": "禁用",
+    "content": "<p>通过 <code>disabled</code> 属性设置文本是否禁用，默认为 false。</p>\n",
+    "link": "ip-address/disabled",
+    "component": " IpAddress 输入框",
+    "findIntroStr": "IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。",
+    "demoId": "disabled"
+  },
+  {
+    "title": "输入框大小",
+    "content": "<p>可设置为<code>medium</code>，<code>small</code>，<code>mini</code></p>\n",
+    "link": "ip-address/size",
+    "component": " IpAddress 输入框",
+    "findIntroStr": "IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。",
+    "demoId": "size"
+  },
+  {
+    "title": "属性设置分隔符",
+    "content": "<p>可通过 <code>delimiter</code> 属性设置分隔符(图标类)。</p>\n",
+    "link": "ip-address/delimiter",
+    "component": " IpAddress 输入框",
+    "findIntroStr": "IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。",
+    "demoId": "delimiter"
+  },
+  {
+    "title": "默认插槽",
+    "content": "<p>可通过默认插槽设置分隔符。</p>\n",
+    "link": "ip-address/slots",
+    "component": " IpAddress 输入框",
+    "findIntroStr": "IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。",
+    "demoId": "slots"
+  },
+  {
+    "title": "focus 事件",
+    "content": "<p>文本框获取焦点时触发 <code>focus</code> 事件。</p>\n",
+    "link": "ip-address/focus",
+    "component": " IpAddress 输入框",
+    "findIntroStr": "IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。",
+    "demoId": "focus"
+  },
+  {
+    "title": "blur 事件",
+    "content": "<p>文本框失去焦点时触发 <code>blur</code> 事件。</p>\n",
+    "link": "ip-address/blur",
+    "component": " IpAddress 输入框",
+    "findIntroStr": "IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。",
+    "demoId": "blur"
+  },
+  {
+    "title": "change 事件",
+    "content": "<p>文本框内容改变后触发 <code>change</code> 事件。</p>\n",
+    "link": "ip-address/change",
+    "component": " IpAddress 输入框",
+    "findIntroStr": "IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。",
+    "demoId": "change"
+  },
+  {
+    "title": "select 事件",
+    "content": "<p>文本框内容选中时触发 <code>select</code> 事件。</p>\n",
+    "link": "ip-address/select",
+    "component": " IpAddress 输入框",
+    "findIntroStr": "IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。",
+    "demoId": "select"
+  },
+  {
+    "title": "input 事件",
+    "content": "<p>文本框输入时触发 <code>input</code> 事件。</p>\n",
+    "link": "ip-address/input",
+    "component": " IpAddress 输入框",
+    "findIntroStr": "IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。",
+    "demoId": "input"
+  }
+]