@opentiny/vue-docs 1.0.3 → 1.0.4

package/resources/pc/demo-config/zh-CN/button-group.json

@@ -17,7 +17,7 @@
     },
     {
         "title": "设置组件大小",
-        "content": "<p>可以设置为：<code>medium</code>，<code>small</code>，<code>mini</code></p>\n",
+        "content": "<p>可以设置为：<code>medium</code>，<code>small</code>，<code>mini</code>。</p>\n",
         "link": "button-group/size",
         "component": " ButtonGroup 按钮组",
         "findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
@@ -63,6 +63,14 @@
         "findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
         "demoId": "show-edit"
     },
+    {
+        "title": "change事件",
+        "content": "<p>当选中按钮发生改变时将触发 <code>change</code> 事件。</p>\n",
+        "link": "button-group/change-event",
+        "component": " Buttongroup 按钮组",
+        "findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
+        "demoId": "change-event"
+    },
     {
         "title": "编辑事件",
         "content": "<p>勾选值改变后将触发 <code>edit</code> 事件。</p>\n",
@@ -81,7 +89,7 @@
     },
     {
         "title": "多行",
-        "content": "<p>多行按钮组，超出最大宽度后，换行显示</p>\n",
+        "content": "<p>多行按钮组，超出最大宽度后，换行显示。</p>\n",
         "link": "button-group/button-group-multiple",
         "component": " Buttongroup 按钮组",
         "findIntroStr": "多行",
@@ -89,10 +97,18 @@
     },
     {
         "title": "边框",
-        "content": "<p>设置有无边框，默认为true</p>\n",
+        "content": "<p>设置有无边框，默认为true。</p>\n",
         "link": "button-group/border",
         "component": " Buttongroup 按钮组",
         "findIntroStr": "边框",
         "demoId": "border"
+    },
+    {
+        "title": "选块角标",
+        "content": "<p>通过配置项 <code>sup</code> 配置选块角标。</p>\n",
+        "link": "button-group/sup",
+        "component": " Buttongroup 按钮组",
+        "findIntroStr": "选块角标",
+        "demoId": "sup"
     }
 ]

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

