feat: ellipsis新增定制Tooltip功能 (#90)

WeBankFinTech · Mar 30, 2022 · 0a70dab · 0a70dab
1 parent cf26ffa
commit 0a70dab
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 16 deletions.
diff --git a/components/ellipsis/ellipsis.tsx b/components/ellipsis/ellipsis.tsx
@@ -41,9 +41,9 @@ export default defineComponent({
                 .filter(Boolean)
         );
         const styleRef = computed(() => {
-            const _style = props.style;
+            const _style : CSSProperties = props.style;
             if (props.line > 1) {
-                _style['-webkit-line-clamp'] = props.line;
+                _style['-webkit-line-clamp'] = Number(props.line);
             }
             return _style;
         });
@@ -92,7 +92,7 @@ export default defineComponent({
                     placement="top"
                     {...toolTipPropsRef.value}
                     v-slots={{
-                        content: slots.default,
+                        content: slots.tooltip ?? slots.default,
                     }}
                 >
                     {renderTrigger()}

diff --git a/docs/.vitepress/components/ellipsis/common.vue b/docs/.vitepress/components/ellipsis/common.vue
@@ -1,7 +1,5 @@
 <template>
-    <Space>
-        <FEllipsis style="max-width: 240px">
-            住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
-        </FEllipsis>
-    </Space>
+    <FEllipsis style="max-width: 240px">
+        住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
+    </FEllipsis>
 </template>
diff --git a/docs/.vitepress/components/ellipsis/index.md b/docs/.vitepress/components/ellipsis/index.md
@@ -12,14 +12,16 @@ app.use(FEllipsis);
 
 ### 基础用法
 
-
 --COMMON
 
 ### 最大行数
 
-
 --LINE
 
+### 定制 Tooltip 内容
+
+--TOOLTIP
+
 --CODE
 
 <style scoped>

diff --git a/docs/.vitepress/components/ellipsis/line.vue b/docs/.vitepress/components/ellipsis/line.vue
@@ -1,8 +1,6 @@
 <template>
-    <Space>
-        <FEllipsis :line="2">
-            电灯熄灭 物换星移 泥牛入海<br />黑暗好像 一颗巨石 按在胸口<br />独脚大盗
-            百万富翁 摸爬滚打<br />黑暗好像 一颗巨石 按在胸口
-        </FEllipsis>
-    </Space>
+    <FEllipsis :line="2">
+        电灯熄灭 物换星移 泥牛入海<br />黑暗好像 一颗巨石 按在胸口<br />独脚大盗
+        百万富翁 摸爬滚打<br />黑暗好像 一颗巨石 按在胸口
+    </FEllipsis>
 </template>
diff --git a/docs/.vitepress/components/ellipsis/tooltip.vue b/docs/.vitepress/components/ellipsis/tooltip.vue
@@ -0,0 +1,13 @@
+<template>
+    <FEllipsis :line="2">
+        电灯熄灭 物换星移 泥牛入海<br />黑暗好像 一颗巨石 按在胸口<br />独脚大盗
+        百万富翁 摸爬滚打<br />黑暗好像 一颗巨石 按在胸口
+        <template #tooltip>
+            <div style="width: 200px; text-align: center">
+                <h>《静夜思》</h>
+                <p>床前明月光，疑是地上霜。</p>
+                <p>举头望明月，低头思故乡。</p>
+            </div>
+        </template>
+    </FEllipsis>
+</template>