From 21fa32265540ccaaf8d7b1a4a1af76ba0a9f46bc Mon Sep 17 00:00:00 2001 From: populus Date: Sun, 19 Sep 2021 10:57:00 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=9F=BA?= =?UTF-8?q?=E7=A1=80=E7=89=88steps-guide=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/steps-guide/index.ts | 18 ++++++++ devui/steps-guide/src/steps-guide-types.ts | 16 +++++++ devui/steps-guide/src/steps-guide.scss | 27 +++++++++++ devui/steps-guide/src/steps-guide.tsx | 42 +++++++++++++++++ sites/components/steps-guide/index.md | 53 ++++++++++++++++++++++ 5 files changed, 156 insertions(+) create mode 100644 devui/steps-guide/index.ts create mode 100644 devui/steps-guide/src/steps-guide-types.ts create mode 100644 devui/steps-guide/src/steps-guide.scss create mode 100644 devui/steps-guide/src/steps-guide.tsx create mode 100644 sites/components/steps-guide/index.md diff --git a/devui/steps-guide/index.ts b/devui/steps-guide/index.ts new file mode 100644 index 00000000..62154caf --- /dev/null +++ b/devui/steps-guide/index.ts @@ -0,0 +1,18 @@ +import type { App } from 'vue' +import StepsGuide from './src/steps-guide' + +StepsGuide.install = function(app: App): void { + app.component(StepsGuide.name, StepsGuide) +} + +export { StepsGuide } + +export default { + title: 'StepsGuide 操作指引', + category: '导航', + status: '开发中', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + + app.use(StepsGuide as any) + } +} diff --git a/devui/steps-guide/src/steps-guide-types.ts b/devui/steps-guide/src/steps-guide-types.ts new file mode 100644 index 00000000..7c91f834 --- /dev/null +++ b/devui/steps-guide/src/steps-guide-types.ts @@ -0,0 +1,16 @@ +import type { ExtractPropTypes } from 'vue' + +// PropType +// export interface StepItem { +// title: string // 引导标题 +// content: string // 引导介绍内容 +// } +export const stepsGuideProps = { + /* test: { + type: Object as PropType<{ xxx: xxx }> + } */ + title: String, + content: String +} as const + +export type StepsGuideProps = ExtractPropTypes diff --git a/devui/steps-guide/src/steps-guide.scss b/devui/steps-guide/src/steps-guide.scss new file mode 100644 index 00000000..d8a65717 --- /dev/null +++ b/devui/steps-guide/src/steps-guide.scss @@ -0,0 +1,27 @@ +// @import '../style/theme/color'; +// @import '../style/theme/shadow'; +// @import '../style/theme/corner'; +// @import '../style/core/_font'; +.d-steps-guide { + width: 400px; + min-height: 160px; + // background: $devui-brand; + // box-shadow: $devui-shadow-length-feedback-overlay rgba(81, 112, 255, 0.3); + // border-radius: $devui-border-radius-feedback; + // font-size: $devui-font-size; + // color: $devui-light-text; + background: rgb(94, 124, 224); + box-shadow: rgba(81, 112, 255, 0.3) 0 4px 16px 0; + border-radius: 4px; + font-size: 12px; + color: rgb(255, 255, 255); + padding: 20px; + position: absolute; + + .devui-title { + // font-size: $devui-font-size-page-title; + opacity: 1; + margin: 0 0 20px 0; + padding: 0; + } +} diff --git a/devui/steps-guide/src/steps-guide.tsx b/devui/steps-guide/src/steps-guide.tsx new file mode 100644 index 00000000..b6766b29 --- /dev/null +++ b/devui/steps-guide/src/steps-guide.tsx @@ -0,0 +1,42 @@ +import './steps-guide.scss' + +import { defineComponent, Teleport, ref, onMounted, reactive } from 'vue' +import { stepsGuideProps, StepsGuideProps } from './steps-guide-types' + +// +export default defineComponent({ + name: 'DStepsGuide', + props: stepsGuideProps, + emits: [], + setup(props: StepsGuideProps, ctx) { + console.log(props, ctx, Teleport) + const containerRef = ref(null) + const position = reactive({ + left: '', + top: '', + zIndex: 1100 + }) + onMounted(() => { + const triggerElement = containerRef.value.firstElementChild + const targetRect = triggerElement.getBoundingClientRect(); + position.left = targetRect.left + triggerElement.clientWidth / 2 + 'px' + position.top = targetRect.top + triggerElement.clientHeight / 2 + 'px' + }) + return () => + (
+ {/* 指引位置默认只允许存在根元素 */} + { ctx.slots.default()[0] } + +
+
+
+
+
+

{ props.title }