@@ -1 +1,106 @@
-[{"title":"基本用法","content":"详细用法参考如下示例","link":"carousel/basic-usage","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。","demoId":"basic-usage"},{"title":"指示器和触发方式","content":"<p>走马灯指示器默认显示在幻灯片内容上，配置 <code>indicator-position</code> 为 outside 后，将显示在外部。\n配置 <code>trigger</code> 为 click ，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。</p>\n","link":"carousel/indicator-trigger","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。","demoId":"indicator-trigger"},{"title":"手动轮播","content":"<p>调用 <code>setActiveItem()</code>、<code>next()</code>、<code>prev()</code> 方法可根据需要进行轮播。<code>initial-index</code> 属性可以指定初始激活的幻灯片索引。</p>\n","link":"carousel/manual-play","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。","demoId":"manual-play"},{"title":"关闭循环轮播","content":"<p>配置 <code>loop</code> 属性为 false 后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。</p>\n","link":"carousel/close-loop","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。","demoId":"close-loop"},{"title":"自动切换","content":"<p>配置 <code>autoplay</code> 属性为 true 后，走马灯的幻灯片内容将自动轮播切换。</p>\n","link":"carousel/autoplay","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。","demoId":"autoplay"},{"title":"轮播间隔时间","content":"<p>走马灯幻灯片轮播间隔时间默认为 3000 毫秒，通过 <code>interval</code> 属性可以自定义。</p>\n","link":"carousel/play-interval","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。","demoId":"play-interval"},{"title":"纵向轮播","content":"<p>配置 <code>type</code> 属性为 vertical 即可实现纵向轮播。</p>\n","link":"carousel/up-down-carousel","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。","demoId":"up-down-carousel"},{"title":"显示标题","content":"<p>通过 <code>title</code> 配置显示标题，需要与 <code>show-title</code> 结合使用。</p>\n","link":"carousel/show-title","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。","demoId":"show-title"},{"title":"总是显示切换箭头","content":"详细用法参考如下示例","link":"carousel/carousel-arrow-always","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。","demoId":"carousel-arrow-always"},{"title":"hover 时显示切换箭头","content":"详细用法参考如下示例","link":"carousel/carousel-arrow-hover","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。","demoId":"carousel-arrow-hover"},{"title":"隐藏切换箭头","content":"详细用法参考如下示例","link":"carousel/carousel-arrow-never","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。","demoId":"carousel-arrow-never"},{"title":"卡片模式","content":"<p>配置 <code>type</code> 属性为 card 后，走马灯将以卡片形式进行展示。</p>\n","link":"carousel/card-mode","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。","demoId":"card-mode"}]
+[
+    {
+        "title": "基本用法",
+        "content": "详细用法参考如下示例",
+        "link": "carousel/basic-usage",
+        "component": " Carousel 走马灯",
+        "findIntroStr": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+        "demoId": "basic-usage"
+    },
+    {
+        "title": "指示器和触发方式",
+        "content": "<p>走马灯指示器默认显示在幻灯片内容上，配置 <code>indicator-position</code> 为 outside 后，将显示在外部。\n配置 <code>trigger</code> 为 click ，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。</p>\n",
+        "link": "carousel/indicator-trigger",
+        "component": " Carousel 走马灯",
+        "findIntroStr": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+        "demoId": "indicator-trigger"
+    },
+    {
+        "title": "手动轮播",
+        "content": "<p>调用 <code>setActiveItem()</code>、<code>next()</code>、<code>prev()</code> 方法可根据需要进行轮播。<code>initial-index</code> 属性可以指定初始激活的幻灯片索引。</p>\n",
+        "link": "carousel/manual-play",
+        "component": " Carousel 走马灯",
+        "findIntroStr": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+        "demoId": "manual-play"
+    },
+    {
+        "title": "关闭循环轮播",
+        "content": "<p>配置 <code>loop</code> 属性为 false 后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。</p>\n",
+        "link": "carousel/close-loop",
+        "component": " Carousel 走马灯",
+        "findIntroStr": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+        "demoId": "close-loop"
+    },
+    {
+        "title": "自动切换",
+        "content": "<p>配置 <code>autoplay</code> 属性为 true 后，走马灯的幻灯片内容将自动轮播切换。</p>\n",
+        "link": "carousel/autoplay",
+        "component": " Carousel 走马灯",
+        "findIntroStr": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+        "demoId": "autoplay"
+    },
+    {
+        "title": "轮播间隔时间",
+        "content": "<p>走马灯幻灯片轮播间隔时间默认为 3000 毫秒，通过 <code>interval</code> 属性可以自定义。</p>\n",
+        "link": "carousel/play-interval",
+        "component": " Carousel 走马灯",
+        "findIntroStr": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+        "demoId": "play-interval"
+    },
+    {
+        "title": "纵向轮播",
+        "content": "<p>配置 <code>type</code> 属性为 vertical 即可实现纵向轮播。</p>\n",
+        "link": "carousel/up-down-carousel",
+        "component": " Carousel 走马灯",
+        "findIntroStr": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+        "demoId": "up-down-carousel"
+    },
+    {
+        "title": "显示标题",
+        "content": "<p>通过 <code>title</code> 配置显示标题，需要与 <code>show-title</code> 结合使用。</p>\n",
+        "link": "carousel/show-title",
+        "component": " Carousel 走马灯",
+        "findIntroStr": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+        "demoId": "show-title"
+    },
+    {
+        "title": "总是显示切换箭头",
+        "content": "详细用法参考如下示例",
+        "link": "carousel/carousel-arrow-always",
+        "component": " Carousel 走马灯",
+        "findIntroStr": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+        "demoId": "carousel-arrow-always"
+    },
+    {
+        "title": "hover 时显示切换箭头",
+        "content": "详细用法参考如下示例",
+        "link": "carousel/carousel-arrow-hover",
+        "component": " Carousel 走马灯",
+        "findIntroStr": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+        "demoId": "carousel-arrow-hover"
+    },
+    {
+        "title": "隐藏切换箭头",
+        "content": "详细用法参考如下示例",
+        "link": "carousel/carousel-arrow-never",
+        "component": " Carousel 走马灯",
+        "findIntroStr": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+        "demoId": "carousel-arrow-never"
+    },
+    {
+        "title": "卡片模式",
+        "content": "<p>配置 <code>type</code> 属性为 card 后，走马灯将以卡片形式进行展示。</p>\n",
+        "link": "carousel/card-mode",
+        "component": " Carousel 走马灯",
+        "findIntroStr": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+        "demoId": "card-mode"
+    },
+    {
+        "title": "走马灯事件",
+        "content": "<p>主要包含<code>change</code>事件。</p>\n<p>当幻灯片切换时会触发该事件，回调函数可接收两个参数：<code>当前幻灯片索引</code>和<code>上一张幻灯片索引</code>。</p>\n",
+        "link": "carousel/carousel-events",
+        "component": " Carousel 走马灯",
+        "findIntroStr": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
+        "demoId": "carousel-events"
+    }
+]

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

