From fac68661dfb504f25c0ddccaf584566b4d3aa4f4 Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Wed, 17 Nov 2021 19:42:54 +0800
Subject: [PATCH 01/10] =?UTF-8?q?feat:=20[readTip]=20=E6=96=B0=E5=A2=9Eove?=
 =?UTF-8?q?rlayClassName=20=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/read-tip/src/read-tip.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 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 74333c4d..4cb16a00 100644
--- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx
+++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx
@@ -134,7 +134,8 @@ export default defineComponent({
 
     }
     return () => {
-      return (<div class="devui-read-tip"  >
+      return (
+      <div class="devui-read-tip">
         <div ref={defaultSlot}
           onClick={onClick}
         >
@@ -157,7 +158,8 @@ export default defineComponent({
           </div>
         )
         )}
-      </div>)
+      </div>
+      )
     }
   }
 })
-- 
Gitee


From d32a2f3f0900199fc4d54548be7112f264e7806b Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Wed, 17 Nov 2021 19:45:33 +0800
Subject: [PATCH 02/10] =?UTF-8?q?feat:=20[readTip]=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/.ls-lint.yml                             | 2 +-
 packages/devui-vue/devui/read-tip/src/read-tip-template.tsx | 2 +-
 packages/devui-vue/devui/read-tip/src/read-tip-types.ts     | 2 ++
 packages/devui-vue/devui/read-tip/src/read-tip.tsx          | 2 +-
 packages/devui-vue/docs/components/read-tip/index.md        | 4 ++++
 5 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/devui-vue/.ls-lint.yml b/packages/devui-vue/.ls-lint.yml
index b367ef20..03019617 100644
--- a/packages/devui-vue/.ls-lint.yml
+++ b/packages/devui-vue/.ls-lint.yml
@@ -4,7 +4,7 @@ ls:
     .scss: kebab-case
     .vue: kebab-case
     .js: kebab-case
