@opentiny/vue-docs 1.0.0

package/resources/pc/demo-config/en-US/transfer.json

@@ -0,0 +1,162 @@
+[
+  {
+    "title": "Basic Usage",
+    "content": "<p>The <code>value</code> attribute is used for bidirectional binding. The specified value is the default value and is displayed in the list on the right. \n\nThe <code>data</code> attribute provides the data source. It is an object array. The default fields in the object are key, label, and disabled. </p>\n",
+    "link": "transfer/basic-usage",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "basic-usage"
+  },
+  {
+    "title": "Data Source",
+    "content": "<p>You can request the service to obtain data and assign the data to <code>data</code>. </p>\n",
+    "link": "transfer/data-source",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "data-source"
+  },
+  {
+    "title": "Display All Move Buttons",
+    "content": "<p>You can set the <code>show-all-btn</code> attribute to display all mobile buttons. </p>\n",
+    "link": "transfer/show-all-btn",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "show-all-btn"
+  },
+  {
+    "title": "Customized List Title",
+    "content": "<p>You can use the <code>titles</code> attribute to customize the titles of the left and right lists. </p>\n",
+    "link": "transfer/custom-transfer-titles",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "custom-transfer-titles"
+  },
+  {
+    "title": "Custom Button Copywriting",
+    "content": "<p>The <code>button-texts</code> attribute is used to customize the left and right button text. </p>\n",
+    "link": "transfer/custom-button-texts",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "custom-button-texts"
+  },
+  {
+    "title": "Search box placeholder",
+    "content": "<p>Customize the search box placeholder through the <code>filter-placeholder</code> attribute. </p>\n",
+    "link": "transfer/filter-placeholder",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "filter-placeholder"
+  },
+  {
+    "title": "Custom Search Method",
+    "content": "<p>Provides the <code>filter-method</code> hook function to customize the search method. </p>\n",
+    "link": "transfer/custom-filter-method",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "custom-filter-method"
+  },
+  {
+    "title": "Default options",
+    "content": "<p>Use the <code>left-default-checked</code> and <code>right-default-checked</code> attributes to specify the default selected data in the left and right lists. </p>\n",
+    "link": "transfer/default-checked",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "default-checked"
+  },
+  {
+    "title": "Customized Data Item Rendering",
+    "content": "<p>Use render-content to customize data items</p>\n",
+    "link": "transfer/custom-render-content",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "custom-render-content"
+  },
+  {
+    "title": "Selected status copywriting at the top of the list",
+    "content": "<p>After the <code>format</code> attribute is specified, the ratio of the selected data to all data is displayed on the top of the left and right lists when data is selected. </p>\n",
+    "link": "transfer/checked-format-text",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "checked-format-text"
+  },
+  {
+    "title": "Searchable",
+    "content": "<p>The <code>filterable</code> attribute is used to enable the search function for the left and right lists. </p>\n",
+    "link": "transfer/filterable",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "filterable"
+  },
+  {
+    "title": "Field alias of the data source",
+    "content": "<p>When a field in a data object is inconsistent with the default value, the <code>props</code> attribute can be used for mapping. </p>\n",
+    "link": "transfer/props-of-data-source",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "props-of-data-source"
+  },
+  {
+    "title": "Right Sorting Policy",
+    "content": "<p>Use the <code>target-order</code> attribute to set the sorting policy of the elements in the list on the right. The options are original, push, and unshift. The default value is original. </p>\n<div class=\"tip custom-block\"><p class=\"custom-block-title\"> Sorting Policy</p>\n<p>If the value is original, the sequence of the data source is the same as that of the data source.\nIf the value is push, the newly added elements are ranked last.\nIf the value is unshift, the newly added elements are ranked first </p>\n</div>\n",
+    "link": "transfer/target-order",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "target-order"
+  },
+  {
+    "title": "Drag left and right",
+    "content": "Before using the drag-and-drop function for the <div class=\"tip custom-block\"><p class=\"custom-block-title\">, install the sortablejs plug-in. The </p>\n</div>\n<p> uses the drop-config attribute to configure the sortablejs plug-in. </p>\n",
+    "link": "transfer/drop-config",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "drop-config"
+  },
+  {
+    "title": "Shuttle Box Event",
+    "content": "<p>There are three events: <code>change</code>, <code>left-check-change</code>, and <code>right-check-change</code>. </p>\n<div class=\"tip custom-block\"><p class=\"custom-block-title\"> Event Description</p>\n<p>change: Triggered when an element in the list on the right changes.\nleft-check-change: Triggered when an element in the list on the left is selected or deselected.\nright-check-change: Triggered when an element in the list on the right is selected or deselected",
+    "link": "transfer/transfer-events",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "transfer-events"
+  },
+  {
+    "title": "Clear the search box manually",
+    "content": "<p>Invoke the <code>clearQuery()</code> method to clear the search boxes in the left and right lists. The parameter is left or right. </p>\n",
+    "link": "transfer/manual-clear-query",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "manual-clear-query"
+  },
+  {
+    "title": "Custom List Bottom",
+    "content": "<p>You can customize the bottom of the left and right lists through the <code>left-footer</code> and <code>right-footer</code> slots. </p>\n",
+    "link": "transfer/custom-footer",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "custom-footer"
+  },
+  {
+    "title": "Panel Slot",
+    "content": "<p>You can use <code>left-panel</code> and <code>right-panel</code> to customize the contents of the left and right panels. Use <code>button</code> to customize the shuttle button</p>\n",
+    "link": "transfer/panel-slot",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "panel-slot"
+  },
+  {
+    "title": "Nested Table",
+    "content": "<p>When <code>plugin</code> in the <code>render</code> attribute is set to <code>Table</code>, the shuttle box is rendered as a table. For details, see the configuration of the <code>grid</code> component. </p>\n",
+    "link": "transfer/nested-table",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "nested-table"
+  },
+  {
+    "title": "Nested Tree",
+    "content": "<p>When <code>plugin</code> in the <code>render</code> attribute is set to <code>Tree</code>, the shuttle box is rendered as a tree. Configure tree-related configurations through the <code>treeConfig</code> attribute. (For details, see the configuration of the <code>tree</code> component.) </p>\n",
+    "link": "transfer/nested-tree",
+    "component": "Transfer shuttle box",
+    "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+    "demoId": "nested-tree"
+  }
+]