@@ -70,5 +70,13 @@
     "component": " Collapse 折叠面板",
     "findIntroStr": "内容区可指定动态页面或自定义 html 等，支持展开收起操作。",
     "demoId": "nested-form"
+  },
+  {
+    "title": "自定义面板标题右侧内容",
+    "content": "<p>在 <code>collapse-item</code> 元素上配置 <code>title-right</code> 属性可以指定每个折叠面板项标题的右侧内容。但同时也可以通过 <code>title-right</code> 插槽的方式自定义面板标题右侧内容，比如在标题右侧增加图标。</p>\n",
+    "link": "collapse/custom-title-right",
+    "component": " Collapse 折叠面板",
+    "findIntroStr": "内容区可指定动态页面或自定义 html 等，支持展开收起操作。",
+    "demoId": "custom-title-right"
   }
 ]

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

@@ -0,0 +1,130 @@
+[
+  {
+    "title": "基本用法",
+    "content": "<p>详细用法参考如下示例</p>",
+    "link": "drawer/basic-usage",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "basic-usage"
+  },
+  {
+    "title": "抽屉方向",
+    "content": "<p>添加 <code>placement</code> 属性设置抽屉的方向，可选值有 `left|right|top|bottom`，默认值为 `right`。</p>",
+    "link": "drawer/placement",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "placement"
+  },
+  {
+    "title": "抽屉宽度",
+    "content": "<p>添加<code>width</code> 属性设置抽屉的宽度，默认值为 `500px`</p>",
+    "link": "drawer/width",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "width"
+  },
+  {
+    "title": "宽度拖拽功能",
+    "content": "<p>添加 <code>dragable</code> 属性开启抽屉宽度拖拽功能，默认值为 `false`</p>",
+    "link": "drawer/dragable",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "dragable"
+  },
+  {
+    "title": "遮罩层显示隐藏",
+    "content": "<p>添加 <code>mask</code> 属性可以控制遮罩层显示隐藏，默认值为 `true` 。</p>",
+    "link": "drawer/mask",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "mask"
+  },
+  {
+    "title": "点击遮罩层关闭抽屉",
+    "content": "<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 <code>mask-closable</code> 为 `false` 后将禁用该功能，默认值为 `true` 。</p>",
+    "link": "drawer/mask-closable",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "mask-closable"
+  },
+  {
+    "title": "关闭图标显示",
+    "content": "<p><code>show-close</code> 控制显示关闭图标，默认值为 true</p>",
+    "link": "drawer/show-close",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "show-close"
+  },
+  {
+    "title": "头部显示",
+    "content": "<p><code>show-header</code> 控制显示头部，默认值为 true</p>",
+    "link": "drawer/show-header",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "show-header"
+  },
+  {
+    "title": "底部显示",
+    "content": "<p><code>show-footer</code> 控制显示底部，默认值为 false</p>",
+    "link": "drawer/show-footer",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "show-footer"
+  },
+  {
+    "title": "自定义堆叠顺序",
+    "content": "<p>可通过 <code>z-index</code> 属性设置自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）。</p>\n",
+    "link": "drawer/z-index",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "z-index"
+  },
+  {
+    "title": "默认插槽",
+    "content": "<p>自定义抽屉主体内容</p>",
+    "link": "drawer/default-slot",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "default-slot"
+  },
+  {
+    "title": "头部插槽",
+    "content": "<p>自定义头部内容，当<code>show-header</code>取值为 true 时有效</p>",
+    "link": "drawer/header-slot",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "header-slot"
+  },
+  {
+    "title": "头部右侧插槽",
+    "content": "<p>自定义头部右侧内容，当<code>show-header</code>取值为 true 时有效</p>",
+    "link": "drawer/header-right-slot",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "header-right-slot"
+  },
+  {
+    "title": "底部插槽",
+    "content": "<p>底部插槽，默认隐藏底部，设置 :show-footer=\"true\" 时有效<p>",
+    "link": "drawer/footer-slot",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "footer-slot"
+  },
+  {
+    "title": "关闭事件",
+    "content": "<p>关闭抽屉事件</p>",
+    "link": "drawer/close-event",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "close-event"
+  },
+  {
+    "title": "确认事件",
+    "content": "<p>确认事件，设置 :show-footer=\"true\" 时有效</p>",
+    "link": "drawer/confirm-event",
+    "component": "Drawer 抽屉",
+    "findIntroStr": "",
+    "demoId": "confirm-event"
+  }
+]

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

