feat: add ElementPlus Tour TourStep (#58)

Simon-He95 · Feb 24, 2024 · 825d0d6 · 825d0d6
1 parent 88515c0
commit 825d0d6
Show file tree

Hide file tree

Showing 3 changed files with 311 additions and 0 deletions.
diff --git a/src/ui/elementPlus/elementPlus2/index.ts b/src/ui/elementPlus/elementPlus2/index.ts
@@ -82,6 +82,8 @@ import ElAvatar from './avatar.json'
 import ElBacktop from './backtop.json'
 import ElOption from './option.json'
 import ElOptionGroup from './optionGroup.json'
+import ElTour from './tour.json'
+import ElTourStep from './tourStep.json'
 
 export function elementPlus2() {
   const map: any = [
@@ -167,6 +169,8 @@ export function elementPlus2() {
     ElBacktop,
     ElOption,
     ElOptionGroup,
+    ElTour,
+    ElTourStep,
   ]
 
   return propsReducer('element-plus', map)
@@ -583,6 +587,16 @@ export function elementPlus2Components() {
           '远程搜索',
           '<el-autocomplete></el-autocomplete>',
         ],
+        [
+          ElTour,
+          '漫游式引导',
+          '<el-tour></el-tour>',
+        ],
+        [
+          ElTourStep,
+          '漫游式引导步骤',
+          '<el-tour-step></el-tour-step>',
+        ],
       ]
     : [
         [
@@ -970,6 +984,16 @@ export function elementPlus2Components() {
           'Remote search',
           '<el-autocomplete></el-autocomplete>',
         ],
+        [
+          ElTour,
+          'tour',
+          '<el-tour></el-tour>',
+        ],
+        [
+          ElTourStep,
+          'tour step',
+          '<el-tour-step></el-tour-step>',
+        ],
       ]
   return componentsReducer(map, true, 'el', 'element-plus')
 }
diff --git a/src/ui/elementPlus/elementPlus2/tour.json b/src/ui/elementPlus/elementPlus2/tour.json
@@ -0,0 +1,154 @@
+{
+    "name": "ElTour",
+    "props": {
+      "show-arrow": {
+        "value": "",
+        "description": "whether to show the arrow",
+        "default": "true",
+        "type": "boolean",
+        "description_zh": "是否显示箭头"
+      },
+      "placement": {
+        "value": [
+          "top",
+          "top-start",
+          "top-end",
+          "bottom",
+          "bottom-start",
+          "bottom-end",
+          "left",
+          "left-start",
+          "left-end",
+          "right",
+          "right-start",
+          "right-end"
+        ],
+        "description": "position of the guide card relative to the target element",
+        "default": "bottom",
+        "type": "top' / 'top-start' / 'top-end' / 'bottom' /'bottom-start' / 'bottom-end' / 'left' / 'left-start' / 'left-end' / 'right' / 'right-start' / 'right-end",
+        "description_zh": "引导卡片相对于目标元素的位置"
+      },
+      "content-style": {
+        "value": "",
+        "description": "custom style for content",
+        "default": "—",
+        "type": "CSSProperties",
+        "description_zh": "为content自定义样式"
+      },
+      "mask": {
+        "value": "",
+        "description": "whether to enable masking, change mask style and fill color by pass custom props",
+        "default": "true",
+        "type": "boolean | Object",
+        "description_zh": "是否启用遮罩，通过自定义属性改变遮罩样式以及填充的颜色"
+      },
+      "type": {
+        "value": "",
+        "description": "type, affects the background color and text color",
+        "default": "default",
+        "type": "default | primary",
+        "description_zh": "类型，影响底色与文字颜色"
+      },
+      "value": {
+        "value": "",
+        "description": "open tour",
+        "default": "*",
+        "type": "boolean",
+        "description_zh": "打开引导"
+      },
+      ":v-modal": {
+        "value": "",
+        "description": "open tour",
+        "default": "*",
+        "type": "boolean",
+        "description_zh": "打开引导"
+      },
+      "current": {
+        "value": "",
+        "description": "what is the current step",
+        "default": "—",
+        "type": "number",
+        "description_zh": "当前值"
+      },
+      "scroll-into-view-options": {
+        "value": "",
+        "description": "support pass custom scrollIntoView options",
+        "default": "Object",
+        "type": "boolean | ScrollIntoViewOptions",
+        "description_zh": "是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数"
+      },
+      "z-index": {
+        "value": "",
+        "description": "Tour's zIndex",
+        "default": "2001",
+        "type": "number",
+        "description_zh": "Tour 的层级"
+      },
+      "show-close": {
+        "value": "",
+        "description": "whether to show a close button",
+        "default": "true",
+        "type": "boolean",
+        "description_zh": "是否显示关闭按钮"
+      },
+      "close-icon": {
+        "value": "",
+        "description": "custom close icon, default is Close",
+        "default": "*",
+        "type": "string | Component",
+        "description_zh": "自定义关闭图标，默认Close"
+      },
+      "close-on-press-escape": {
+        "value": "",
+        "description": "whether the Dialog can be closed by pressing ESC",
+        "default": "true",
+        "type": "boolean",
+        "description_zh": "是否可以通过按下 ESC 关闭引导"
+      },
+      "target-area-clickable": {
+        "value": "",
+        "description": "whether the target element can be clickable, when using mask",
+        "default": "true",
+        "type": "boolean",
+        "description_zh": "启用蒙层时，target 元素区域是否可以点击。"
+      }
+    },
+    "events": [
+      {
+        "name": "close",
+        "description": "callback function on shutdown",
+        "params": "(current: number)",
+        "description_zh": "关闭引导时的回调函数",
+        "value": ""
+      },
+      {
+        "name": "finish",
+        "description": "callback function on finished",
+        "params": "",
+        "description_zh": "引导完成时的回调",
+        "value": ""
+      },
+      {
+        "name": "change",
+        "description": "callback when the step changes",
+        "params": "(current: number)",
+        "description_zh": "步骤改变时的回调",
+        "value": ""
+      }
+    ],
+    "slots": [
+      {
+        "name": "default",
+        "description": "tourStep component list",
+        "description_zh": "tourStep 组件列表"
+      },
+      {
+        "name": "indicators",
+        "description": "custom indicator, The scope parameter is { current, total }",
+        "description_zh": "自定义指示器, scope 参数是 { current, total }"
+      }
+    ],
+    "link": "https://element-plus.org/en-US/component/tour.html",
+    "link_zh": "https://element-plus.org/zh-CN/component/tour.html"
+  }
+
diff --git a/src/ui/elementPlus/elementPlus2/tourStep.json b/src/ui/elementPlus/elementPlus2/tourStep.json
@@ -0,0 +1,133 @@
+{
+    "name": "ElTourStep",
+    "props": {
+      "target": {
+        "value": "",
+        "description": "get the element the guide card points to. Empty makes it show in center of screen. the string and Function types are supported since 2.5.2. the string type is selectors of document.querySelector.",
+        "default": "-",
+        "type": "HTMLElement | string | Function",
+        "description_zh": "获取引导卡片指向的元素， 为空时居中于屏幕。 自2.5.2以来支持字符串和函数类型。 字符串类型是文档.querySelector的选择器。"
+      },
+      "show-arrow": {
+        "value": "",
+        "description": "whether to show the arrow",
+        "default": "true",
+        "type": "boolean",
+        "description_zh": "是否显示箭头"
+      },
+      "title": {
+        "value": "",
+        "description": "title",
+        "default": "*",
+        "type": "string",
+        "description_zh": "标题"
+      },
+      "description": {
+        "value": "",
+        "description": "description",
+        "default": "-",
+        "type": "string",
+        "description_zh": "主要描述部分"
+      },
+      "placement": {
+        "value": [
+          "top",
+          "top-start",
+          "top-end",
+          "bottom",
+          "bottom-start",
+          "bottom-end",
+          "left",
+          "left-start",
+          "left-end",
+          "right",
+          "right-start",
+          "right-end"
+        ],
+        "description": "position of the guide card relative to the target element",
+        "default": "bottom",
+        "type": "top' / 'top-start' / 'top-end' / 'bottom' /'bottom-start' / 'bottom-end' / 'left' / 'left-start' / 'left-end' / 'right' / 'right-start' / 'right-end",
+        "description_zh": "引导卡片相对于目标元素的位置"
+      },
+      "content-style": {
+        "value": "",
+        "description": "custom style for content",
+        "default": "*",
+        "type": "CSSProperties",
+        "description_zh": "为content自定义样式"
+      },
+      "mask": {
+        "value": "",
+        "description": "whether to enable masking, change mask style and fill color by pass custom props",
+        "default": "true",
+        "type": "boolean | Object",
+        "description_zh": "是否启用蒙层，也可传入配置改变蒙层样式和填充色"
+      },
+      "type": {
+        "value": "",
+        "description": "type, affects the background color and text color",
+        "default": "default",
+        "type": "default | primary",
+        "description_zh": "类型，影响底色与文字颜色"
+      },
+      "next-button-props": {
+        "value": "",
+        "description": "properties of the Next button",
+        "default": "-",
+        "type": "Object",
+        "description_zh": "“下一步”按钮的属性"
+      },
+      "prev-button-props": {
+        "value": "",
+        "description": "properties of the previous button",
+        "default": "*",
+        "type": "Object",
+        "description_zh": "“上一步”按钮的属性"
+      },
+      "scroll-into-view-options": {
+        "value": "",
+        "description": "support pass custom scrollIntoView options, the default follows the scrollIntoViewOptions property of Tour",
+        "default": "-",
+        "type": "boolean | ScrollIntoViewOptions",
+        "description_zh": "是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 scrollIntoViewOptions 属性"
+      },
+      "show-close": {
+        "value": "",
+        "description": "whether to show a close button",
+        "default": "true",
+        "type": "boolean",
+        "description_zh": "是否显示关闭按钮"
+      },
+      "close-icon": {
+        "value": "",
+        "description": "custom close icon, default is Close",
+        "default": "*",
+        "type": "string | Component",
+        "description_zh": "自定义关闭图标，默认Close"
+      }
+    },
+    "events": [
+      {
+        "name": "close",
+        "description": "callback function on shutdown",
+        "params": "",
+        "description_zh": "关闭引导时的回调函数",
+        "value": ""
+      }
+    ],
+    "slots": [
+      {
+        "name": "default",
+        "description": "description",
+        "description_zh": "主要描述部分"
+      },
+      {
+        "name": "header",
+        "description": "header",
+        "description_zh": "头部"
+      }
+    ],
+    "link": "https://element-plus.org/en-US/component/tour.html",
+    "link_zh": "https://element-plus.org/zh-CN/component/tour.html"
+  }
+