package/resources/pc/demo-config/en-US/tree-menu.json

@@ -0,0 +1,186 @@
+[
+  {
+    "title": "Basic Usage",
+    "content": "<p>If no data is configured, data is read from the framework service by default. </p>\n",
+    "link": "tree-menu/basic-usage",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "basic-usage"
+  },
+  {
+    "title": "Data Source",
+    "content": "<p>Set the data of the tree menu through <code>data</code>. </p>\n",
+    "link": "tree-menu/data-resource",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "data-resource"
+  },
+  {
+    "title": "Custom Menu Service Data",
+    "content": "<p>Customize menu service data through <code>get-menu-data-sync</code> and directly return data. </p>\n",
+    "link": "tree-menu/get-menu-data-sync",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "get-menu-data-sync"
+  },
+  {
+    "title": "Excessive Text Omission",
+    "content": "<p>You can use <code>ellipsis</code> to configure that the menu text is displayed as an ellipsis when it is too long. Use <code>prefix-icon</code> to customize the front icon. </p>\n",
+    "link": "tree-menu/text-ellipsis",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "text-ellipsis"
+  },
+  {
+    "title": "Excessive text is displayed in a new line.",
+    "content": "<p>You can use <code>wrap</code> to configure that the menu text is displayed in a new line when the menu text is too long. The showTitle attribute is used to configure whether to display the title. The default value is true. \nYou can use <code>show-filter</code> to configure whether to display the search filter box. The default value is true. \nYou can use <code>show-title</code> to configure whether to display the title. The default value is true. </p>\n",
+    "link": "tree-menu/text-wrap",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "text-wrap"
+  },
+  {
+    "title": "The parent and child levels are not associated.",
+    "content": "<p>The <code>check-strictly</code> is not associated with the parent and child levels. This parameter must be used together with <code>show-checkbox</code>. </p>\n",
+    "link": "tree-menu/check-strictly",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "check-strictly"
+  },
+  {
+    "title": "A node is expanded by default.",
+    "content": "<p>Initially expand a node by setting <code>default-expanded-keys</code> . </p>\n",
+    "link": "tree-menu/default-expanded-keys",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "default-expanded-keys"
+  },
+  {
+    "title": "Lazy loading subnode",
+    "content": "<p>You can use <code>lazy</code> to determine whether to lazy load subnodes. This method must be used together with the load method. </p>\n",
+    "link": "tree-menu/lazy-load",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "lazy-load"
+  },
+  {
+    "title": "Search Rule Configuration",
+    "content": "<p>You can configure <code>filter-node-method</code> to configure the search rule. Fuzzy match is used by default. The following is an example of exact configuration. </p>\n",
+    "link": "tree-menu/filter-node-method",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "filter-node-method"
+  },
+  {
+    "title": "All menus are displayed by default.",
+    "content": "<p>You can set the <code>default-expand-all</code> attribute to expand all menus by default. \n This parameter is selected by default through the <code>default-checked-keys</code> attribute. This parameter must be used together with <code>show-checkbox</code>, <code>node-key</code> . </p>\n",
+    "link": "tree-menu/default-expand-all",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "default-expand-all"
+  },
+  {
+    "title": "Customized empty data text",
+    "content": "<p>You can use the <code>empty-text</code> attribute to configure the empty data display text. </p>\n",
+    "link": "tree-menu/empty-text",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "empty-text"
+  },
+  {
+    "title": "Drag Menu",
+    "content": "<p>You can drag menus by setting the attribute <code>draggable</code>. </p>\n",
+    "link": "tree-menu/can-draggable",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "can-draggable"
+  },
+  {
+    "title": "Drag menu callback event",
+    "content": "<p>Drag menu callback event, which is used together with <code>draggable</code>. </p>\n",
+    "link": "tree-menu/event-allow-draggable",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "event-allow-draggable"
+  },
+  {
+    "title": "Event triggered when a node is expanded",
+    "content": "<p>Event triggered when a node is expanded</p>\n",
+    "link": "tree-menu/event-node-expand",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "event-node-expand"
+  },
+  {
+    "title": "Event triggered when a node is shut down",
+    "content": "<p>Event triggered when a node is closed</p>\n",
+    "link": "tree-menu/event-node-collapse",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "event-node-collapse"
+  },
+  {
+    "title": "Callback when the node selection status changes",
+    "content": "<p>Callback when the node selection status changes</p>\n",
+    "link": "tree-menu/event-check-change",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "event-check-change"
+  },
+  {
+    "title": "Click the text to expand the menu.",
+    "content": "<p>You can click the text to expand the submenu through the <code>expand-on-click-node</code> attribute. </p>\n",
+    "link": "tree-menu/expand-on-click-node",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "expand-on-click-node"
+  },
+  {
+    "title": "horizontal indent",
+    "content": "<p>You can use the <code>indent</code> attribute to control the horizontal indentation distance of a child relative to a parent menu. The unit is px. </p>\n",
+    "link": "tree-menu/tree-menu-indent",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "tree-menu-indent"
+  },
+  {
+    "title": "Accordance",
+    "content": "<p>Set the accordion effect through <code>accordion</code>. </p>\n",
+    "link": "tree-menu/accordion",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "accordion"
+  },
+  {
+    "title": "Node can be selected",
+    "content": "<p>The <code>show-checkbox</code> attribute can be configured to determine whether the node can be selected. </p>\n",
+    "link": "tree-menu/show-checkbox",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode, which is applicable to a component of version customization.",
+    "demoId": "show-checkbox"
+  },
+  {
+    "title": "Custom search icon",
+    "content": "<p>The <code>search-icon</code> attribute can be configured to customize the search icon</p>\n",
+    "link": "tree-menu/search-icon",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "search-icon"
+  },
+  {
+    "title": "Slot",
+    "content": "<p>You can configure the default scope slot to display the menu content. </p>\n",
+    "link": "tree-menu/tree-menu-slot",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "tree-menu-slot"
+  },
+  {
+    "title": "Event",
+    "content": "<p><code>current-change</code> Event triggered when the selected node changes. </p>\n",
+    "link": "tree-menu/event-current-change",
+    "component": "TreeMenu",
+    "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+    "demoId": "event-current-change"
+  }
+]