@@ -23,6 +23,14 @@
     "findIntroStr": "Dropdown 下拉菜单。",
     "demoId": "trigger"
   },
+  {
+    "title": "显示箭头",
+    "content": "<p>可以配置 <code>visible-arrow</code> 为true ,显示箭头，默认不显示</p>\n",
+    "link": "dropdown/visible-arrow",
+    "component": "Dropdown 下拉菜单",
+    "findIntroStr": "Dropdown 下拉菜单。",
+    "demoId": "visible-arrow"
+  },
   {
     "title": "自定义文本",
     "content": "<p>Dropdown 可以通过<code>title</code> 属性去自定义显示文本</p>\n",
@@ -71,6 +79,14 @@
     "findIntroStr": "Dropdown 下拉菜单。",
     "demoId": "multi-level"
   },
+  {
+    "title": "弹框最小宽度与触发源一致",
+    "content": "<p>Dropdown 可以通过<code>inherit-width</code>属性配置 DropdownMenu 的最小宽度继承触发源的宽度</p>\n",
+    "link": "dropdown/inherit-width",
+    "component": "Dropdown 下拉菜单",
+    "findIntroStr": "Dropdown 下拉菜单。",
+    "demoId": "inherit-width"
+  },
   {
     "title": "内置事件",
     "content": "<p>内置事件包含：<code>button-click</code>、<code>item-click</code>、<code>visible-change</code> 事件。</p>\n",

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

@@ -17,7 +17,7 @@
   },
   {
     "title": "表单校验",
-    "content": "<p>包括常用的必填、日期、时间、URL、邮件等校验规则。通过 <code>trigger</code> 配置触发校验规则的方式，为 <code>change</code> 时，当输入框值改变即触发校验，为 <code>blur</code> 时则失焦后触发校验。</p>\n",
+    "content": "<p>包括常用的必填、日期、时间、URL、邮件等校验规则。通过 <code>trigger</code> 配置触发校验规则的方式，为 <code>change</code> 时，当输入框值改变即触发校验，为 <code>blur</code> 时则失焦后触发校验，可设置成数组 <code>['change', 'blur']</code> 两种场景都触发。</p>\n",
     "link": "form/form-validation",
     "component": " Form 表单",
     "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。",
@@ -25,7 +25,7 @@
   },
   {
     "title": "自定义校验规则",
-    "content": "<p>通过 <code>validator</code> 选项进行自定义校验，校验方法中 <code>callback</code> 必须被调用。通过配置 <code>validate-on-rule-change</code> 属性,设置是否在 <code>rules</code> 属性改变后立即触发一次验证</p>\n",
+    "content": "<p>通过 <code>validator</code> 选项进行自定义校验，校验方法中 <code>callback</code> 必须被调用。通过配置 <code>validate-on-rule-change</code> 属性,设置是否在 <code>rules</code> 属性改变后立即触发一次验证。</p>\n",
     "link": "form/custom-validation-rule",
     "component": " Form 表单",
     "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。",
@@ -33,7 +33,7 @@
   },
   {
     "title": "文本对齐",
-    "content": "<p>通过配置 <code>label-align</code> 属性, 设置是否文本对齐,通过配置 <code>label-position</code> 属性, 设置文本标签的位置</p>\n",
+    "content": "<p>通过配置 <code>label-align</code> 属性, 设置是否文本对齐,通过配置 <code>label-position</code> 属性, 设置文本标签的位置。</p>\n",
     "link": "form/label-align",
     "component": " Form 表单",
     "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。",
@@ -113,10 +113,18 @@
   },
   {
     "title": "分组表单",
-    "content": "<p>将多个表单组合在一起</p>\n",
+    "content": "<p>将多个表单组合在一起。</p>\n",
     "link": "form/group-form",
     "component": " Form 表单",
     "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。",
     "demoId": "group-form"
+  },
+  {
+    "title": "SMB必填表单项",
+    "content": "<p>SMB设计规范，必填表单项前不会带有红色星号，需要自行区分必填项与可选项目。</p>\n",
+    "link": "form/smb-required",
+    "component": " Form 表单",
+    "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。",
+    "demoId": "smb-required"
   }
 ]

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