-    .ts: kebab-case
+    # .ts: kebab-case
     .tsx: kebab-case
     .spec.ts: kebab-case
     .route.ts: kebab-case
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 9ef7afb9..f6d1cafa 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
@@ -21,7 +21,7 @@ export default defineComponent({
                 <Teleport to={query} >
                     <div 
                     ref={temp}
-                    class={['read-tip-container', props.defaultTemplateProps.position]}
+                    class={['read-tip-container', props.defaultTemplateProps.position, props.defaultTemplateProps.overlayClassName]}
                     >
                         <span class='after' ></span>
                         {
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 422d2990..6dcfe1f5 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
@@ -21,6 +21,7 @@ export type DefaultTemplateProps = {
   id? : string
   temp: string
   contentTemplate: boolean
+  overlayClassName?: string
 }
 
 export interface ReadTipOptions {
@@ -32,6 +33,7 @@ export interface ReadTipOptions {
   overlayClassName?: string
   appendToBody?: boolean
   rules: ReadTipRules
+  
 }
 
 export type ReadTipRules = ReadTipRule | ReadTipRule[];
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 4cb16a00..218ef18e 100644
--- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx
+++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx
@@ -135,7 +135,7 @@ export default defineComponent({
     }
     return () => {
       return (
-      <div class="devui-read-tip">
+      <div class="devui-read-tip" >
         <div ref={defaultSlot}
           onClick={onClick}
         >
diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md
index d3c4c955..f28836d8 100644
--- a/packages/devui-vue/docs/components/read-tip/index.md
+++ b/packages/devui-vue/docs/components/read-tip/index.md
@@ -28,6 +28,7 @@
 import { defineComponent } from 'vue'
 const readTipOptions =  {
     trigger: 'click',
+    overlayClassName:'red',
     rules: {
       trigger: 'click',
       position:'top',
@@ -54,6 +55,9 @@ const readTipOptions =  {
 .readtip-target:hover {
   text-decoration: underline;
 }
+.red {
+  color: red
+}
 </style>
 ```
 
-- 
Gitee


From d72e9cc0cf22c823fc85b04c33efce839a18c4b6 Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Wed, 17 Nov 2021 20:59:59 +0800
Subject: [PATCH 03/10] =?UTF-8?q?feat:=20[readTip]=20=E5=A2=9E=E5=8A=A0app?=
 =?UTF-8?q?end=E5=B1=9E=E6=80=A7=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/read-tip/src/read-tip-types.ts | 5 +++--
 packages/devui-vue/docs/components/read-tip/index.md    | 4 +++-
 2 files changed, 6 insertions(+), 3 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 6dcfe1f5..9c507b21 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
@@ -18,10 +18,11 @@ export type DefaultTemplateProps = {
   top?: number
   selector?: string
   position?: string
-  id? : string
+  id?: string
   temp: string
   contentTemplate: boolean
   overlayClassName?: string
+  appendToBody?: boolean
 }
 
 export interface ReadTipOptions {
@@ -33,7 +34,7 @@ export interface ReadTipOptions {
   overlayClassName?: string
   appendToBody?: boolean
   rules: ReadTipRules
-  
+
 }
 
 export type ReadTipRules = ReadTipRule | ReadTipRule[];
diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md
index f28836d8..7e7b1fe6 100644
--- a/packages/devui-vue/docs/components/read-tip/index.md
+++ b/packages/devui-vue/docs/components/read-tip/index.md
@@ -29,6 +29,8 @@ import { defineComponent } from 'vue'
 const readTipOptions =  {
     trigger: 'click',
     overlayClassName:'red',
+    appendToBody: false,
+    
     rules: {
       trigger: 'click',
       position:'top',
@@ -37,7 +39,6 @@ const readTipOptions =  {
       content: 'This is Jack\'s profile',
     },
   };
-
 </script>
 
 <style>
@@ -90,6 +91,7 @@ const readTipOptions =  {
     mouseleaveTime: 100,
     position: 'top',
     overlayClassName: 'read-tip-container',
+    appendToBody: false,
     rules: [
       {
         selector: '.first-content',
-- 
Gitee


From 7ccc6f73c65f1d30764ea31a5252bf9a18bbb31e Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Wed, 17 Nov 2021 22:07:42 +0800
Subject: [PATCH 04/10] =?UTF-8?q?feat:=20[readTip]=20=E6=96=B0=E5=A2=9Edat?=
 =?UTF-8?q?aFn=E5=B1=9E=E6=80=A7=20=E5=BC=82=E6=AD=A5=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/read-tip/index.ts    |  2 +-
 .../devui/read-tip/src/read-tip-template.tsx  | 47 +++++++-------
 .../devui/read-tip/src/read-tip-types.ts      | 17 ++++--
 .../devui/read-tip/src/read-tip.scss          |  4 ++
 .../devui-vue/devui/read-tip/src/read-tip.tsx |  8 ++-
 .../docs/components/read-tip/index.md         | 61 +++++++++++++++++++
 6 files changed, 107 insertions(+), 32 deletions(-)

diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts
index db1b532c..b59295e5 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: '30%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '40%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
   install(app: App): void {
         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 f6d1cafa..e2d621b0 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,5 +1,5 @@
-import { defineComponent, ref, onMounted, Teleport } from 'vue'
-import { readTipProps, ReadTipProps, } from './read-tip-types'
+import { defineComponent, ref, Ref, onMounted, Teleport, toRefs } from 'vue'
+import { readTipProps, ReadTipProps, DefaultTemplateProps } from './read-tip-types'
 import './read-tip.scss'
 
 export default defineComponent({
@@ -7,41 +7,44 @@ export default defineComponent({
     props: readTipProps,
     emits: [],
     setup(props: ReadTipProps, ctx) {
-        const query = props.defaultTemplateProps?.id ? `#${props.defaultTemplateProps.id}` : props.defaultTemplateProps.selector
+        const { defaultTemplateProps } = toRefs(props)
+        let rule: DefaultTemplateProps = defaultTemplateProps.value
+        const query = rule?.id ? `#${rule.id}` : rule.selector
+
+        if (typeof rule.dataFn === 'function') {
+            const dataFn = rule.dataFn({ element: rule.dom, rule })
+            rule = { ...rule, ...dataFn }
+        }
 
         const temp = ref(null)
         onMounted(() => {
             // 当定位为top展示时  元素定位高度需要计算弹窗的高度
-            if(props.defaultTemplateProps.position == 'top') {
+            if (rule.position == 'top') {
                 temp.value.style.top = (- temp.value.offsetHeight - 10) + 'px'
             }
         })
         return () => {
             return (
                 <Teleport to={query} >
-                    <div 
-                    ref={temp}
-                    class={['read-tip-container', props.defaultTemplateProps.position, props.defaultTemplateProps.overlayClassName]}
+                    <div
+                        ref={temp}
+                        class={['read-tip-container', rule.position, rule.overlayClassName]}
                     >
                         <span class='after' ></span>
                         {
-                            props.defaultTemplateProps.contentTemplate ? ctx.slots?.default() :
-                            (
-                                <>
-                                    <div class="title">
-                                        {props.defaultTemplateProps.title}
-                                    </div>
-                                    <div class="content">
-                                        {props.defaultTemplateProps.content}
-                                    </div>
-                                </>
-                            )
+                            rule.contentTemplate ? ctx.slots?.default() :
+                                (
+                                    <>
+                                        <div class="title">
+                                            {rule.title}
+                                        </div>
+                                        <div class="content">
+                                            {rule.content}
+                                        </div>
+                                    </>
+                                )
                         }
 
-                        {/* {
-                            ctx.slots?.default()
-                        } */}
-
                     </div>
                 </Teleport>
 
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 6dcfe1f5..2241df4d 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
@@ -19,9 +19,14 @@ export type DefaultTemplateProps = {
   selector?: string
   position?: string
   id? : string
-  temp: string
-  contentTemplate: boolean
+  temp?: string
+  dom?: Element
+  contentTemplate?: boolean
   overlayClassName?: string
+  dataFn?: ({
+    element,
+    rule: ReadTipRule,
+  }) => { title?: string; content?: string;  }
 }
 
 export interface ReadTipOptions {
@@ -51,10 +56,10 @@ export interface ReadTipRule {
   overlayClassName?: string
   appendToBody?: boolean
   //customData与template搭配使用，customData为传入模板的上下文，可以自定义模板内容
-  // dataFn?: ({
-  //   element,
-  //   rule: ReadTipRule,
-  // }) => Observable<{ title?: string; content?: string; template?: TemplateRef<any>; 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 e113de16..03a6be87 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 {
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 218ef18e..eb98c6f5 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,11 +47,13 @@ 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)
         const doms = defaultSlot.value.querySelectorAll(rule.selector);
         [...doms].map((dom, index) => {
           dom.style.position = 'relative'
-
+          rule.dom = dom
           let newRule = reactive({
             id: null
           })
@@ -72,7 +74,7 @@ export default defineComponent({
       return rules
     }
     function show(dom, rule) {
-      const top = dom.offsetTop
+      dom.id
       rule.status = true
     }
     // 把传入的props.rules统一转为数组对象格式
diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md
index f28836d8..8385244c 100644
--- a/packages/devui-vue/docs/components/read-tip/index.md
+++ b/packages/devui-vue/docs/components/read-tip/index.md
@@ -90,12 +90,14 @@ const readTipOptions =  {
     mouseleaveTime: 100,
     position: 'top',
     overlayClassName: 'read-tip-container',
+
     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',
@@ -103,6 +105,7 @@ 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',
@@ -146,6 +149,64 @@ const readTipOptions =  {
 .third-content {
   cursor: pointer;
 }
+
+.red {
+  color: red
+}
+</style>
+```
+
+:::
+
+
+
+### 异步获取数据
+
+通过设置selector选择需要显示readtip的元素，传入title和content设置显示的内容。
+:::demo 
+
+```vue
+<template>
+  <d-read-tip :readTipOptions="readTipOptions" >
+    <h1>You can pass data asynchronously</h1>
+  <p class="readtip-content">Using function fullElement to pass data</p>
+  <p>The following is the target you want to show readtip</p>
+  <h4 class="readtip-target">Display readtip</h4>
+</template>
+
+<script setup>
+import { defineComponent } from 'vue'
+const readTipOptions =   {
+    trigger: 'click',
+    rules: { 
+      selector: 'h4',
+      trigger: 'click', 
+      dataFn: getDataFromDB,
+      key: 'GetData' },
+  };
+function getDataFromDB ({ element, rule }) {
+    return { content: element.innerHTML, title: rule.key }
+  }
+</script>
+
+<style>
+.readtip-container {
+  padding: 12px;
+}
+
+.readtip-target {
+  display: inline-block;
+  font-weight: bold;
+  cursor: pointer;
+  margin-top: 16px;
+}
+
+.readtip-target:hover {
+  text-decoration: underline;
+}
+.red {
+  color: red
+}
 </style>
 ```
 
-- 
Gitee


From 5f470e3b16362ba73a93ec5ca05bb36a0021688f Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Wed, 17 Nov 2021 23:40:47 +0800
Subject: [PATCH 05/10] =?UTF-8?q?feat:=20[readTip]=20=E5=88=9D=E6=AD=A5?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=94=AF=E6=8C=81=20appendToBody=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
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-vue/devui/read-tip/src/read-tip.tsx | 47 +++++++++----------
 .../docs/components/read-tip/index.md         | 12 +++--
 3 files changed, 62 insertions(+), 32 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 e2d621b0..6483c7af 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,4 +1,4 @@
-import { defineComponent, ref, Ref, onMounted, Teleport, toRefs } from 'vue'
+import { defineComponent, reactive, ref, Ref, onMounted, Teleport, toRefs } from 'vue'
 import { readTipProps, ReadTipProps, DefaultTemplateProps } from './read-tip-types'
 import './read-tip.scss'
 
@@ -10,25 +10,50 @@ export default defineComponent({
         const { defaultTemplateProps } = toRefs(props)
         let rule: DefaultTemplateProps = defaultTemplateProps.value
         const query = rule?.id ? `#${rule.id}` : rule.selector
-
+        const domBounding = document.querySelector(query).getBoundingClientRect();  
+        const styles: any = reactive(rule.appendToBody ? {
+            top: domBounding.y + document.documentElement.scrollTop + 'px',
+            left: domBounding.x + 'px',
+            transform: ''
+        } : {})
         if (typeof rule.dataFn === 'function') {
-            const dataFn = rule.dataFn({ element: rule.dom, rule })
+            const dataFn = rule.dataFn({ element: document.querySelector(query), rule })
             rule = { ...rule, ...dataFn }
         }
 
         const temp = ref(null)
         onMounted(() => {
             // 当定位为top展示时  元素定位高度需要计算弹窗的高度
-            if (rule.position == 'top') {
+            if (rule.position == 'top' && !rule.appendToBody) {
                 temp.value.style.top = (- temp.value.offsetHeight - 10) + 'px'
+            } else if (rule.appendToBody) {
+                switch(rule.position) {
+                    case 'top': 
+                        styles.transform = 'translate(0px, calc(-100% - 10px))'
+                        break;
+                    case 'left': 
+                        styles.transform = 'translate(calc(-100% - 10px), 0)'
+                        break;
+                    case 'bottom': 
+                        styles.top = domBounding.y + domBounding.height + document.documentElement.scrollTop + 10 + 'px'
+                        break;
+                    case 'right': 
+                    console.log(temp.value)
+                        styles.left = domBounding.x + domBounding.width + 'px'
+                        break;
+                }
+                // const domBounding = rule.dom.getBoundingClientRect();                
+                // styles.top = domBounding.y + document.documentElement.scrollTop - temp.value.offsetHeight - 10 + 'px'
+                // styles.left = domBounding.x + 'px';
             }
         })
         return () => {
             return (
-                <Teleport to={query} >
+                <Teleport to={rule.appendToBody ? 'body' : query} >
                     <div
                         ref={temp}
                         class={['read-tip-container', rule.position, rule.overlayClassName]}
+                        style={styles}
                     >
                         <span class='after' ></span>
                         {
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 eb98c6f5..1c77ac18 100644
--- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx
+++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx
@@ -50,10 +50,10 @@ export default defineComponent({
         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'
-          rule.dom = dom
+          if (rule.appendToBody === false) dom.style.position = 'relative';
           let newRule = reactive({
             id: null
           })
@@ -74,7 +74,6 @@ export default defineComponent({
       return rules
     }
     function show(dom, rule) {
-      dom.id
       rule.status = true
     }
     // 把传入的props.rules统一转为数组对象格式
@@ -137,30 +136,30 @@ export default defineComponent({
     }
     return () => {
       return (
-      <div class="devui-read-tip" >
-        <div ref={defaultSlot}
-          onClick={onClick}
-        >
-          {
-            ctx.slots?.default()
-          }
-        </div>
-
-        {(refRules).map(rule => (
-          <div
-
+        <div class="devui-read-tip" >
+          <div ref={defaultSlot}
+            onClick={onClick}
           >
-            {rule.status && (<TipsTemplate defaultTemplateProps={{ ...rule, top: tempTop, }} >
-              {
-               rule.contentTemplate && ctx.slots?.contentTemplate()
-              }
-            </TipsTemplate>)
-
+            {
+              ctx.slots?.default()
             }
           </div>
-        )
-        )}
-      </div>
+
+          {(refRules).map(rule => (
+            <div
+
+            >
+              {rule.status && (<TipsTemplate defaultTemplateProps={{ ...rule, top: tempTop, }} >
+                {
+                  rule.contentTemplate && ctx.slots?.contentTemplate()
+                }
+              </TipsTemplate>)
+
+              }
+            </div>
+          )
+          )}
+        </div>
       )
     }
   }
diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md
index 667fede3..d5af1dbd 100644
--- a/packages/devui-vue/docs/components/read-tip/index.md
+++ b/packages/devui-vue/docs/components/read-tip/index.md
@@ -76,9 +76,8 @@ const readTipOptions =  {
     <p class="first-content">Click here to display first content</p>
     <p class="second-content">Click here to display second content</p>
     <h3 class="third-content">Hover here to display third content</h3>
-    <h3 class="third-content">Another third content with same class name</h3>
-
-</div>
+    <h3 class="third-content">Hover here to display third content</h3>
+    <h3 class="four-content">4Another third content with same class name</h3>
   </d-read-tip >
 </template>
 
@@ -114,6 +113,13 @@ const readTipOptions =  {
         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',
       },
     ],
   };
-- 
Gitee


From ea6d630fa0e04f8d3c87749e828d6707b31d51af Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Thu, 18 Nov 2021 22:32:06 +0800
Subject: [PATCH 06/10] =?UTF-8?q?feat(readTip):=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=B9=B6=E6=B7=BB=E5=8A=A0=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/read-tip/src/read-tip-template.tsx  |  60 +++---
 .../devui/read-tip/src/read-tip-types.ts      |   1 -
 .../devui/read-tip/src/read-tip.scss          |  11 --
 .../devui-vue/devui/read-tip/src/read-tip.tsx |   7 +-
 .../docs/components/read-tip/index.md         | 186 ++++++++++++++++--
 5 files changed, 203 insertions(+), 62 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 6483c7af..661e0302 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,15 +7,11 @@ export default defineComponent({
     props: readTipProps,
     emits: [],
     setup(props: ReadTipProps, ctx) {
-        const { defaultTemplateProps } = toRefs(props)
+        const { defaultTemplateProps, } = toRefs(props)
         let rule: DefaultTemplateProps = defaultTemplateProps.value
-        const query = rule?.id ? `#${rule.id}` : rule.selector
-        const domBounding = document.querySelector(query).getBoundingClientRect();  
-        const styles: any = reactive(rule.appendToBody ? {
-            top: domBounding.y + document.documentElement.scrollTop + 'px',
-            left: domBounding.x + 'px',
-            transform: ''
-        } : {})
+        const query = rule?.id ? `#${rule.id}` : rule.selector;
+
+        const styles: any = reactive({});
         if (typeof rule.dataFn === 'function') {
             const dataFn = rule.dataFn({ element: document.querySelector(query), rule })
             rule = { ...rule, ...dataFn }
@@ -23,28 +19,32 @@ export default defineComponent({
 
         const temp = ref(null)
         onMounted(() => {
-            // 当定位为top展示时  元素定位高度需要计算弹窗的高度
-            if (rule.position == 'top' && !rule.appendToBody) {
-                temp.value.style.top = (- temp.value.offsetHeight - 10) + 'px'
-            } else if (rule.appendToBody) {
-                switch(rule.position) {
-                    case 'top': 
-                        styles.transform = 'translate(0px, calc(-100% - 10px))'
-                        break;
-                    case 'left': 
-                        styles.transform = 'translate(calc(-100% - 10px), 0)'
-                        break;
-                    case 'bottom': 
-                        styles.top = domBounding.y + domBounding.height + document.documentElement.scrollTop + 10 + 'px'
-                        break;
-                    case 'right': 
-                    console.log(temp.value)
-                        styles.left = domBounding.x + domBounding.width + 'px'
-                        break;
-                }
-                // const domBounding = rule.dom.getBoundingClientRect();                
-                // styles.top = domBounding.y + document.documentElement.scrollTop - temp.value.offsetHeight - 10 + 'px'
-                // styles.left = domBounding.x + 'px';
+            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 () => {
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 ef322472..872a9940 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,7 +15,6 @@ export type Trigger = 'hover' | 'click'
 export type DefaultTemplateProps = {
   title?: string
   content?: string
-  top?: number
   selector?: string
   position?: string
   id? : 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 03a6be87..893ab489 100644
--- a/packages/devui-vue/devui/read-tip/src/read-tip.scss
+++ b/packages/devui-vue/devui/read-tip/src/read-tip.scss
@@ -44,9 +44,6 @@
   }
   // 定位 top
   &.top {
-    top: -60px;
-    left: 0;
-
     .after {
       bottom: -4px;
     }
@@ -54,9 +51,6 @@
 
   // 定位 left
   &.left {
-    right: calc(100% + 10px);
-    top: -2px;
-
     .after {
       right: -4px;
     }
@@ -64,9 +58,6 @@
 
   // 定位 right
   &.right {
-    left: calc(100% + 10px);
-    top: -2px;
-
     .after {
       left: -4px;
     }
@@ -74,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 1c77ac18..5fac00c6 100644
--- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx
+++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx
@@ -57,10 +57,11 @@ export default defineComponent({
           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)
           }
 
@@ -149,7 +150,7 @@ export default defineComponent({
             <div
 
             >
-              {rule.status && (<TipsTemplate defaultTemplateProps={{ ...rule, top: tempTop, }} >
+              {rule.status && (<TipsTemplate defaultTemplateProps={{ ...rule }} >
                 {
                   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 d5af1dbd..cb70b692 100644
--- a/packages/devui-vue/docs/components/read-tip/index.md
+++ b/packages/devui-vue/docs/components/read-tip/index.md
@@ -18,21 +18,15 @@
     <p class="readtip-content">Set selector to display readtip</p>
     <p>The following is the target you want to show readtip</p>
     <span class="readtip-target">@Jack</span>
-    <template #contentTemplate>
-      <p>我是devui 基础用法</p>  
-    </template>
   </d-read-tip >
 </template>
 
 <script setup>
 import { defineComponent } from 'vue'
 const readTipOptions =  {
-    trigger: 'click',
-    overlayClassName:'red',
-    appendToBody: false,
-    
+    trigger: 'hover',
     rules: {
-      trigger: 'click',
+      trigger: 'hover',
       position:'top',
       selector: '.readtip-target',
       title: 'Name: Jack',
@@ -42,12 +36,14 @@ const readTipOptions =  {
 </script>
 
 <style>
+.source{
+  overflow: visible;
+}
 .readtip-container {
   padding: 12px;
 }
 
 .readtip-target {
-  display: inline-block;
   font-weight: bold;
   cursor: pointer;
   margin-top: 16px;
@@ -57,7 +53,45 @@ const readTipOptions =  {
   text-decoration: underline;
 }
 .red {
-  color: red
+  /* color: red */
+}
+@import '@devui-design/icons/icomoon/devui-icon.css'
+.icon {
+  cursor: pointer;
+  font-size: 16px;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+.icon + span {
+  vertical-align: middle;
+}
+.card-block {
+  margin-right: 16px;
+  i{
+    cursor: pointer;
+    font-size: 16px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+  i + span {
+    vertical-align: middle;
+  }
+}
+.d-card {
+  cursor: pointer;
+  transition:
+    box-shadow .3s cubic-bezier(.645,.045,.355,1),
+    transform .3s cubic-bezier(.645,.045,.355,1);
+  &:hover {
+    box-shadow: 0 4px 16px 0 rgba(0,0,0,.1);
+    transform: translateY(-5px);
+  }
+}
+.card-container {
+  width: 350px;
+}
+.action-text {
+  color: #8a8e99;
 }
 </style>
 ```
@@ -77,7 +111,6 @@ const readTipOptions =  {
     <p class="second-content">Click here to display second content</p>
     <h3 class="third-content">Hover here to display third content</h3>
     <h3 class="third-content">Hover here to display third content</h3>
-    <h3 class="four-content">4Another third content with same class name</h3>
   </d-read-tip >
 </template>
 
@@ -108,7 +141,7 @@ const readTipOptions =  {
         overlayClassName:'red',
       },
       {
-        trigger: 'hover',
+        trigger: 'click',
         selector: '.third-content',
         position: 'bottom',
         title: 'This Is the Third Title',
@@ -127,12 +160,14 @@ const readTipOptions =  {
 </script>
 
 <style>
+.source{
+  overflow: visible;
+}
 .readtip-container {
   padding: 12px;
 }
 
 .readtip-target {
-  display: inline-block;
   font-weight: bold;
   cursor: pointer;
   margin-top: 16px;
@@ -167,6 +202,124 @@ const readTipOptions =  {
 
 
 
+
+### 传入模板显示内容
+可以通过传入template自定义需要显示的内容，传入template时不必再传入title和content。
+:::demo 
+
+```vue
+<template>
+  <d-read-tip :readTipOptions="readTipOptions" >
+    <h1>You can also pass in template</h1>
+    <p class="readtip-content">Write your own template</p>
+    <p>The following is the target you want to show readtip</p>
+    <p class="readtip-target2">DEVUI Course</p>
+    <p class="readtip-target2">Another DEVUI Course with same class name</p>
+    <template #contentTemplate>
+      <d-card class="d-card">
+        <template #cardAvatar>
+          <d-avatar name="DevUI"></d-avatar>
+        </template>
+        <template #cardTitle>
+          DEVUI Course
+        </template>
+        <template #cardSubtitle class="icon">
+          <d-icon name="company-member"></d-icon><span>DevUI</span>
+        </template>
+        <template #cardContent>
+          DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...
+        </template>
+        <template #cardActions>
+          <div class="card-block">
+            <d-icon name="like"></d-icon ><span>12</span>
+          </div>
+          <div class="card-block">
+            <d-icon name="star-o"></d-icon ><span>8</span>
+          </div>
+          <div class="card-block">
+            <d-icon name="message"></d-icon ><span>8</span>
+          </div>
+        </template>
+      </d-card>  
+    </template>
+  </d-read-tip >
+</template>
+
+<script setup>
+import { defineComponent } from 'vue'
+const readTipOptions =  {
+    trigger: 'click',    
+    rules: {
+      trigger: 'click',
+      position:'top',
+      selector: '.readtip-target2',
+      title: 'Name: Jack',
+      content: 'This is Jack\'s profile',
+    },
+  };
+</script>
+
+<style>
+.readtip-container {
+  padding: 12px;
+}
+
+.readtip-target {
+  display: block;
+  font-weight: bold;
+  cursor: pointer;
+  margin-top: 16px;
+}
+
+.readtip-target:hover {
+  text-decoration: underline;
+}
+.red {
+  /* color: red */
+}
+@import '@devui-design/icons/icomoon/devui-icon.css'
+.icon {
+  cursor: pointer;
+  font-size: 16px;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+.icon + span {
+  vertical-align: middle;
+}
+.card-block {
+  margin-right: 16px;
+  i{
+    cursor: pointer;
+    font-size: 16px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+  i + span {
+    vertical-align: middle;
+  }
+}
+.d-card {
+  cursor: pointer;
+  transition:
+    box-shadow .3s cubic-bezier(.645,.045,.355,1),
+    transform .3s cubic-bezier(.645,.045,.355,1);
+  &:hover {
+    box-shadow: 0 4px 16px 0 rgba(0,0,0,.1);
+    transform: translateY(-5px);
+  }
+}
+.card-container {
+  width: 350px;
+}
+.action-text {
+  color: #8a8e99;
+}
+</style>
+```
+
+:::
+
 ### 异步获取数据
 
 通过设置selector选择需要显示readtip的元素，传入title和content设置显示的内容。
@@ -202,7 +355,6 @@ function getDataFromDB ({ element, rule }) {
 }
 
 .readtip-target {
-  display: inline-block;
   font-weight: bold;
   cursor: pointer;
   margin-top: 16px;
@@ -225,9 +377,9 @@ d-read-tip 参数
 
 | 参数                 | 类型               | 默认 | 说明                            | 跳转 Demo              | 全局配置项 |
 | -------------------- | ------------------ | ---- | ------------------------------- | ---------------------- | ---------- |
-| readTipOptions       | ReadTipOptions     | --   | 必选，配置提示选项              | 基本用法               | --         |
-| readTipOptions.rules | ReadTipRules       | --   | 必选，配置 readtip 内容         | 包括多个提示的 readtip | --         |
-| contentTemplate      | `TemplateRef<any>` | --   | 可选，传入模板显示 readtip 内容 | 传入模板显示内容       | --         |
+| readTipOptions       | ReadTipOptions     | --   | 必选，配置提示选项              | [基本用法](#基本用法)               | --         |
+| readTipOptions.rules | ReadTipRules       | --   | 必选，配置 readtip 内容         |  [基本用法](#基本用法) | --         |
+| contentTemplate      | `TemplateRef<any>` | --   | 可选，传入模板显示 readtip 内容 |  [传入模板显示内容](#传入模板显示内容)      | --         |
 
 
 
-- 
Gitee


From 102c5fe6d1a4802ff3f1429d9c907db376cdcc0d Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Thu, 18 Nov 2021 22:34:36 +0800
Subject: [PATCH 07/10] =?UTF-8?q?docs(readTip):=20=E4=BF=AE=E5=A4=8D?=
 =?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/.ls-lint.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devui-vue/.ls-lint.yml b/packages/devui-vue/.ls-lint.yml
index 03019617..b367ef20 100644
--- a/packages/devui-vue/.ls-lint.yml
+++ b/packages/devui-vue/.ls-lint.yml
@@ -4,7 +4,7 @@ ls:
     .scss: kebab-case
     .vue: kebab-case
     .js: kebab-case
-    # .ts: kebab-case
+    .ts: kebab-case
     .tsx: kebab-case
     .spec.ts: kebab-case
     .route.ts: kebab-case
-- 
Gitee


From 7f75c042d11d95cc0825cb66c2549fa223707ed5 Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Thu, 18 Nov 2021 22:37:48 +0800
Subject: [PATCH 08/10] =?UTF-8?q?docs(readTip):=20=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/components/read-tip/index.md         | 63 +------------------
 1 file changed, 3 insertions(+), 60 deletions(-)

diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md
index cb70b692..19fe559b 100644
--- a/packages/devui-vue/docs/components/read-tip/index.md
+++ b/packages/devui-vue/docs/components/read-tip/index.md
@@ -52,47 +52,7 @@ const readTipOptions =  {
 .readtip-target:hover {
   text-decoration: underline;
 }
-.red {
-  /* color: red */
-}
-@import '@devui-design/icons/icomoon/devui-icon.css'
-.icon {
-  cursor: pointer;
-  font-size: 16px;
-  margin-right: 8px;
-  vertical-align: middle;
-}
-.icon + span {
-  vertical-align: middle;
-}
-.card-block {
-  margin-right: 16px;
-  i{
-    cursor: pointer;
-    font-size: 16px;
-    margin-right: 8px;
-    vertical-align: middle;
-  }
-  i + span {
-    vertical-align: middle;
-  }
-}
-.d-card {
-  cursor: pointer;
-  transition:
-    box-shadow .3s cubic-bezier(.645,.045,.355,1),
-    transform .3s cubic-bezier(.645,.045,.355,1);
-  &:hover {
-    box-shadow: 0 4px 16px 0 rgba(0,0,0,.1);
-    transform: translateY(-5px);
-  }
-}
-.card-container {
-  width: 350px;
-}
-.action-text {
-  color: #8a8e99;
-}
+
 </style>
 ```
 
@@ -213,8 +173,8 @@ const readTipOptions =  {
     <h1>You can also pass in template</h1>
     <p class="readtip-content">Write your own template</p>
     <p>The following is the target you want to show readtip</p>
-    <p class="readtip-target2">DEVUI Course</p>
-    <p class="readtip-target2">Another DEVUI Course with same class name</p>
+    <h3 class="readtip-target2">DEVUI Course</h3>
+    <h3 class="readtip-target2">Another DEVUI Course with same class name</h3>
     <template #contentTemplate>
       <d-card class="d-card">
         <template #cardAvatar>
@@ -260,24 +220,7 @@ const readTipOptions =  {
 </script>
 
 <style>
-.readtip-container {
-  padding: 12px;
-}
 
-.readtip-target {
-  display: block;
-  font-weight: bold;
-  cursor: pointer;
-  margin-top: 16px;
-}
-
-.readtip-target:hover {
-  text-decoration: underline;
-}
-.red {
-  /* color: red */
-}
-@import '@devui-design/icons/icomoon/devui-icon.css'
 .icon {
   cursor: pointer;
   font-size: 16px;
-- 
Gitee


From bb48bf5007d0419bce603dfb65ba0a70080a8a3e Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Sat, 20 Nov 2021 23:19:49 +0800
Subject: [PATCH 09/10] =?UTF-8?q?fix(readTip):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=BC=A9=E8=BF=9B=E6=A0=BC=E5=BC=8F=E5=B9=B6?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=BB=84=E4=BB=B6=E8=BF=9B=E5=BA=A6=E4=B8=BA?=
 =?UTF-8?q?50%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/read-tip/index.ts         |  8 ++++----
 .../devui/read-tip/src/read-tip-template.tsx       | 14 +++++++-------
 .../devui-vue/devui/read-tip/src/read-tip-types.ts |  6 +++---
 packages/devui-vue/devui/read-tip/src/read-tip.tsx |  2 +-
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts
index b59295e5..877133f1 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: '40%', // 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 661e0302..c7d3d7e4 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
@@ -28,22 +28,22 @@ export default defineComponent({
                 positionTop = domBounding.y + document.documentElement.scrollTop;
                 positionLeft = domBounding.x;
             }
-            switch(rule.position) {
-                case 'top': 
+            switch (rule.position) {
+                case 'top':
                     styles.top = positionTop - targetDom.height - distance + 'px';
                     styles.left = positionLeft + 'px';
                     break;
-                case 'left': 
+                case 'left':
                     styles.top = positionTop + 'px';
-                    styles.left = positionLeft - targetDom.width - distance  + 'px';
+                    styles.left = positionLeft - targetDom.width - distance + 'px';
                     break;
-                case 'bottom': 
+                case 'bottom':
                     styles.top = positionTop + domBounding.height + distance + 'px'
                     styles.left = positionLeft + 'px';
                     break;
-                case 'right': 
+                case 'right':
                     styles.top = positionTop + 'px';
-                    styles.left = positionLeft + domBounding.width + distance  + 'px';
+                    styles.left = positionLeft + domBounding.width + distance + 'px';
                     break;
             }
         })
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 872a9940..7e673469 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
@@ -17,7 +17,7 @@ export type DefaultTemplateProps = {
   content?: string
   selector?: string
   position?: string
-  id? : string
+  id?: string
   temp?: string
   dom?: Element
   contentTemplate?: boolean
@@ -25,7 +25,7 @@ export type DefaultTemplateProps = {
   dataFn?: ({
     element,
     rule: ReadTipRule,
-  }) => { title?: string; content?: string;  }
+  }) => { title?: string; content?: string; }
   appendToBody?: boolean
 }
 
@@ -59,7 +59,7 @@ export interface ReadTipRule {
   dataFn?: ({
     element,
     rule: ReadTipRule,
-  }) => { title?: string; content?: string;  }
+  }) => { title?: string; content?: string; }
 }
 
 
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 5fac00c6..cc9ad63f 100644
--- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx
+++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx
@@ -57,7 +57,7 @@ export default defineComponent({
           let newRule = reactive({
             id: null
           })
-          const id = rule.selector.slice(rule.selector[0] === '.' ? 1 : 0) + index; 
+          const id = rule.selector.slice(rule.selector[0] === '.' ? 1 : 0) + index;
           if (index > 0) {
             newRule = { ...rule }
             dom.id = id
-- 
Gitee


From e70541bb1ff36deb261c401028aeba94545727c1 Mon Sep 17 00:00:00 2001
From: panyongxu <panyx_1002@163.com>
Date: Sat, 20 Nov 2021 23:32:55 +0800
Subject: [PATCH 10/10] =?UTF-8?q?fix(readTip):=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=BA2=E4=B8=AA=E7=A9=BA=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/read-tip/src/read-tip-template.tsx  | 139 +++++++++---------
 1 file changed, 68 insertions(+), 71 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 c7d3d7e4..10aa734e 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,80 +1,77 @@
-import { defineComponent, reactive, ref, Ref, onMounted, Teleport, toRefs } from 'vue'
+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 { defaultTemplateProps, } = toRefs(props)
-        let rule: DefaultTemplateProps = defaultTemplateProps.value
-        const query = rule?.id ? `#${rule.id}` : rule.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 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 (
-                <Teleport to={rule.appendToBody ? 'body' : query} >
-                    <div
-                        ref={temp}
-                        class={['read-tip-container', rule.position, rule.overlayClassName]}
-                        style={styles}
-                    >
-                        <span class='after' ></span>
-                        {
-                            rule.contentTemplate ? ctx.slots?.default() :
-                                (
-                                    <>
-                                        <div class="title">
-                                            {rule.title}
-                                        </div>
-                                        <div class="content">
-                                            {rule.content}
-                                        </div>
-                                    </>
-                                )
-                        }
+    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 (
+        <Teleport to={rule.appendToBody ? 'body' : query} >
+          <div
+            ref={temp}
+            class={['read-tip-container', rule.position, rule.overlayClassName]}
+            style={styles}
+          >
+            <span class='after' ></span>
+            {
+              rule.contentTemplate ? ctx.slots?.default() :
+                (
+                  <>
+                    <div class="title">
+                      {rule.title}
                     </div>
-                </Teleport>
-
-
-            )
-        }
+                    <div class="content">
+                      {rule.content}
+                    </div>
+                  </>
+                )
+            }
+          </div>
+        </Teleport>
+      )
     }
+  }
 })
-- 
Gitee