package/resources/pc/demo-config/en-US/tree.json

@@ -0,0 +1,266 @@
+[
+  {
+    "title": "Basic Usage",
+    "content": "For details, see the following example.",
+    "link": "tree/basic-usage",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "basic-usage"
+  },
+  {
+    "title": "Data Source",
+    "content": "<p>You can configure the <code>data</code> attribute to set the data source. You can configure the static data source and dynamic data source. </p>\n",
+    "link": "tree/data-source",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "data-source"
+  },
+  {
+    "title": "Disabled",
+    "content": "<p>The data source contains <code>disabled: true</code>, which is automatically disabled during rendering. </p>\n",
+    "link": "tree/disable-node",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "disable-node"
+  },
+  {
+    "title": "Customized empty data text",
+    "content": "<p>Configure <code>template #empty</code>Set the user-defined empty data text. </p>\n",
+    "link": "tree/custom-empty-text",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "custom-empty-text"
+  },
+  {
+    "title": "Render after expansion",
+    "content": "<p>Configure the <code>render-after-expand</code> attribute to set whether to render data after expansion. The default value is <code>true</code>. </p>\n",
+    "link": "tree/render-after-expand",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "render-after-expand"
+  },
+  {
+    "title": "Unique ID",
+    "content": "<p>Use the <code>node-key</code> attribute to set the unique ID. </p>\n <p>You need to set the unique ID of a node for operations such as selecting, obtaining, adding, and deleting a node.</p>",
+    "link": "tree/node-key",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "node-key"
+  },
+  {
+    "title": "The parent and child are not associated with each other.",
+    "content": "<p>The <code>check-strictly</code> attribute is used to set the parent and child levels to No. </p>\n",
+    "link": "tree/check-strictly",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "check-strictly"
+  },
+  {
+    "title": "All nodes are expanded by default.",
+    "content": "<p>Use the <code>default-expand-all</code> property to set all nodes to be expanded by default. </p>\n",
+    "link": "tree/default-expand-all",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "default-expand-all"
+  },
+  {
+    "title": "Click to expand and collapse a node.",
+    "content": "<p>You can set the <code>expand-on-click-node</code> attribute to expand or collapse a node when you click the node content. </p>\n",
+    "link": "tree/expand-on-click-node",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "expand-on-click-node"
+  },
+  {
+    "title": "Selected when clicking a node",
+    "content": "<p>You can select or deselect data by setting the <code>check-on-click-node</code> attribute. \n The <code>icon-trigger-click-node</code> attribute is used to determine whether to trigger the node-click event when you click an icon. The default value is true. </p>\n",
+    "link": "tree/check-on-click-node",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "check-on-click-node"
+  },
+  {
+    "title": "Automatically Expand Parent Node",
+    "content": "<p>Indicates whether to display the parent node based on the <code>auto-expand-parent</code> attribute. The default value is <code>true</code>. </p>\n",
+    "link": "tree/auto-expand-parent",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "auto-expand-parent"
+  },
+  {
+    "title": "Nodes selected by default",
+    "content": "<p>The <code>default-checked-keys</code> attribute is used to set the selected data by default. </p>\n",
+    "link": "tree/default-checked-keys",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "default-checked-keys"
+  },
+  {
+    "title": "The specified node is expanded by default.",
+    "content": "<p>Set the default expanded node through the <code>default-expanded-keys</code> attribute. </p>\n",
+    "link": "tree/default-expanded-keys",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "default-expanded-keys"
+  },
+  {
+    "title": "Currently selected node flag",
+    "content": "<p>Use <code>current-node-key</code> to set the flag of the currently selected node. It must be used together with node-key=&quot;id&quot;. </p>\n",
+    "link": "tree/current-node-key",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "current-node-key"
+  },
+  {
+    "title": "Default slot",
+    "content": "<p>You can customize the content of a tree node through the <code>default</code> slot. The parameter is {node, data}. </p>\n",
+    "link": "tree/slot-deffault",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "slot-deffault"
+  },
+  {
+    "title": "Customized content area rendering",
+    "content": "<p>Sets the customized content through the <code>render-content</code> attribute. </p>\n",
+    "link": "tree/render-content",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "render-content"
+  },
+  {
+    "title": "Whether to enable the multi-choice mode",
+    "content": "<p>The <code>show-checkbox</code> attribute is used to set whether a node can be selected. The default value is <code>false</code>. </p>\n",
+    "link": "tree/show-checkbox",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "show-checkbox"
+  },
+  {
+    "title": "Dragable Node",
+    "content": "<p>The <code>draggable</code> attribute is used to set whether a node can be dragged. </p>\n",
+    "link": "tree/node-draggable",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "node-draggable"
+  },
+  {
+    "title": "Whether a customized node can be dragged",
+    "content": "<p>The <code>allow-drag</code> hook function is used to determine whether a node can be dragged. If the return value is <code>false</code>, the node cannot be dragged. </p>\n",
+    "link": "tree/allow-drag",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "allow-drag"
+  },
+  {
+    "title": "Whether the customized target node can be placed",
+    "content": "<p>The <code>allow-drop</code> attribute is used to determine whether the target node can be placed during dragging. The type parameter has three cases:'prev','inner', and'next', indicating that the parameter is placed before, inserted into, and placed after the target node, respectively. </p>\n",
+    "link": "tree/allow-drop",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "allow-drop"
+  },
+  {
+    "title": "Data Node Attribute Configuration",
+    "content": "<p>Sets the data node attribute through the <code>props</code> attribute. The default value of this attribute is <code>{children:'children', label:'label', disabled:'disabled'}</code>. </p>\n",
+    "link": "tree/node-props-config",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "node-props-config"
+  },
+  {
+    "title": "Lazy loading subnode",
+    "content": "<p>The <code>lazy</code> attribute is used to set whether to lazy load subnodes. It must be used together with the <code>load</code> method. The default value is <code>false</code>. </p>\n",
+    "link": "tree/lazy-load-node",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "lazy-load-node"
+  },
+  {
+    "title": "Highlight the selected node",
+    "content": "<p>The <code>highlight-current</code> attribute is used to highlight the selected node. </p>\n",
+    "link": "tree/highlight-current",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "highlight-current"
+  },
+  {
+    "title": "Filter Node",
+    "content": "<p>Set the node filtering method through the <code>filter-node-method</code> attribute. </p>\n",
+    "link": "tree/filter-node",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "filter-node"
+  },
+  {
+    "title": "Accordion Mode",
+    "content": "<p>The <code>accordion</code> attribute is used to set whether to open only one tree node at the same level at a time (in accordion mode). The default value is <code>false</code>. </p>\n",
+    "link": "tree/accordion-mode",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "accordion-mode"
+  },
+  {
+    "title": "horizontal indent",
+    "content": "<p>The <code>indent</code> attribute is used to control the horizontal indentation distance. The unit is <code>px</code>. The default value is <code>18px</code>. </p>\n",
+    "link": "tree/indent",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "indent"
+  },
+  {
+    "title": "Customize the expansion and collapse icon",
+    "content": "<p>Use the <code>icon</code> attribute to set the tree node expansion and collapse icon, import an icon from the <code>@opentiny/vue-icon</code>, initialize the icon, and transfer the icon to the <code>icon</code> attribute. </p>\n",
+    "link": "tree/custom-node-icon",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "custom-node-icon"
+  },
+  {
+    "title": "Expand and collapse icons and set them separately",
+    "content": "<p>Use the <code>expandIcon</code> attribute to set the expanded icon, and use the <code>shrinkIcon</code> attribute to set the collapsed icon. </p>\n",
+    "link": "tree/set-tree-icon",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "set-tree-icon"
+  },
+  {
+    "title": "You can customize the shortcut menu content.",
+    "content": "<p>The <code>show-contextmenu</code> attribute is used to set whether to enable the shortcut menu of the pop-up window. The <code>closeMenu</code> method of the instance can be invoked to close the customized menu. </p>\n",
+    "link": "tree/contextmenu",
+    "component": "Tree control",
+    "findIntroStr": "The customized menu is displayed after you right-click a node.",
+    "demoId": "contextmenu"
+  },
+  {
+    "title": "Drag Node Event",
+    "content": "For details, see the following example.",
+    "link": "tree/drag-events",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "drag-events"
+  },
+  {
+    "title": "Node Selection Event",
+    "content": "For details, see the following example.",
+    "link": "tree/node-events",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "node-events"
+  },
+  {
+    "title": "Event of right-clicking a node",
+    "content": "For details, see the following example.",
+    "link": "tree/node-contextmenu",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "node-contextmenu"
+  },
+  {
+    "title": "Single Choice",
+    "content": "<p> uses the <code>show-radio</code> attribute to set the single-choice feature of the tree node. The default value is <code>false</code>. This attribute and the <code>show-checkbox</code> attribute are mutually exclusive. Cannot be set to <code>true</code> at the same time. </p>\n",
+    "link": "tree/single-select-radio",
+    "component": "Tree control",
+    "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+    "demoId": "single-select-radio"
+  }
+]