@@ -110,5 +110,13 @@
     "component": " Grid 表格",
     "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
     "demoId": "custom-server-storage"
+  },
+  {
+    "title": "自定义重置",
+    "content": "<p>通过工具栏属性 <code>reset-method</code>  配置一个方法，在重置个性化时调用，需要返回 <code>promise</code>，指定重置的个性化数据，参考示例：",
+    "link": "grid/custom/reset-method",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "custom-reset-method"
   }
 ]

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

@@ -1 +1,50 @@
-[{"title":"绑定静态数据","content":"<p>表格属性设置 <code>data</code> 开启双向绑定静态数据。</p>\n","link":"grid/tiny-first-menu/static-data","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-static-data"},{"title":"开启服务请求","content":"<p>表格属性设置 <code>fetch-data</code> 开启服务请求。</p>\n","link":"grid/tiny-first-menu/request-service","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-request-service"},{"title":"自动加载数据","content":"<p>表格属性 <code>auto-load</code> 设置是否开启自动请求服务，配置 fetch-data 时有效。如下示例设置 <code>auto-load</code> 为 false 后，就不会自动加载数据。</p>\n","link":"grid/tiny-first-menu/auto-load","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-auto-load"},{"title":"表格列的配置信息","content":"<p>通过表格属性 <code>columns</code> 设置表格列的配置信息</p>\n","link":"grid/tiny-first-menu/columns","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-columns"},{"title":"开启异步渲染","content":"<p>异步渲染配置步骤：\n1、表格属性设置 <code>is-async-column</code> 开启异步渲染；\n2、表格列设置 <code>format-config</code> 开启该列数据异步渲染。</p>\n","link":"grid/tiny-first-menu/column-asyn-rendering","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-column-asyn-rendering"}]
+[
+  {
+    "title": "绑定静态数据",
+    "content": "<p>表格属性设置 <code>data</code> 开启双向绑定静态数据。</p>\n",
+    "link": "grid/tiny-first-menu/static-data",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-static-data"
+  },
+  {
+    "title": "开启服务请求",
+    "content": "<p>表格属性设置 fetch-data 开启服务请求。表格首次加载服务数据的时机默认是在 mounted 阶段，如果开了 prefetch 开关就在 created 阶段开始加载。可以设置 prefetch 为数组，指定后端排序字段参数，作为数据接口方法参数 sortBy。例如：[{ property: 'name', order: 'desc' }]，参考示例</p>\n",
+    "link": "grid/tiny-first-menu/request-service",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-request-service"
+  },
+  {
+    "title": "自动加载数据",
+    "content": "<p>表格属性 <code>auto-load</code> 设置是否开启自动请求服务，配置 fetch-data 时有效。如下示例设置 <code>auto-load</code> 为 false 后，就不会自动加载数据。</p>\n",
+    "link": "grid/tiny-first-menu/auto-load",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-auto-load"
+  },
+  {
+    "title": "表格列的配置信息",
+    "content": "<p>通过表格属性 <code>columns</code> 设置表格列的配置信息</p>\n",
+    "link": "grid/tiny-first-menu/columns",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-columns"
+  },
+  {
+    "title": "开启异步渲染",
+    "content": "<p>异步渲染配置步骤：\n1、表格属性设置 <code>is-async-column</code> 开启异步渲染；\n2、表格列设置 <code>format-config</code> 开启该列数据异步渲染。</p>\n",
+    "link": "grid/tiny-first-menu/column-asyn-rendering",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-column-asyn-rendering"
+  },
+  {
+    "title": "在默认插槽中使用复杂数据",
+    "content": "<p>兼容低版本的复杂数据访问（例如：row.attr1.attr2.attr3），参考示例。\n在列初始化过程中，使用 `skip` 插槽参数可以跳过默认插槽内容的执行，参考示例。\n在表格渲染过程中，没有提供这个参数，始终不会跳过默认插槽内容的执行。</p>\n",
+    "link": "grid/tiny-first-menu/defslot-protochain-fetch",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-defslot-protochain-fetch"
+  }
+]

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

