diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts index db1b532c6fda5e7fcce0288f9baa6f3d312885f1..877133f1a1784c41865e0a5ad339907190daa475 100644 --- a/packages/devui-vue/devui/read-tip/index.ts +++ b/packages/devui-vue/devui/read-tip/index.ts @@ -1,17 +1,17 @@ import type { App } from 'vue' import ReadTip from './src/read-tip' -ReadTip.install = function(app: App): void { +ReadTip.install = function (app: App): void { app.component(ReadTip.name, ReadTip) } -export { ReadTip, } +export { ReadTip, } export default { title: 'ReadTip 阅读提示', category: '反馈', - status: '30%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '50%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { - app.use(ReadTip as any) + app.use(ReadTip as any) } } 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 9ef7afb9187703e179d1c1f64622da87df0a0db7..10aa734e11b40c4fe63774d7ba26eadc84640930 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,52 +1,77 @@ -import { defineComponent, ref, onMounted, Teleport } from 'vue' -import { readTipProps, ReadTipProps, } from './read-tip-types' +import { defineComponent, reactive, ref, onMounted, Teleport, toRefs } from 'vue' +import { readTipProps, ReadTipProps, DefaultTemplateProps } from './read-tip-types' import './read-tip.scss' export default defineComponent({ - name: 'DReadTipTemplate', - props: readTipProps, - emits: [], - setup(props: ReadTipProps, ctx) { - const query = props.defaultTemplateProps?.id ? `#${props.defaultTemplateProps.id}` : props.defaultTemplateProps.selector + name: 'DReadTipTemplate', + props: readTipProps, + emits: [], + setup(props: ReadTipProps, ctx) { + const { defaultTemplateProps, } = toRefs(props) + let rule: DefaultTemplateProps = defaultTemplateProps.value + const query = rule?.id ? `#${rule.id}` : rule.selector; - const temp = ref(null) - onMounted(() => { - // 当定位为top展示时 元素定位高度需要计算弹窗的高度 - if(props.defaultTemplateProps.position == 'top') { - temp.value.style.top = (- temp.value.offsetHeight - 10) + 'px' - } - }) - return () => { - return ( - -
- - { - props.defaultTemplateProps.contentTemplate ? ctx.slots?.default() : - ( - <> -
- {props.defaultTemplateProps.title} -
-
- {props.defaultTemplateProps.content} -
- - ) - } - - {/* { - ctx.slots?.default() - } */} + const styles: any = reactive({}); + if (typeof rule.dataFn === 'function') { + const dataFn = rule.dataFn({ element: document.querySelector(query), rule }) + rule = { ...rule, ...dataFn } + } + const temp = ref(null); + onMounted(() => { + const domBounding = document.querySelector(query).getBoundingClientRect(); + const distance = 10; + let positionTop = 0; + let positionLeft = 0; + const targetDom = document.querySelector('.read-tip-container').getBoundingClientRect(); + if (rule.appendToBody) { + positionTop = domBounding.y + document.documentElement.scrollTop; + positionLeft = domBounding.x; + } + switch (rule.position) { + case 'top': + styles.top = positionTop - targetDom.height - distance + 'px'; + styles.left = positionLeft + 'px'; + break; + case 'left': + styles.top = positionTop + 'px'; + styles.left = positionLeft - targetDom.width - distance + 'px'; + break; + case 'bottom': + styles.top = positionTop + domBounding.height + distance + 'px' + styles.left = positionLeft + 'px'; + break; + case 'right': + styles.top = positionTop + 'px'; + styles.left = positionLeft + domBounding.width + distance + 'px'; + break; + } + }) + return () => { + return ( + +
+ + { + rule.contentTemplate ? ctx.slots?.default() : + ( + <> +
+ {rule.title}
- - - - ) - } +
+ {rule.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 422d29909a14880fc5d8dd19b8061a773d07ca69..7e673469842761ae0041db4e751296acd9551bf4 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,12 +15,18 @@ export type Trigger = 'hover' | 'click' export type DefaultTemplateProps = { title?: string content?: string - top?: number selector?: string position?: string - id? : string - temp: string - contentTemplate: boolean + id?: string + temp?: string + dom?: Element + contentTemplate?: boolean + overlayClassName?: string + dataFn?: ({ + element, + rule: ReadTipRule, + }) => { title?: string; content?: string; } + appendToBody?: boolean } export interface ReadTipOptions { @@ -32,6 +38,7 @@ export interface ReadTipOptions { overlayClassName?: string appendToBody?: boolean rules: ReadTipRules + } export type ReadTipRules = ReadTipRule | ReadTipRule[]; @@ -49,10 +56,10 @@ export interface ReadTipRule { overlayClassName?: string appendToBody?: boolean //customData与template搭配使用，customData为传入模板的上下文，可以自定义模板内容 - // dataFn?: ({ - // element, - // rule: ReadTipRule, - // }) => Observable<{ title?: string; content?: string; template?: TemplateRef; customData?: any }> + dataFn?: ({ + element, + rule: ReadTipRule, + }) => { title?: string; content?: string; } } 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 e113de163cc787ef65f0dcbe8cee85c856fa6dc5..893ab48947f46627f61b1ce9627de8f02a5adab3 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip.scss +++ b/packages/devui-vue/devui/read-tip/src/read-tip.scss @@ -7,6 +7,10 @@ // @import '../../style/core/z-index'; .devui-read-tip { position: relative; + + .title { + font-size: 16px; + } } .source { @@ -40,9 +44,6 @@ } // 定位 top &.top { - top: -60px; - left: 0; - .after { bottom: -4px; } @@ -50,9 +51,6 @@ // 定位 left &.left { - right: calc(100% + 10px); - top: -2px; - .after { right: -4px; } @@ -60,9 +58,6 @@ // 定位 right &.right { - left: calc(100% + 10px); - top: -2px; - .after { left: -4px; } @@ -70,8 +65,6 @@ // 定位 bottom &.bottom { - top: calc(100% + 10px); - .after { top: -4px; } 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 74333c4dbd8d756fb44aaf932a2a8c4ff4adfc1b..cc9ad63f87a30aaa9d97b4837c32130401dc047f 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, onUnmounted } from 'vue' +import { defineComponent, ref, onMounted, reactive, onUnmounted } from 'vue' import { readTipProps, ReadTipProps, ReadTipOptions } from './read-tip-types' import './read-tip.scss' import TipsTemplate from './read-tip-template'; @@ -47,18 +47,21 @@ export default defineComponent({ rules.map(rule => { rule.status = false trigger = rule.trigger || trigger + rule.overlayClassName = rule.overlayClassName || options.overlayClassName + rule.position = rule.position || options.position rule.contentTemplate = !!(ctx.slots.contentTemplate) + if (!('appendToBody' in rule)) rule.appendToBody = options.appendToBody const doms = defaultSlot.value.querySelectorAll(rule.selector); [...doms].map((dom, index) => { - dom.style.position = 'relative' - + if (rule.appendToBody === false) dom.style.position = 'relative'; let newRule = reactive({ id: null }) + const id = rule.selector.slice(rule.selector[0] === '.' ? 1 : 0) + index; if (index > 0) { newRule = { ...rule } - dom.id = rule.selector.slice(1) + index - newRule.id = rule.selector.slice(1) + index + dom.id = id + newRule.id = id rules.push(newRule) } @@ -72,7 +75,6 @@ export default defineComponent({ return rules } function show(dom, rule) { - const top = dom.offsetTop rule.status = true } // 把传入的props.rules统一转为数组对象格式 @@ -134,30 +136,32 @@ export default defineComponent({ } return () => { - return (
-
- { - ctx.slots?.default() - } -
- - {(refRules).map(rule => ( -
+
- {rule.status && ( - { - rule.contentTemplate && ctx.slots?.contentTemplate() - } - ) - + { + ctx.slots?.default() }
- ) - )} -
) + + {(refRules).map(rule => ( +
+ {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 d3c4c955d939359bd24083daa106f6cb5c54c3ce..19fe559bbae8aa1c908fd8e1b0cc7162dd4045ef 100644 --- a/packages/devui-vue/docs/components/read-tip/index.md +++ b/packages/devui-vue/docs/components/read-tip/index.md @@ -18,34 +18,32 @@

Set selector to display readtip

The following is the target you want to show readtip

@Jack - ``` @@ -71,9 +70,7 @@ const readTipOptions = {

Click here to display first content

Click here to display second content

Hover here to display third content

-

Another third content with same class name

- -
+

Hover here to display third content

@@ -86,12 +83,14 @@ const readTipOptions = { mouseleaveTime: 100, position: 'top', overlayClassName: 'read-tip-container', + appendToBody: false, rules: [ { selector: '.first-content', position: 'top', title: 'This Is the First Title', content: 'Lorem ipsum dolor sit amet, consectetur ad.', + overlayClassName:'red', }, { selector: '.second-content', @@ -99,13 +98,21 @@ const readTipOptions = { title: 'This Is the Second Title', content: 'Class aptent taciti sociosqu ad litora torquent per conubia nostra', overlayClassName: 'child-class', + overlayClassName:'red', }, { - trigger: 'hover', + trigger: 'click', selector: '.third-content', position: 'bottom', title: 'This Is the Third Title', content: 'Aenean libero urna, scelerisque tincidunt', + }, + { + trigger: 'click', + selector: '.four-content', + position: 'right', + title: 'This Is the Third Title', + content: 'Aenean libero urna, scelerisque tincidunt', }, ], }; @@ -113,12 +120,14 @@ const readTipOptions = { +``` + +::: + + + + +### 传入模板显示内容 +可以通过传入template自定义需要显示的内容，传入template时不必再传入title和content。 +:::demo + +```vue + + + + + +``` + +::: + +### 异步获取数据 + +通过设置selector选择需要显示readtip的元素，传入title和content设置显示的内容。 +:::demo + +```vue + + + + + ``` @@ -153,9 +320,9 @@ d-read-tip 参数 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | | -------------------- | ------------------ | ---- | ------------------------------- | ---------------------- | ---------- | -| readTipOptions | ReadTipOptions | -- | 必选，配置提示选项 | 基本用法 | -- | -| readTipOptions.rules | ReadTipRules | -- | 必选，配置 readtip 内容 | 包括多个提示的 readtip | -- | -| contentTemplate | `TemplateRef` | -- | 可选，传入模板显示 readtip 内容 | 传入模板显示内容 | -- | +| readTipOptions | ReadTipOptions | -- | 必选，配置提示选项 | [基本用法](#基本用法) | -- | +| readTipOptions.rules | ReadTipRules | -- | 必选，配置 readtip 内容 | [基本用法](#基本用法) | -- | +| contentTemplate | `TemplateRef` | -- | 可选，传入模板显示 readtip 内容 | [传入模板显示内容](#传入模板显示内容) | -- |