From 5c22b10f31efe252128a39738f1b4d1d3b4919a7 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Mon, 1 Nov 2021 12:58:43 +0800 Subject: [PATCH 01/12] feat: add [readTip] component --- .../devui/read-tip/__tests__/read-tip.spec.ts | 8 +++ packages/devui-vue/devui/read-tip/index.ts | 19 +++++++ .../devui/read-tip/src/read-tip-directive.ts | 10 ++++ .../devui/read-tip/src/read-tip-types.ts | 9 +++ .../devui/read-tip/src/read-tip.scss | 3 + .../devui-vue/devui/read-tip/src/read-tip.tsx | 14 +++++ .../docs/components/read-tip/index.md | 55 +++++++++++++++++++ 7 files changed, 118 insertions(+) create mode 100644 packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts create mode 100644 packages/devui-vue/devui/read-tip/index.ts create mode 100644 packages/devui-vue/devui/read-tip/src/read-tip-directive.ts create mode 100644 packages/devui-vue/devui/read-tip/src/read-tip-types.ts create mode 100644 packages/devui-vue/devui/read-tip/src/read-tip.scss create mode 100644 packages/devui-vue/devui/read-tip/src/read-tip.tsx create mode 100644 packages/devui-vue/docs/components/read-tip/index.md diff --git a/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts b/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts new file mode 100644 index 00000000..fae43c0e --- /dev/null +++ b/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts @@ -0,0 +1,8 @@ +import { mount } from '@vue/test-utils'; +import { ReadTip, ReadTipDirective } from '../index'; + +describe('read-tip test', () => { + it('read-tip init render', async () => { + // todo + }) +}) diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts new file mode 100644 index 00000000..30a52ade --- /dev/null +++ b/packages/devui-vue/devui/read-tip/index.ts @@ -0,0 +1,19 @@ +import type { App } from 'vue' +import ReadTip from './src/read-tip' +import ReadTipDirective from './src/read-tip-directive' + +ReadTip.install = function(app: App): void { + app.component(ReadTip.name, ReadTip) +} + +export { ReadTip, ReadTipDirective } + +export default { + title: 'ReadTip 阅读提示', + category: '反馈', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + app.use(ReadTip as any) + app.directive('ReadTip', ReadTipDirective) + } +} diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-directive.ts b/packages/devui-vue/devui/read-tip/src/read-tip-directive.ts new file mode 100644 index 00000000..788dde30 --- /dev/null +++ b/packages/devui-vue/devui/read-tip/src/read-tip-directive.ts @@ -0,0 +1,10 @@ +// can export function. +export default { + // created() { }, + // beforeMount() { }, + // mounted() { }, + // beforeUpdate() { }, + // updated() { }, + // beforeUnmount() { }, + // unmounted() { } +} diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts new file mode 100644 index 00000000..f4d190bc --- /dev/null +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -0,0 +1,9 @@ +import type { PropType, ExtractPropTypes } from 'vue' + +export const readTipProps = { + /* test: { + type: Object as PropType<{ xxx: xxx }> + } */ +} as const + +export type ReadTipProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.scss b/packages/devui-vue/devui/read-tip/src/read-tip.scss new file mode 100644 index 00000000..6efc8f91 --- /dev/null +++ b/packages/devui-vue/devui/read-tip/src/read-tip.scss @@ -0,0 +1,3 @@ +.devui-read-tip { + // +} diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx new file mode 100644 index 00000000..e462a922 --- /dev/null +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -0,0 +1,14 @@ +import { defineComponent } from 'vue' +import { readTipProps, ReadTipProps } from './read-tip-types' +import './read-tip.scss' + +export default defineComponent({ + name: 'DReadTip', + props: readTipProps, + emits: [], + setup(props: ReadTipProps, ctx) { + return () => { + return (
) + } + } +}) diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md new file mode 100644 index 00000000..a0608944 --- /dev/null +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -0,0 +1,55 @@ +# ReadTip 阅读提示 + +// todo 组件描述 + +### 何时使用 + +// todo 使用时机描述 + + +### 基本用法 +// todo 用法描述 +:::demo // todo 展开代码的内部描述 + +```vue + + + + + +``` + +::: + +### d-read-tip + +d-read-tip 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| ---- | ---- | ---- | ---- | --------- | --------- | +| | | | | | | +| | | | | | | +| | | | | | | + +d-read-tip 事件 + +| 事件 | 类型 | 说明 | 跳转 Demo | +| ---- | ---- | ---- | --------- | +| | | | | +| | | | | +| | | | | + -- Gitee From 59f7bd41e2bfad88b1905f52f79b1a5b4f97298c Mon Sep 17 00:00:00 2001 From: panyongxu Date: Mon, 1 Nov 2021 17:46:16 +0800 Subject: [PATCH 02/12] =?UTF-8?q?feat:=20=E5=88=9D=E6=AD=A5[read-tip]?= =?UTF-8?q?=E6=8F=90=E7=A4=BA=E6=96=87=E6=A1=88=E5=B1=95=E7=A4=BA=E5=87=BA?= =?UTF-8?q?=E6=9D=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/read-tip/src/read-tip-template.tsx | 26 +++ .../devui/read-tip/src/read-tip-types.ts | 44 ++++ .../devui/read-tip/src/read-tip.scss | 203 +++++++++++++++++- .../devui-vue/devui/read-tip/src/read-tip.tsx | 61 +++++- .../docs/components/read-tip/index.md | 134 +++++++++--- 5 files changed, 441 insertions(+), 27 deletions(-) create mode 100644 packages/devui-vue/devui/read-tip/src/read-tip-template.tsx diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx new file mode 100644 index 00000000..099354b4 --- /dev/null +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -0,0 +1,26 @@ +import { defineComponent, ref, onMounted } from 'vue' +import { readTipProps, ReadTipProps, } from './read-tip-types' +import './read-tip.scss' + +export default defineComponent({ + name: 'DReadTip', + props: readTipProps, + emits: [], + setup(props: ReadTipProps, ctx) { + + + return () => { + return ( +
+
+ {props.defaultTemplateProps.title} +
+
+ {props.defaultTemplateProps.content} +
+
+ + ) + } + } +}) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts index f4d190bc..4a61f9f9 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -4,6 +4,50 @@ export const readTipProps = { /* test: { type: Object as PropType<{ xxx: xxx }> } */ + readTipOptions : { + type : Object as PropType + }, + defaultTemplateProps : { + type : Object as PropType + } } as const +export type DefaultTemplateProps = { + title?: string + content?: string +} + +export interface ReadTipOptions { + trigger?: 'hover' | 'click' + showAnimate?: boolean + mouseenterTime?: number + mouseleaveTime?: number + position?: 'top' | 'bottom' + overlayClassName?: string + appendToBody?: boolean + rules: ReadTipRules +} + +export type ReadTipRules = ReadTipRule | ReadTipRule[]; + +export interface ReadTipRule { + key?: string + selector: string + trigger?: 'hover' | 'click' + title?: string + content?: string + showAnimate?: boolean + mouseenterTime?: number + mouseleaveTime?: number + position?: 'top' | 'bottom' + overlayClassName?: string + appendToBody?: boolean + //customData与template搭配使用，customData为传入模板的上下文，可以自定义模板内容 + // dataFn?: ({ + // element, + // rule: ReadTipRule, + // }) => Observable<{ title?: string; content?: string; template?: TemplateRef; customData?: any }> +} + + export type ReadTipProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.scss b/packages/devui-vue/devui/read-tip/src/read-tip.scss index 6efc8f91..079da1c2 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.scss +++ b/packages/devui-vue/devui/read-tip/src/read-tip.scss @@ -1,3 +1,204 @@ +@import '../../style/theme/color'; +@import '../../style/theme/variables'; +@import '../../style/mixins/index'; +@import '../../style/theme/shadow'; +@import '../../style/theme/corner'; +@import '../../style/core/_font'; +// @import '../../style/core/z-index'; .devui-read-tip { - // + position: relative; +} + +.read-tip-container { + font-size: $devui-font-size; + position: absolute; + top: 0; + left: 0; + line-height: 1.5; + border: none; + border-radius: $devui-border-radius-feedback; + // z-index: $devui-z-index-pop-up; + background-color: $devui-feedback-overlay-bg; + color: $devui-feedback-overlay-text; + overflow-wrap: break-word; + padding: 10px; +} + +:host.devui-popover { + font-size: $devui-font-size; + position: absolute; + top: 0; + left: 0; + line-height: 1.5; + border: none; + border-radius: $devui-border-radius-feedback; + // z-index: $devui-z-index-pop-up; + background-color: $devui-feedback-overlay-bg; + color: $devui-feedback-overlay-text; + overflow-wrap: break-word; + + > .arrow { + border-width: 8px; + + &, + &::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + &::after { + content: ''; + } + } + + &.top > .arrow { + transform: translateX(-50%); + border-bottom-width: 0; + border-top-color: $devui-feedback-overlay-bg; + bottom: -8px; + } + + &.right > .arrow { + left: -8px; + margin-top: -8px; + border-left-width: 0; + border-right-color: $devui-feedback-overlay-bg; + } + + &.bottom > .arrow { + transform: translateX(-50%); + border-top-width: 0; + border-bottom-color: $devui-feedback-overlay-bg; + top: -8px; + } + + &.left > .arrow { + right: -8px; + margin-top: -8px; + border-right-width: 0; + border-left-color: $devui-feedback-overlay-bg; + } + + &.bias-left > .arrow { + left: 14px; + } + + &.bias-right > .arrow { + right: 14px; + } + + &.bias-top > .arrow { + top: 13px; + } + + &.bias-bottom > .arrow { + bottom: 5px; + } + + &.bias-horizontal-center > .arrow { + left: 50%; + } + + &.bias-vertical-center > .arrow { + top: 50%; + } + + &.top { + margin-top: -8px; + box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; + } + + &.bottom { + margin-top: 8px; + box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; + } + + &.left { + margin-left: -8px; + box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; + } + + &.right { + margin-left: 8px; + box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; + } +} + +.devui-popover-content { + padding: 4px 12px; + + .read-tip-container { + .title { + font-size: $devui-font-size-page-title; + } + + .content { + font-size: $devui-font-size; + } + } +} + +.devui-popover-icon { + display: block; + position: absolute; + left: 10px; + top: 6px; + + svg.devui-icon { + width: 16px; + height: 16px; + } +} + +.devui-popover-main-content.with-icon { + text-indent: 20px; +} + +.devui-icon.devui-icon-success > g { + & > path { + fill: $devui-success; + } + + & > circle, + & > polygon { + fill: $devui-light-text; + } +} + +.devui-icon.devui-icon-warning > g { + & > polygon { + fill: $devui-light-text; + } + + & > path { + fill: $devui-warning; + } +} + +.devui-icon.devui-icon-info > g { + & > g { + fill: $devui-info; + } + + & > circle { + fill: $devui-light-text; + } +} + +.devui-icon.devui-icon-error > g { + & > path { + fill: $devui-danger; + } + + & > circle { + fill: $devui-light-text; + } +} + +.devui-popover-content { + padding: 4px 12px; } diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index e462a922..c01b4ada 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -1,14 +1,71 @@ -import { defineComponent } from 'vue' +import { defineComponent, ref, onMounted, reactive } from 'vue' import { readTipProps, ReadTipProps } from './read-tip-types' import './read-tip.scss' +import TipsTemplate from './read-tip-template'; export default defineComponent({ name: 'DReadTip', props: readTipProps, emits: [], setup(props: ReadTipProps, ctx) { + + const readTip = ref(null) + + const init = (rules, trigger = 'hover') => { + rules.map(rule => { + rule.status = false + trigger = rule.trigger || trigger + const dom = document.querySelector(rule.selector); + dom.style.position = 'relative' + if (trigger === 'hover') { + dom.addEventListener('mouseenter', () => { + rule.status = true + }) + dom.addEventListener('mouseleave', () => { + rule.status = false + }) + } + + if (trigger === 'click') { + dom.addEventListener('click', () => { + rule.status = true + }) + // dom.addEventListener('mouseleave', () => { + // rule.status = false + // }) + } + }) + return rules + } + + const rules = (rules) => { + if (rules === null) return + if (typeof rules === 'object' && !Array.isArray(rules)) { + rules = [rules] + } + rules = [...rules] + Array.isArray(rules) && rules.map(rule => { + rule.status = false + }) + return rules + } + const refRules = reactive(rules(props.readTipOptions.rules)) + + onMounted(() => { + init(refRules, props.readTipOptions.trigger || 'click') + }) return () => { - return (
) + return (
+ { + ctx.slots?.default() + } + {(refRules).map(rule => (rule.status && + // + + // + ) + )} +
) } } }) diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index a0608944..12c9d029 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -1,35 +1,127 @@ # ReadTip 阅读提示 -// todo 组件描述 +阅读提示组件。 ### 何时使用 -// todo 使用时机描述 +当html文档中需要对特定内容进行提示时使用。 ### 基本用法 -// todo 用法描述 -:::demo // todo 展开代码的内部描述 +通过设置selector选择需要显示readtip的元素，传入title和content设置显示的内容。 +:::demo ```vue - +``` + +::: + +### 包括多个提示的readtip +传入多个rule，设置不同元素的readtip显示模式。 +:::demo + +```vue + + + + + ``` @@ -39,17 +131,11 @@ export default defineComponent({ d-read-tip 参数 -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | -| ---- | ---- | ---- | ---- | --------- | --------- | -| | | | | | | -| | | | | | | -| | | | | | | +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| -------------------- | ------------------ | ---- | ------------------------------- | ---------------------- | ---------- | +| readTipOptions | ReadTipOptions | -- | 必选，配置提示选项 | 基本用法 | -- | +| readTipOptions.rules | ReadTipRules | -- | 必选，配置 readtip 内容 | 包括多个提示的 readtip | -- | +| contentTemplate | `TemplateRef` | -- | 可选，传入模板显示 readtip 内容 | 传入模板显示内容 | -- | -d-read-tip 事件 -| 事件 | 类型 | 说明 | 跳转 Demo | -| ---- | ---- | ---- | --------- | -| | | | | -| | | | | -| | | | | -- Gitee From 33b349839f8e5054382fbac42dd1bc459878ad90 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Mon, 1 Nov 2021 17:56:57 +0800 Subject: [PATCH 03/12] fix: [read-tip] bug --- packages/devui-vue/devui/read-tip/src/read-tip.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index c01b4ada..a27d2809 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -28,6 +28,9 @@ export default defineComponent({ if (trigger === 'click') { dom.addEventListener('click', () => { + rules.forEach(element => { + element.status = false + }); rule.status = true }) // dom.addEventListener('mouseleave', () => { -- Gitee From 4b070ae87bd3185b1c63a03c53e0497d5c6e025e Mon Sep 17 00:00:00 2001 From: panyongxu Date: Tue, 2 Nov 2021 13:35:02 +0800 Subject: [PATCH 04/12] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20[read-tip]?= =?UTF-8?q?=20=E7=82=B9=E5=87=BB=E5=85=B6=E4=BB=96=E5=8C=BA=E5=9F=9F?= =?UTF-8?q?=E5=8F=96=E6=B6=88=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/read-tip/src/read-tip.tsx | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index a27d2809..a4c82c61 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -19,7 +19,7 @@ export default defineComponent({ dom.style.position = 'relative' if (trigger === 'hover') { dom.addEventListener('mouseenter', () => { - rule.status = true + show(dom, rule) }) dom.addEventListener('mouseleave', () => { rule.status = false @@ -31,8 +31,17 @@ export default defineComponent({ rules.forEach(element => { element.status = false }); - rule.status = true + show(dom, rule) }) + document.addEventListener('click', (e :any) => { + rules.forEach(element => { + element.status = false + if(element.selector.indexOf(e.target.className) != -1) { + show(dom, element) + } + }); + + },false) // dom.addEventListener('mouseleave', () => { // rule.status = false // }) @@ -40,7 +49,9 @@ export default defineComponent({ }) return rules } - + function show(dom, rule) { + rule.status = true + } const rules = (rules) => { if (rules === null) return if (typeof rules === 'object' && !Array.isArray(rules)) { @@ -63,9 +74,9 @@ export default defineComponent({ ctx.slots?.default() } {(refRules).map(rule => (rule.status && - // + // - // + // ) )} ) -- Gitee From b64ad89dd839faf5d89a42f5b1ea34283255ea3f Mon Sep 17 00:00:00 2001 From: panyongxu Date: Wed, 3 Nov 2021 17:31:11 +0800 Subject: [PATCH 05/12] =?UTF-8?q?feat(readtip):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E9=80=9A=E8=BF=87css=E6=9D=A5=E6=8E=A7=E5=88=B6=E6=8F=90?= =?UTF-8?q?=E7=A4=BA=E6=A1=86=E7=9A=84=E4=BD=8D=E7=BD=AE=EF=BC=8C=E7=9B=AE?= =?UTF-8?q?=E5=89=8D=E6=94=AF=E6=8C=81=20=E4=B8=8A=E4=B8=8B=E5=B7=A6?= =?UTF-8?q?=E5=8F=B3=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/popover/src/popover.tsx | 15 +- .../devui/read-tip/src/read-tip-template.tsx | 12 +- .../devui/read-tip/src/read-tip-types.ts | 3 + .../devui/read-tip/src/read-tip.scss | 205 ++++-------------- .../devui-vue/devui/read-tip/src/read-tip.tsx | 81 ++++--- .../docs/components/read-tip/index.md | 7 +- 6 files changed, 122 insertions(+), 201 deletions(-) diff --git a/packages/devui-vue/devui/popover/src/popover.tsx b/packages/devui-vue/devui/popover/src/popover.tsx index f467f8b8..d0b367c3 100644 --- a/packages/devui-vue/devui/popover/src/popover.tsx +++ b/packages/devui-vue/devui/popover/src/popover.tsx @@ -16,7 +16,7 @@ const popTypeClass = { export default defineComponent({ name: 'DPopover', - + directives: { clickoutside: clickoutsideDirective }, @@ -81,7 +81,11 @@ export default defineComponent({ setup(props, ctx) { const { slots } = ctx; const visible = ref(props.visible); - const { position, content, zIndex, trigger, popType, popoverStyle, mouseEnterDelay, mouseLeaveDelay, showAnimation, popMaxWidth } = toRefs(props); + const { + position, content, zIndex, trigger, popType, + popoverStyle, mouseEnterDelay, mouseLeaveDelay, + showAnimation, popMaxWidth + } = toRefs(props); const style: CSSProperties = { zIndex: zIndex.value, ...popoverStyle.value } const isClick = trigger.value === 'click' const iconType = reactive(popTypeClass[popType.value]) @@ -110,7 +114,12 @@ export default defineComponent({ 'devui-popover-isVisible': visible.value } ]} > -
+
{slots.reference?.()}
diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index 099354b4..25aa07f6 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -1,17 +1,17 @@ -import { defineComponent, ref, onMounted } from 'vue' +import { defineComponent, ref, onMounted, Teleport } from 'vue' import { readTipProps, ReadTipProps, } from './read-tip-types' import './read-tip.scss' export default defineComponent({ - name: 'DReadTip', + name: 'DReadTipTemplate', props: readTipProps, emits: [], setup(props: ReadTipProps, ctx) { - - return () => { return ( -
+ +
+
{props.defaultTemplateProps.title}
@@ -19,6 +19,8 @@ export default defineComponent({ {props.defaultTemplateProps.content}
+ + ) } diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts index 4a61f9f9..9bbfb6e7 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -15,6 +15,9 @@ export const readTipProps = { export type DefaultTemplateProps = { title?: string content?: string + top?: number + selector: string + position: string } export interface ReadTipOptions { diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.scss b/packages/devui-vue/devui/read-tip/src/read-tip.scss index 079da1c2..e113de16 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.scss +++ b/packages/devui-vue/devui/read-tip/src/read-tip.scss @@ -9,26 +9,17 @@ position: relative; } -.read-tip-container { - font-size: $devui-font-size; - position: absolute; - top: 0; - left: 0; - line-height: 1.5; - border: none; - border-radius: $devui-border-radius-feedback; - // z-index: $devui-z-index-pop-up; - background-color: $devui-feedback-overlay-bg; - color: $devui-feedback-overlay-text; - overflow-wrap: break-word; - padding: 10px; +.source { + overflow: initial; } -:host.devui-popover { +.read-tip-container { font-size: $devui-font-size; position: absolute; - top: 0; - left: 0; + width: max-content; + height: max-content; + // top: 0; + // left: 0; line-height: 1.5; border: none; border-radius: $devui-border-radius-feedback; @@ -36,169 +27,53 @@ background-color: $devui-feedback-overlay-bg; color: $devui-feedback-overlay-text; overflow-wrap: break-word; + padding: 10px; + z-index: 50; - > .arrow { - border-width: 8px; - - &, - &::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } - - &::after { - content: ''; - } - } - - &.top > .arrow { - transform: translateX(-50%); - border-bottom-width: 0; - border-top-color: $devui-feedback-overlay-bg; - bottom: -8px; - } - - &.right > .arrow { - left: -8px; - margin-top: -8px; - border-left-width: 0; - border-right-color: $devui-feedback-overlay-bg; - } - - &.bottom > .arrow { - transform: translateX(-50%); - border-top-width: 0; - border-bottom-color: $devui-feedback-overlay-bg; - top: -8px; - } - - &.left > .arrow { - right: -8px; - margin-top: -8px; - border-right-width: 0; - border-left-color: $devui-feedback-overlay-bg; - } - - &.bias-left > .arrow { - left: 14px; - } - - &.bias-right > .arrow { - right: 14px; - } - - &.bias-top > .arrow { - top: 13px; - } - - &.bias-bottom > .arrow { - bottom: 5px; - } - - &.bias-horizontal-center > .arrow { - left: 50%; - } - - &.bias-vertical-center > .arrow { - top: 50%; + .after { + content: ''; + width: 12px; + height: 12px; + transform: rotate(45deg); + position: absolute; + background-color: $devui-feedback-overlay-bg; } - + // 定位 top &.top { - margin-top: -8px; - box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; - } + top: -60px; + left: 0; - &.bottom { - margin-top: 8px; - box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; + .after { + bottom: -4px; + } } + // 定位 left &.left { - margin-left: -8px; - box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; - } - - &.right { - margin-left: 8px; - box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow; - } -} + right: calc(100% + 10px); + top: -2px; -.devui-popover-content { - padding: 4px 12px; - - .read-tip-container { - .title { - font-size: $devui-font-size-page-title; + .after { + right: -4px; } - - .content { - font-size: $devui-font-size; - } - } -} - -.devui-popover-icon { - display: block; - position: absolute; - left: 10px; - top: 6px; - - svg.devui-icon { - width: 16px; - height: 16px; - } -} - -.devui-popover-main-content.with-icon { - text-indent: 20px; -} - -.devui-icon.devui-icon-success > g { - & > path { - fill: $devui-success; - } - - & > circle, - & > polygon { - fill: $devui-light-text; - } -} - -.devui-icon.devui-icon-warning > g { - & > polygon { - fill: $devui-light-text; } - & > path { - fill: $devui-warning; - } -} - -.devui-icon.devui-icon-info > g { - & > g { - fill: $devui-info; - } + // 定位 right + &.right { + left: calc(100% + 10px); + top: -2px; - & > circle { - fill: $devui-light-text; + .after { + left: -4px; + } } -} -.devui-icon.devui-icon-error > g { - & > path { - fill: $devui-danger; - } + // 定位 bottom + &.bottom { + top: calc(100% + 10px); - & > circle { - fill: $devui-light-text; + .after { + top: -4px; + } } } - -.devui-popover-content { - padding: 4px 12px; -} diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index a4c82c61..2d5582d8 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -1,5 +1,5 @@ -import { defineComponent, ref, onMounted, reactive } from 'vue' -import { readTipProps, ReadTipProps } from './read-tip-types' +import { defineComponent, ref, onMounted, reactive, Teleport, } from 'vue' +import { readTipProps, ReadTipProps, ReadTipOptions } from './read-tip-types' import './read-tip.scss' import TipsTemplate from './read-tip-template'; @@ -8,18 +8,31 @@ export default defineComponent({ props: readTipProps, emits: [], setup(props: ReadTipProps, ctx) { - + // 默认配置 + const defaultOptions: ReadTipOptions = { + trigger: 'hover', + showAnimate: false, + mouseenterTime: 100, + mouseleaveTime: 100, + position: 'top', + overlayClassName: '', + appendToBody: true, + rules: { selector: null }, + }; + const tempTop = ref(0) + const options = { ...defaultOptions, ...props.readTipOptions } + const defaultSlot = ref(null) const readTip = ref(null) - + const init = (rules, trigger = 'hover') => { rules.map(rule => { rule.status = false trigger = rule.trigger || trigger - const dom = document.querySelector(rule.selector); + const dom = defaultSlot.value.querySelector(rule.selector); dom.style.position = 'relative' if (trigger === 'hover') { dom.addEventListener('mouseenter', () => { - show(dom, rule) + show(dom, rule, ) }) dom.addEventListener('mouseleave', () => { rule.status = false @@ -33,15 +46,15 @@ export default defineComponent({ }); show(dom, rule) }) - document.addEventListener('click', (e :any) => { - rules.forEach(element => { - element.status = false - if(element.selector.indexOf(e.target.className) != -1) { - show(dom, element) - } - }); - - },false) + // document.addEventListener('click', (e: any) => { + // rules.forEach(element => { + // element.status = false + // if (element.selector.indexOf(e.target.className) != -1) { + // show(dom, element) + // } + // }); + + // }, false) // dom.addEventListener('mouseleave', () => { // rule.status = false // }) @@ -50,7 +63,12 @@ export default defineComponent({ return rules } function show(dom, rule) { + const top = dom.offsetTop + // console.log("🚀 ~ file: read-tip.tsx ~ line 66 ~ show ~ top", top) + const t = document.querySelector('.read-tip-container') + // t = t >= 0 ? -t - 50 : t rule.status = true + tempTop.value = top - 60 } const rules = (rules) => { if (rules === null) return @@ -63,20 +81,33 @@ export default defineComponent({ }) return rules } - const refRules = reactive(rules(props.readTipOptions.rules)) + const refRules = reactive(rules(options.rules)) onMounted(() => { - init(refRules, props.readTipOptions.trigger || 'click') + init(refRules, options.trigger) + // console.log("🚀 ~ file: read-tip.tsx ~ line 25 ~ setup ~ defaultSlot", defaultSlot.value) + }) return () => { - return (
- { - ctx.slots?.default() - } - {(refRules).map(rule => (rule.status && - // - - // + return (
+
{ + console.log(e,'.readtip-target') + // var a = e.target.querySelector('.readtip-target') + // console.log("🚀 ~ file: read-tip.tsx ~ line 98 ~ return ~ a", a) + }} + > + { + ctx.slots?.default() + } +
+ + {(refRules).map(rule => ( +
+ {rule.status && } +
) )}
) diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index 12c9d029..7ae1bef7 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -27,6 +27,7 @@ const readTipOptions = { trigger: 'click', rules: { trigger: 'hover', + position:'top', selector: '.readtip-target', title: 'Name: Jack', content: 'This is Jack\'s profile', @@ -84,13 +85,13 @@ const readTipOptions = { rules: [ { selector: '.first-content', - position: 'left', + position: 'top', title: 'This Is the First Title', content: 'Lorem ipsum dolor sit amet, consectetur ad.', }, { selector: '.second-content', - position: 'top-left', + position: 'left', title: 'This Is the Second Title', content: 'Class aptent taciti sociosqu ad litora torquent per conubia nostra', overlayClassName: 'child-class', @@ -98,7 +99,7 @@ const readTipOptions = { { trigger: 'hover', selector: '.third-content', - position: 'bottom-left', + position: 'right', title: 'This Is the Third Title', content: 'Aenean libero urna, scelerisque tincidunt', }, -- Gitee From 13b406e2769c371db750541a37226798aae18412 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Wed, 3 Nov 2021 17:44:57 +0800 Subject: [PATCH 06/12] =?UTF-8?q?feat(readTip):=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=BC=80=E5=8F=91=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/read-tip/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts index 30a52ade..d369dc31 100644 --- a/packages/devui-vue/devui/read-tip/index.ts +++ b/packages/devui-vue/devui/read-tip/index.ts @@ -11,7 +11,7 @@ export { ReadTip, ReadTipDirective } export default { title: 'ReadTip 阅读提示', category: '反馈', - status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '5%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { app.use(ReadTip as any) app.directive('ReadTip', ReadTipDirective) -- Gitee From f8bdffc13a766ba83d371b7be0de57b418f034b9 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Thu, 4 Nov 2021 13:53:54 +0800 Subject: [PATCH 07/12] =?UTF-8?q?feat(readTip):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E9=BC=A0=E6=A0=87=E7=82=B9=E5=87=BB=E5=92=8C=E9=BC=A0=E6=A0=87?= =?UTF-8?q?=E7=A7=BB=E5=85=A5=E7=A7=BB=E5=87=BA=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/read-tip/src/read-tip-types.ts | 28 +++--- .../devui-vue/devui/read-tip/src/read-tip.tsx | 86 ++++++++++--------- .../docs/components/read-tip/index.md | 2 +- 3 files changed, 61 insertions(+), 55 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts index 9bbfb6e7..9d69d1d3 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -1,31 +1,31 @@ import type { PropType, ExtractPropTypes } from 'vue' export const readTipProps = { - /* test: { - type: Object as PropType<{ xxx: xxx }> - } */ - readTipOptions : { - type : Object as PropType + readTipOptions: { + type: Object as PropType }, - defaultTemplateProps : { - type : Object as PropType + defaultTemplateProps: { + type: Object as PropType } } as const -export type DefaultTemplateProps = { +export type Position = 'top' | 'left' | 'right' | 'bottom' +export type Trigger = 'hover' | 'click' + +export type DefaultTemplateProps = { title?: string content?: string top?: number - selector: string - position: string + selector?: string + position?: string } export interface ReadTipOptions { - trigger?: 'hover' | 'click' + trigger?: Trigger showAnimate?: boolean mouseenterTime?: number mouseleaveTime?: number - position?: 'top' | 'bottom' + position?: Position overlayClassName?: string appendToBody?: boolean rules: ReadTipRules @@ -36,13 +36,13 @@ export type ReadTipRules = ReadTipRule | ReadTipRule[]; export interface ReadTipRule { key?: string selector: string - trigger?: 'hover' | 'click' + trigger?: Trigger title?: string content?: string showAnimate?: boolean mouseenterTime?: number mouseleaveTime?: number - position?: 'top' | 'bottom' + position?: Position overlayClassName?: string appendToBody?: boolean //customData与template搭配使用，customData为传入模板的上下文，可以自定义模板内容 diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index 2d5582d8..9b3d1d15 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -1,4 +1,4 @@ -import { defineComponent, ref, onMounted, reactive, Teleport, } from 'vue' +import { defineComponent, ref, onMounted, reactive, Teleport, onUnmounted } from 'vue' import { readTipProps, ReadTipProps, ReadTipOptions } from './read-tip-types' import './read-tip.scss' import TipsTemplate from './read-tip-template'; @@ -20,56 +20,43 @@ export default defineComponent({ rules: { selector: null }, }; const tempTop = ref(0) + // 合并基础配置 const options = { ...defaultOptions, ...props.readTipOptions } const defaultSlot = ref(null) const readTip = ref(null) - + const onMouseenter = (rule) => () => { + setTimeout(() => { + rule.status = true + }, rule.mouseenterTime || options.mouseenterTime); + } + const onMouseleave = (rule) => () => { + setTimeout(() => { + rule.status = false + }, rule.mouseleaveTime || options.mouseleaveTime); + } + const init = (rules, trigger = 'hover') => { rules.map(rule => { rule.status = false trigger = rule.trigger || trigger const dom = defaultSlot.value.querySelector(rule.selector); dom.style.position = 'relative' - if (trigger === 'hover') { - dom.addEventListener('mouseenter', () => { - show(dom, rule, ) - }) - dom.addEventListener('mouseleave', () => { - rule.status = false - }) - } - - if (trigger === 'click') { - dom.addEventListener('click', () => { - rules.forEach(element => { - element.status = false - }); - show(dom, rule) - }) - // document.addEventListener('click', (e: any) => { - // rules.forEach(element => { - // element.status = false - // if (element.selector.indexOf(e.target.className) != -1) { - // show(dom, element) - // } - // }); - // }, false) - // dom.addEventListener('mouseleave', () => { - // rule.status = false - // }) + if (trigger === 'hover') { + dom.addEventListener('mouseenter', onMouseenter(rule)) + dom.addEventListener('mouseleave', onMouseleave(rule)) } }) return rules } function show(dom, rule) { const top = dom.offsetTop - // console.log("🚀 ~ file: read-tip.tsx ~ line 66 ~ show ~ top", top) - const t = document.querySelector('.read-tip-container') + // const t = document.querySelector('.read-tip-container') // t = t >= 0 ? -t - 50 : t rule.status = true - tempTop.value = top - 60 + // tempTop.value = top - 60 } + // 把传入的props.rules统一转为数组对象格式 const rules = (rules) => { if (rules === null) return if (typeof rules === 'object' && !Array.isArray(rules)) { @@ -82,20 +69,39 @@ export default defineComponent({ return rules } const refRules = reactive(rules(options.rules)) - + const clickFn = () => { + refRules.forEach(element => { + element.status = false + }) + } onMounted(() => { init(refRules, options.trigger) - // console.log("🚀 ~ file: read-tip.tsx ~ line 25 ~ setup ~ defaultSlot", defaultSlot.value) + // 点击其他位置 关闭弹框 + document.addEventListener('click', clickFn, true) + + }) + onUnmounted(() => { + // 取消事件 + document.removeEventListener('click', clickFn) }) + + // 添加点击事件 当前元素是click事件目标则弹框展示 + const onClick = (e: Event) => { + for (const rule of refRules) { + const dom = defaultSlot.value.querySelector(rule.selector); + if (dom === e.target) { + console.log(1); + show(dom, rule) + return + } + } + } + return () => { return (
-
{ - console.log(e,'.readtip-target') - // var a = e.target.querySelector('.readtip-target') - // console.log("🚀 ~ file: read-tip.tsx ~ line 98 ~ return ~ a", a) - }} +
{ ctx.slots?.default() diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index 7ae1bef7..65a42b2e 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -99,7 +99,7 @@ const readTipOptions = { { trigger: 'hover', selector: '.third-content', - position: 'right', + position: 'bottom', title: 'This Is the Third Title', content: 'Aenean libero urna, scelerisque tincidunt', }, -- Gitee From 8ce581e5be466ff7be5d2620bf59b74ee23520f7 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Fri, 5 Nov 2021 09:21:54 +0800 Subject: [PATCH 08/12] =?UTF-8?q?fix(readTip):=20=E7=9B=AE=E5=89=8D?= =?UTF-8?q?=E9=87=87=E7=94=A8=E6=8A=8A=E5=BC=B9=E6=A1=86=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=88=B0=E7=9B=AE=E6=A0=87=E5=85=83=E7=B4=A0=E4=B9=8B=E5=86=85?= =?UTF-8?q?=E6=9D=A5=E5=AE=9A=E4=BD=8D=EF=BC=8C=E8=B7=9Fag=E7=89=88?= =?UTF-8?q?=E6=9C=AC=E4=B8=8D=E7=AC=A6=E5=90=88=EF=BC=8C=E5=87=86=E5=A4=87?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/read-tip/src/read-tip-template.tsx | 35 ++++-- .../devui/read-tip/src/read-tip-types.ts | 4 +- .../devui-vue/devui/read-tip/src/read-tip.tsx | 116 ++++++++++++++++-- .../docs/components/read-tip/index.md | 18 +++ 4 files changed, 149 insertions(+), 24 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index 25aa07f6..9dca323b 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -7,20 +7,35 @@ export default defineComponent({ props: readTipProps, emits: [], setup(props: ReadTipProps, ctx) { + // console.log(ctx.slots?.default()); + + const query = props.defaultTemplateProps?.id ? `#${props.defaultTemplateProps.id}` : props.defaultTemplateProps.selector return () => { return ( - -
- -
- {props.defaultTemplateProps.title} -
-
- {props.defaultTemplateProps.content} + +
+ + { + // ctx.slots?.comp ? ctx.slots?.comp() : + ( + <> +
+ {props.defaultTemplateProps.title} +
+
+ {props.defaultTemplateProps.content} +
+ + ) + } + + + + +
-
- + ) } diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts index 9d69d1d3..35cc1577 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -5,7 +5,7 @@ export const readTipProps = { type: Object as PropType }, defaultTemplateProps: { - type: Object as PropType + type: Object as PropType } } as const @@ -18,6 +18,8 @@ export type DefaultTemplateProps = { top?: number selector?: string position?: string + id? : string + temp: string } export interface ReadTipOptions { diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index 9b3d1d15..2c7e2d56 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -2,6 +2,7 @@ import { defineComponent, ref, onMounted, reactive, Teleport, onUnmounted } from import { readTipProps, ReadTipProps, ReadTipOptions } from './read-tip-types' import './read-tip.scss' import TipsTemplate from './read-tip-template'; +import { template } from 'lodash-es'; export default defineComponent({ name: 'DReadTip', @@ -26,12 +27,21 @@ export default defineComponent({ const readTip = ref(null) const onMouseenter = (rule) => () => { setTimeout(() => { + if (rule.id) { + const a = refRules.find(u => u.id === rule.id) + a.status = true + } rule.status = true }, rule.mouseenterTime || options.mouseenterTime); } const onMouseleave = (rule) => () => { setTimeout(() => { + if (rule.id) { + const a = refRules.find(u => u.id === rule.id) + a.status = false + } rule.status = false + }, rule.mouseleaveTime || options.mouseleaveTime); } @@ -39,13 +49,27 @@ export default defineComponent({ rules.map(rule => { rule.status = false trigger = rule.trigger || trigger - const dom = defaultSlot.value.querySelector(rule.selector); - dom.style.position = 'relative' + const doms = defaultSlot.value.querySelectorAll(rule.selector); + [...doms].map((dom, index) => { + dom.style.position = 'relative' + + let newRule = reactive({ + id: null + }) + if (index > 0) { + newRule = { ...rule } + dom.id = rule.selector.slice(1) + index + newRule.id = rule.selector.slice(1) + index + rules.push(newRule) + } + console.log('newRule', newRule); + + if (trigger === 'hover') { + dom.addEventListener('mouseenter', onMouseenter(newRule.id ? newRule : rule,)) + dom.addEventListener('mouseleave', onMouseleave(newRule.id ? newRule : rule)) + } + }) - if (trigger === 'hover') { - dom.addEventListener('mouseenter', onMouseenter(rule)) - dom.addEventListener('mouseleave', onMouseleave(rule)) - } }) return rules } @@ -89,15 +113,66 @@ export default defineComponent({ // 添加点击事件 当前元素是click事件目标则弹框展示 const onClick = (e: Event) => { for (const rule of refRules) { - const dom = defaultSlot.value.querySelector(rule.selector); - if (dom === e.target) { - console.log(1); - show(dom, rule) - return + const doms = defaultSlot.value.querySelectorAll(rule.selector); + for (const dom of doms) { + if (doms.length > 1) { + if (dom === e.target && rule.id) { + show(dom, rule) + return + + } else if (dom === e.target && !rule.id && !dom.id) { + show(dom, rule) + return + } + + } else + + if (dom === e.target) { + console.log(2); + show(dom, rule) + return + } else { + rule.status = false + } } + } - } + return + console.log('.refRules.length', refRules.length) + for (let index = 0; index < refRules.length; index++) { + const element = refRules[index]; + // console.log("🚀 ~ file: read-tip.tsx ~ line 126 ~ onClick ~ element", element) + console.log('🚀 ~ file: read-tip.tsx ~ line 126 ~ onClick ~ index', index) + const doms = defaultSlot.value.querySelectorAll(element.selector); + console.log('🚀 ~ file: read-tip.tsx ~ line 130 ~ onClick ~ doms', doms.length) + // [...doms].map((dom, index) => { + // // console.log("🚀 ~ file: read-tip.tsx ~ line 121 ~ [...doms].map ~ dom", dom.id,rule.id) + + // if(element.id === dom.id ) { + // console.log(1); + + // } + // // console.log("🚀 ~ file: read-tip.tsx ~ line 102 ~ onClick ~ rule", rule.id) + // // if (dom === e.target && rule.id) { + // // console.log(1); + // // show(dom, rule) + // // } + // // console.log("🚀 ~ file: read-tip.tsx ~ line 111 ~ [...doms].map ~ dom", dom,rule) + // }) + if (doms.length > 1) { + for (let index = 0; index < doms.length; index++) { + const dom = doms[index]; + console.log('🚀 ~ file: read-tip.tsx ~ line 144 ~ onClick ~ dom', { dom }, dom, element) + if (element.id === dom.id) { + console.log(1); + show(dom, element) + } + } + } + + } + } return () => { return (
+ {/* + + */} + {(refRules).map(rule => (
- {rule.status && } + {/* {rule.status && temp(rule)} */} + {rule.status && ( + + + {/* + */} + {/*
+ {ctx.slots?.contentTemplate && ctx.slots?.contentTemplate()} +
*/} + ) + + }
) )} diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index 65a42b2e..dd75f0b0 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -18,6 +18,9 @@

Set selector to display readtip

The following is the target you want to show readtip

@Jack + @@ -123,6 +126,21 @@ const readTipOptions = { .readtip-target:hover { text-decoration: underline; } + +.first-content { + font-weight: bold; + margin-bottom: 4px; + cursor: pointer; +} + +.second-content { + font-weight: bold; + cursor: pointer; +} + +.third-content { + cursor: pointer; +} ``` -- Gitee From 56a7b3dfccf27bcdaae58428e3c3b53316a5f4e8 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Sat, 6 Nov 2021 23:09:12 +0800 Subject: [PATCH 09/12] =?UTF-8?q?fix:=20[readTip]=20=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E6=97=A0=E7=94=A8=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/read-tip/src/read-tip-template.tsx | 2 - .../devui-vue/devui/read-tip/src/read-tip.tsx | 40 ------------------- 2 files changed, 42 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index 9dca323b..3f5566de 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -7,8 +7,6 @@ export default defineComponent({ props: readTipProps, emits: [], setup(props: ReadTipProps, ctx) { - // console.log(ctx.slots?.default()); - const query = props.defaultTemplateProps?.id ? `#${props.defaultTemplateProps.id}` : props.defaultTemplateProps.selector return () => { return ( diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index 2c7e2d56..e6b31612 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -2,7 +2,6 @@ import { defineComponent, ref, onMounted, reactive, Teleport, onUnmounted } from import { readTipProps, ReadTipProps, ReadTipOptions } from './read-tip-types' import './read-tip.scss' import TipsTemplate from './read-tip-template'; -import { template } from 'lodash-es'; export default defineComponent({ name: 'DReadTip', @@ -24,7 +23,6 @@ export default defineComponent({ // 合并基础配置 const options = { ...defaultOptions, ...props.readTipOptions } const defaultSlot = ref(null) - const readTip = ref(null) const onMouseenter = (rule) => () => { setTimeout(() => { if (rule.id) { @@ -62,7 +60,6 @@ export default defineComponent({ newRule.id = rule.selector.slice(1) + index rules.push(newRule) } - console.log('newRule', newRule); if (trigger === 'hover') { dom.addEventListener('mouseenter', onMouseenter(newRule.id ? newRule : rule,)) @@ -75,10 +72,7 @@ export default defineComponent({ } function show(dom, rule) { const top = dom.offsetTop - // const t = document.querySelector('.read-tip-container') - // t = t >= 0 ? -t - 50 : t rule.status = true - // tempTop.value = top - 60 } // 把传入的props.rules统一转为数组对象格式 const rules = (rules) => { @@ -137,41 +131,7 @@ export default defineComponent({ } } - return - console.log('.refRules.length', refRules.length) - for (let index = 0; index < refRules.length; index++) { - const element = refRules[index]; - // console.log("🚀 ~ file: read-tip.tsx ~ line 126 ~ onClick ~ element", element) - console.log('🚀 ~ file: read-tip.tsx ~ line 126 ~ onClick ~ index', index) - const doms = defaultSlot.value.querySelectorAll(element.selector); - console.log('🚀 ~ file: read-tip.tsx ~ line 130 ~ onClick ~ doms', doms.length) - - // [...doms].map((dom, index) => { - // // console.log("🚀 ~ file: read-tip.tsx ~ line 121 ~ [...doms].map ~ dom", dom.id,rule.id) - - // if(element.id === dom.id ) { - // console.log(1); - - // } - // // console.log("🚀 ~ file: read-tip.tsx ~ line 102 ~ onClick ~ rule", rule.id) - // // if (dom === e.target && rule.id) { - // // console.log(1); - // // show(dom, rule) - // // } - // // console.log("🚀 ~ file: read-tip.tsx ~ line 111 ~ [...doms].map ~ dom", dom,rule) - // }) - if (doms.length > 1) { - for (let index = 0; index < doms.length; index++) { - const dom = doms[index]; - console.log('🚀 ~ file: read-tip.tsx ~ line 144 ~ onClick ~ dom', { dom }, dom, element) - if (element.id === dom.id) { - console.log(1); - show(dom, element) - } - } - } - } } return () => { return (
-- Gitee From 1f3daf2d7ad57154092aea32a5b064e630bebc19 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Mon, 8 Nov 2021 09:50:10 +0800 Subject: [PATCH 10/12] =?UTF-8?q?fix:=20[readTip]=20=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E6=97=A0=E7=94=A8=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/read-tip/src/read-tip-template.tsx | 4 ++-- packages/devui-vue/devui/read-tip/src/read-tip.tsx | 14 ++------------ 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index 3f5566de..46feb18a 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -27,9 +27,9 @@ export default defineComponent({ ) } - + {/* - + */}
diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index e6b31612..fe36f3fc 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -143,23 +143,13 @@ export default defineComponent({ }
- {/* - - */} {(refRules).map(rule => (
- {/* {rule.status && temp(rule)} */} - {rule.status && ( - - - {/* - */} - {/*
- {ctx.slots?.contentTemplate && ctx.slots?.contentTemplate()} -
*/} + {rule.status && ( + ) } -- Gitee From 5ed0e3fd746a81af64af85b76cd8b0c683399c49 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Mon, 8 Nov 2021 17:41:42 +0800 Subject: [PATCH 11/12] =?UTF-8?q?feat:=20[readTip]=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E6=9B=BF=E6=8D=A2=E5=8A=9F=E8=83=BD=20?= =?UTF-8?q?=E5=B9=B6=E4=B8=94=E6=9B=B4=E6=96=B0=E5=BC=80=E5=8F=91=E5=AE=8C?= =?UTF-8?q?=E6=88=90=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/read-tip/index.ts | 6 ++---- .../devui/read-tip/src/read-tip-template.tsx | 21 ++++++++++++++----- .../devui/read-tip/src/read-tip-types.ts | 1 + .../devui-vue/devui/read-tip/src/read-tip.tsx | 11 +++++----- .../docs/components/read-tip/index.md | 3 ++- 5 files changed, 27 insertions(+), 15 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts index d369dc31..d8435332 100644 --- a/packages/devui-vue/devui/read-tip/index.ts +++ b/packages/devui-vue/devui/read-tip/index.ts @@ -1,19 +1,17 @@ import type { App } from 'vue' import ReadTip from './src/read-tip' -import ReadTipDirective from './src/read-tip-directive' ReadTip.install = function(app: App): void { app.component(ReadTip.name, ReadTip) } -export { ReadTip, ReadTipDirective } +export { ReadTip, } export default { title: 'ReadTip 阅读提示', category: '反馈', - status: '5%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '20%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { app.use(ReadTip as any) - app.directive('ReadTip', ReadTipDirective) } } diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index 46feb18a..9ef7afb9 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -8,13 +8,24 @@ export default defineComponent({ emits: [], setup(props: ReadTipProps, ctx) { const query = props.defaultTemplateProps?.id ? `#${props.defaultTemplateProps.id}` : props.defaultTemplateProps.selector + + const temp = ref(null) + onMounted(() => { + // 当定位为top展示时 元素定位高度需要计算弹窗的高度 + if(props.defaultTemplateProps.position == 'top') { + temp.value.style.top = (- temp.value.offsetHeight - 10) + 'px' + } + }) return () => { return ( -
+
{ - // ctx.slots?.comp ? ctx.slots?.comp() : + props.defaultTemplateProps.contentTemplate ? ctx.slots?.default() : ( <>
@@ -27,9 +38,9 @@ export default defineComponent({ ) } - {/* - - */} + {/* { + ctx.slots?.default() + } */}
diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts index 35cc1577..422d2990 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-types.ts +++ b/packages/devui-vue/devui/read-tip/src/read-tip-types.ts @@ -20,6 +20,7 @@ export type DefaultTemplateProps = { position?: string id? : string temp: string + contentTemplate: boolean } export interface ReadTipOptions { diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx index fe36f3fc..74333c4d 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx @@ -47,6 +47,7 @@ export default defineComponent({ rules.map(rule => { rule.status = false trigger = rule.trigger || trigger + rule.contentTemplate = !!(ctx.slots.contentTemplate) const doms = defaultSlot.value.querySelectorAll(rule.selector); [...doms].map((dom, index) => { dom.style.position = 'relative' @@ -122,7 +123,6 @@ export default defineComponent({ } else if (dom === e.target) { - console.log(2); show(dom, rule) return } else { @@ -134,7 +134,7 @@ export default defineComponent({ } return () => { - return (
+ return (
@@ -143,13 +143,14 @@ export default defineComponent({ }
- {(refRules).map(rule => (
- {rule.status && ( - + {rule.status && ( + { + rule.contentTemplate && ctx.slots?.contentTemplate() + } ) } diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index dd75f0b0..0d94d587 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -29,7 +29,7 @@ import { defineComponent } from 'vue' const readTipOptions = { trigger: 'click', rules: { - trigger: 'hover', + trigger: 'click', position:'top', selector: '.readtip-target', title: 'Name: Jack', @@ -72,6 +72,7 @@ const readTipOptions = {

Click here to display second content

Hover here to display third content

Another third content with same class name

+
-- Gitee From f12782bc57179a1793e8666e25e5d33af1ce2ed6 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Mon, 8 Nov 2021 18:01:35 +0800 Subject: [PATCH 12/12] =?UTF-8?q?docs:=20[readTip]=20=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/read-tip/index.ts | 2 +- .../docs/components/read-tip/index.md | 35 ++++++++++++++++++- 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts index d8435332..db1b532c 100644 --- a/packages/devui-vue/devui/read-tip/index.ts +++ b/packages/devui-vue/devui/read-tip/index.ts @@ -10,7 +10,7 @@ export { ReadTip, } export default { title: 'ReadTip 阅读提示', category: '反馈', - status: '20%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '30%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { app.use(ReadTip as any) } diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md index 0d94d587..d3c4c955 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -19,7 +19,7 @@

The following is the target you want to show readtip

@Jack @@ -159,3 +159,36 @@ d-read-tip 参数 +``` +export interface ReadTipOptions { + trigger?: 'hover' | 'click'; // 默认值是 hover + showAnimate?: boolean; // 默认值是 false + mouseenterTime?: number; // 默认值是 100 + mouseleaveTime?: number; // 默认值是 100 + position?: PositionType | PositionType[]; // 默认值是 'top' + overlayClassName?: string; // 默认值为空字符串 + appendToBody?: boolean; // 默认值为true + rules: ReadTipRules; +} +export type ReadTipRules = ReadTipRule | ReadTipRule[]; + +export interface ReadTipRule { + key?: string; + selector: string; + trigger?: 'hover' | 'click'; // 可以继承自 ReadTipOptions + title?: string; + content?: string; + showAnimate?: boolean; // 可以继承自 ReadTipOptions + mouseenterTime?: number; // 可以继承自 ReadTipOptions + mouseleaveTime?: number; // 可以继承自 ReadTipOptions + position?: PositionType | PositionType[]; // 可以继承自 ReadTipOptions + overlayClassName?: string; // 可以继承自 ReadTipOptions + appendToBody?: boolean; //可以继承自 ReadTipOtions + //customData与template搭配使用，customData为传入模板的上下文，可以自定义模板内容 + dataFn?: ({ + element, + rule: ReadTipRule, + }) => Observable<{ title?: string; content?: string; template?: TemplateRef; customData?: any }>; +} +``` + -- Gitee