@@ -1 +1,18 @@
-[{"title":"Grid-根据选择日期动态生成列","content":"详细用法参考如下示例","link":"grid/grid_Example/dynamicallyColumns","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"grid_Example-dynamicallyColumns"}]
+[
+  {
+    "title": "Grid-根据选择日期动态生成列",
+    "content": "详细用法参考如下示例",
+    "link": "grid/grid_Example/dynamicallyColumns",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "grid_Example-dynamicallyColumns"
+  },
+  {
+    "title": "Grid-动态列数据",
+    "content": "兼容低版本的动态列数据",
+    "link": "grid/column/columns-dynamic",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "column-columns-dynamic"
+  }
+]

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

@@ -1 +1,106 @@
-[{"title":"行编辑","content":"<p>表格属性设置 <code>edit-config</code> 开启编辑模式，然后在该属性对象内设置 <code>mode: 'row'</code> 开启行编辑，即：<code>:edit-config=&quot;{ mode: 'row' }&quot;</code>。</p>\n","link":"grid/tiny-first-menu/row-editing","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-row-editing"},{"title":"还原更改","content":"<p>调用方法 <code>revertData(rows, field)</code> 可以还原指定行 row 或者整个表格的数据。rows 为对象则还原一行数据，为数组则还原多行数据，field 可不指定。不指定任何参数时则还原整个表格数据。</p>\n","link":"grid/edit/revertData","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"edit-revertData"},{"title":"检查数据是否改变","content":"<p><code>hasRowChange(row, field)</code> 检查行或列数据是否发生改变，field 可不指定。</p>\n","link":"grid/edit/hasRowChange","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"edit-hasRowChange"},{"title":"单元格编辑","content":"<p>表格属性设置 <code>edit-config</code> 开启编辑模式，然后在该属性对象内设置 <code>mode: 'cell'</code> 开启行编辑，即：<code>:edit-config=&quot;{ mode: 'cell' }&quot;</code>。\n表格列属性设置 <code>show-icon</code> 设置列头是否显示编辑图标，在编辑时有效。</p>\n","link":"grid/tiny-first-menu/cell-editing","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-cell-editing"},{"title":"手动激活编辑","content":"<p><code>setActiveCell(row, field)</code> 方法可激活指定单元格编辑。<code>setActiveRow(row)</code> 方法激活行编辑，如果是 mode=cell 则默认激活第一个单元格。</p>\n","link":"grid/methods/set-active-cell","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"methods-set-active-cell"},{"title":"单元格格式化","content":"<p>表格列属性 <code>format-value</code> 格式化单元格编辑器组件的传入值。</p>\n","link":"grid/tiny-first-menu/format-value","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-format-value"},{"title":"自定义编辑规则","content":"<p>表格属性设置 <code>edit-config</code> 开启编辑模式，然后在该属性对象内设置 <code>activeMethod</code> 自定义编辑规则。</p>\n","link":"grid/tiny-first-menu/custom-editing","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-custom-editing"},{"title":"自定义编辑校验规则","content":"<p>表格属性设置 <code>edit-config</code> 开启编辑模式，并配置 <code>edit-rules</code> 对象来设置校验对象和校验规则，然后在 <code>editor</code> 对象中设置 <code>isValidAlways</code> 开启编辑实时校验。</p>\n","link":"grid/tiny-first-menu/editor-is-salid-always","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-editor-is-salid-always"},{"title":"开启编辑状态","content":"<p>表格属性设置 <code>edit-config</code> 开启编辑模式，然后在该属性对象内设置 <code>showStatus</code> 开启或关闭单元格更新状态（单元格左上角倒三角形更新标识)，默认值为 <code>true</code> 开启状态。</p>\n","link":"grid/tiny-first-menu/status-of-editing","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-status-of-editing"},{"title":"关闭编辑状态","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/status-of-noediting","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-status-of-noediting"},{"title":"点击触发编辑","content":"<p>表格属性设置 <code>edit-config</code> 开启编辑模式，然后在该属性对象内设置 <code>trigger</code> 修改触发方式。可选值有 <code>点击触发（click）/ 双击触发（dblclick）/ 手动触发（manual）</code>，默认值为 <code>click 点击触发</code>。</p>\n","link":"grid/tiny-first-menu/trigger-mode-for-editing","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-trigger-mode-for-editing"},{"title":"双击触发编辑","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/trigger-mode-db-editing","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-trigger-mode-db-editing"},{"title":"手动触发编辑","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/trigger-mode-hm-editing","component":" Grid 表格","findIntroStr":"表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-trigger-mode-hm-editing"}]
+[
+  {
+    "title": "行编辑",
+    "content": "<p>表格属性设置 <code>edit-config</code> 开启编辑模式，然后在该属性对象内设置 <code>mode: 'row'</code> 开启行编辑，即：<code>:edit-config=&quot;{ mode: 'row' }&quot;</code>。</p>\n",
+    "link": "grid/tiny-first-menu/row-editing",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-row-editing"
+  },
+  {
+    "title": "还原更改",
+    "content": "<p>调用方法 <code>revertData(rows, field)</code> 可以还原指定行 row 或者整个表格的数据。rows 为对象则还原一行数据，为数组则还原多行数据，field 可不指定。不指定任何参数时则还原整个表格数据。</p>\n",
+    "link": "grid/edit/revertData",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "edit-revertData"
+  },
+  {
+    "title": "检查数据是否改变",
+    "content": "<p><code>hasRowChange(row, field)</code> 检查行或列数据是否发生改变，field 可不指定。</p>\n",
+    "link": "grid/edit/hasRowChange",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "edit-hasRowChange"
+  },
+  {
+    "title": "单元格编辑",
+    "content": "<p>表格属性设置 <code>edit-config</code> 开启编辑模式，然后在该属性对象内设置 <code>mode: 'cell'</code> 开启行编辑，即：<code>:edit-config=&quot;{ mode: 'cell' }&quot;</code>。\n表格列属性设置 <code>show-icon</code> 设置列头是否显示编辑图标，在编辑时有效。</p>\n",
+    "link": "grid/tiny-first-menu/cell-editing",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-cell-editing"
+  },
+  {
+    "title": "手动激活编辑",
+    "content": "<p><code>setActiveCell(row, field)</code> 方法可激活指定单元格编辑。<code>setActiveRow(row)</code> 方法激活行编辑，如果是 mode=cell 则默认激活第一个单元格。</p>\n",
+    "link": "grid/methods/set-active-cell",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "methods-set-active-cell"
+  },
+  {
+    "title": "单元格格式化",
+    "content": "<p>表格列属性 <code>format-value</code> 格式化单元格编辑器组件的传入值。</p>\n",
+    "link": "grid/tiny-first-menu/format-value",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-format-value"
+  },
+  {
+    "title": "自定义编辑规则",
+    "content": "<p>表格属性设置 <code>edit-config</code> 开启编辑模式，然后在该属性对象内设置 <code>activeMethod</code> 自定义编辑规则。</p>\n",
+    "link": "grid/tiny-first-menu/custom-editing",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-custom-editing"
+  },
+  {
+    "title": "自定义编辑校验规则",
+    "content": "<p>表格属性设置 <code>edit-config</code> 开启编辑模式，并配置 <code>edit-rules</code> 对象来设置校验对象和校验规则，然后在 <code>editor</code> 对象中设置 <code>isValidAlways</code> 开启编辑实时校验。</p>\n",
+    "link": "grid/tiny-first-menu/editor-is-salid-always",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-editor-is-salid-always"
+  },
+  {
+    "title": "开启编辑状态",
+    "content": "<p>表格属性设置 <code>edit-config</code> 开启编辑模式，然后在该属性对象内设置 <code>showStatus</code> 开启或关闭单元格更新状态（单元格左上角倒三角形更新标识)，默认值为 <code>true</code> 开启状态。</p>\n",
+    "link": "grid/tiny-first-menu/status-of-editing",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-status-of-editing"
+  },
+  {
+    "title": "关闭编辑状态",
+    "content": "详细用法参考如下示例",
+    "link": "grid/tiny-first-menu/status-of-noediting",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-status-of-noediting"
+  },
+  {
+    "title": "点击触发编辑",
+    "content": "<p>表格属性设置 <code>edit-config</code> 开启编辑模式，然后在该属性对象内设置 <code>trigger</code> 修改触发方式。可选值有 <code>点击触发（click）/ 双击触发（dblclick）/ 手动触发（manual）</code>，默认值为 <code>click 点击触发</code>。</p>\n",
+    "link": "grid/tiny-first-menu/trigger-mode-for-editing",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-trigger-mode-for-editing"
+  },
+  {
+    "title": "双击触发编辑",
+    "content": "详细用法参考如下示例",
+    "link": "grid/tiny-first-menu/trigger-mode-db-editing",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-trigger-mode-db-editing"
+  },
+  {
+    "title": "手动触发编辑",
+    "content": "在点击其他行或表格外部时，编辑器会自动关闭。设置 <code>editConfig.autoClear</code> 为 <code>false</code> 可以防止编辑器自动关闭",
+    "link": "grid/tiny-first-menu/trigger-mode-hm-editing",
+    "component": " Grid 表格",
+    "findIntroStr": "表格组件，提供了非常强大数据表格功能，在 Grid 可以展示数据列表，可以对数据列表进行选择、编辑等。",
+    "demoId": "tiny-first-menu-trigger-mode-hm-editing"
+  }
+]