+
{ props.content }
+
+
+ +
) + } +}) diff --git a/sites/components/steps-guide/index.md b/sites/components/steps-guide/index.md new file mode 100644 index 00000000..37ef2d86 --- /dev/null +++ b/sites/components/steps-guide/index.md @@ -0,0 +1,53 @@ +# steps-guide 操作指引 + +引导用户了解业务使用逻辑组件。 + +### 何时使用 + +业务推出新特性，或复杂的业务逻辑需要指引用户时使用。 + +### 基本用法 +设定一组操作指引信息顺序显示。 + + Step 1 + +
+ +### 弹出位置 +总共支持 8 个弹出位置。 +
+ +### 自定义 +自定义操作指引信息弹出的位置和元素。 + +
+ +```html + + +``` + + + + +### API + +d-slider 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 | +| --------- | ------- | ----- | ------------------------------------------------------------------- | ---- | +| steps | array | [] | 可选，滑动输入条的最大值 |[基本用法](#基本用法) | + -- Gitee From bc0c7fdccf4a733d05a6a2207c0443c1a04ac129 Mon Sep 17 00:00:00 2001 From: populus Date: Thu, 23 Sep 2021 23:59:15 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E5=88=A0=E9=99=A4=E9=9D=9E?= =?UTF-8?q?=E5=BF=85=E8=A6=81=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/steps-guide/src/steps-guide-types.ts | 8 --- devui/steps-guide/src/steps-guide.scss | 10 ---- devui/steps-guide/src/steps-guide.tsx | 6 ++- sites/components/steps-guide/index.md | 60 ++++++++++++++++++++++ 4 files changed, 64 insertions(+), 20 deletions(-) create mode 100644 sites/components/steps-guide/index.md diff --git a/devui/steps-guide/src/steps-guide-types.ts b/devui/steps-guide/src/steps-guide-types.ts index 7c91f834..86f03e8a 100644 --- a/devui/steps-guide/src/steps-guide-types.ts +++ b/devui/steps-guide/src/steps-guide-types.ts @@ -1,14 +1,6 @@ import type { ExtractPropTypes } from 'vue' -// PropType -// export interface StepItem { -// title: string // 引导标题 -// content: string // 引导介绍内容 -// } export const stepsGuideProps = { - /* test: { - type: Object as PropType<{ xxx: xxx }> - } */ title: String, content: String } as const diff --git a/devui/steps-guide/src/steps-guide.scss b/devui/steps-guide/src/steps-guide.scss index d8a65717..cd6ce11b 100644 --- a/devui/steps-guide/src/steps-guide.scss +++ b/devui/steps-guide/src/steps-guide.scss @@ -1,15 +1,6 @@ -// @import '../style/theme/color'; -// @import '../style/theme/shadow'; -// @import '../style/theme/corner'; -// @import '../style/core/_font'; .d-steps-guide { width: 400px; min-height: 160px; - // background: $devui-brand; - // box-shadow: $devui-shadow-length-feedback-overlay rgba(81, 112, 255, 0.3); - // border-radius: $devui-border-radius-feedback; - // font-size: $devui-font-size; - // color: $devui-light-text; background: rgb(94, 124, 224); box-shadow: rgba(81, 112, 255, 0.3) 0 4px 16px 0; border-radius: 4px; @@ -19,7 +10,6 @@ position: absolute; .devui-title { - // font-size: $devui-font-size-page-title; opacity: 1; margin: 0 0 20px 0; padding: 0; diff --git a/devui/steps-guide/src/steps-guide.tsx b/devui/steps-guide/src/steps-guide.tsx index b6766b29..9b2f777e 100644 --- a/devui/steps-guide/src/steps-guide.tsx +++ b/devui/steps-guide/src/steps-guide.tsx @@ -10,12 +10,14 @@ export default defineComponent({ emits: [], setup(props: StepsGuideProps, ctx) { console.log(props, ctx, Teleport) + const teleport = Teleport const containerRef = ref(null) const position = reactive({ left: '', top: '', zIndex: 1100 }) + onMounted(() => { const triggerElement = containerRef.value.firstElementChild const targetRect = triggerElement.getBoundingClientRect(); @@ -26,7 +28,7 @@ export default defineComponent({ (
{/* 指引位置默认只允许存在根元素 */} { ctx.slots.default()[0] } - +
@@ -36,7 +38,7 @@ export default defineComponent({
{ props.content }
- + ) } }) diff --git a/sites/components/steps-guide/index.md b/sites/components/steps-guide/index.md new file mode 100644 index 00000000..cac07f08 --- /dev/null +++ b/sites/components/steps-guide/index.md @@ -0,0 +1,60 @@ +# steps-guide 操作指引 + +引导用户了解业务使用逻辑组件。 + +### 何时使用 + +业务推出新特性，或复杂的业务逻辑需要指引用户时使用。 + +### 基本用法 +设定一组操作指引信息顺序显示。 + + Step 1 + +
+ + Step 2 + +
+ +### 弹出位置 +总共支持 8 个弹出位置。 +
+ +### 自定义 +自定义操作指引信息弹出的位置和元素。 + +
+ +```html + + +``` + + + + +### API + +d-slider 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 | +| --------- | ------- | ----- | ------------------------------------------------------------------- | ---- | +| steps | array | [] | 必选，操作指引步骤数组 |[基本用法](#基本用法) | + -- Gitee