feat(Popper): 文档上增加弹出信息组件 (#709)

WeBankFinTech · Mar 28, 2024 · f0b06ac · f0b06ac
1 parent 7e01b0c
commit f0b06ac
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 2 deletions.
diff --git a/components/popper/popper.tsx b/components/popper/popper.tsx
@@ -124,7 +124,7 @@ export default defineComponent({
                 <LazyTeleport
                     to={getContainer.value?.()}
                     disabled={!props.appendToContainer}
-                    show={!props.lazy || visible.value}
+                    show={Boolean(!props.lazy || visible.value)}
                 >
                     <div
                         ref={popperRef}

diff --git a/docs/.vitepress/components/popper/common.vue b/docs/.vitepress/components/popper/common.vue
@@ -0,0 +1,28 @@
+<template>
+    <FPopper placement="bottom" trigger="hover" :arrow="true">
+        <template #trigger>
+            <FButton>Hover to activate</FButton>
+        </template>
+        <div style="padding: 30px">
+            this is content, this is content, this is content
+        </div>
+    </FPopper>
+    <FPopper placement="top" trigger="click" :arrow="true">
+        <template #trigger>
+            <FButton style="margin-left: 10px">Click to activate</FButton>
+        </template>
+        <div style="padding: 30px">
+            this is content, this is content, this is content
+        </div>
+    </FPopper>
+    <FPopper placement="right" trigger="focus" :arrow="true">
+        <template #trigger>
+            <FButton style="margin-left: 10px">Focus to activate</FButton>
+        </template>
+        <div style="padding: 30px">
+            this is content, this is content, this is content
+        </div>
+    </FPopper>
+</template>
+
+<style scoped></style>
diff --git a/docs/.vitepress/components/popper/index.md b/docs/.vitepress/components/popper/index.md
@@ -0,0 +1,53 @@
+# Popper 弹出信息
+
+在内容周围弹出一些隐藏的信息。内置样式，需要自行定制。
+如果你只想展示一些基本的文本内容，推荐使用 `Tooltip`。
+
+## 组件注册
+
+```js
+import { FPopper } from '@fesjs/fes-design';
+
+app.use(FPopper);
+```
+
+## 代码演示
+
+### 基础用法
+
+属性 `trigger` 设置触发方式，`hover`、`click`、`focus`。
+
+:::demo
+common.vue
+:::
+
+### 是否显示
+
+:::demo
+visible.vue
+:::
+
+## Popper Props
+
+| 属性              | 说明                                                                                                                                                  | 类型                      | 默认值                |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | --------------------- |
+| v-model           | 手动控制显示                                                                                                                                          | boolean                   | `false`               |
+| placement         | 出现的位置，可选值有`top` `top-start` `top-end` `bottom` `bottom-start` `bottom-end` `right` `right-start` `right-end` `left` `left-start` `left-end` | string                    | `auto`                |
+| trigger           | 触发类型`hover` `click` `focus`, confirm 模式下只能是`click`                                                                                          | string                    | `hover`               |
+| disabled          | 是否可用                                                                                                                                              | boolean                   | `false`               |
+| offset            | 出现位置的偏移量                                                                                                                                      | number                    | `6`                   |
+| arrow             | 是否显示箭头                                                                                                                                          | boolean                   | `true`                |
+| appendToContainer | 弹窗内容是否添加到指定的 DOM 元素                                                                                                                     | boolean                   | `true`                |
+| popperClass       | 弹出框的样式类名                                                                                                                                      | string \| object \| Array | -                     |
+| popperStyle       | 弹出框的样式                                                                                                                                          | object                    | -                     |
+| showAfter         | 显示的延迟时间                                                                                                                                        | number                    | `0`                   |
+| hideAfter         | 隐藏的延迟时间                                                                                                                                        | number                    | `0`                   |
+| lazy              | 是否懒渲染                                                                                                                                            | boolean                   | `true`                |
+| getContainer      | 配置渲染节点的输出位置                                                                                                                                | () => HTMLElement         | `() => document.body` |
+
+## Popper Slots
+
+| 名称    | 说明               |
+| ------- | ------------------ |
+| trigger | 触发提示包裹的内容 |
+| default | 提示内容           |
diff --git a/docs/.vitepress/components/popper/visible.vue b/docs/.vitepress/components/popper/visible.vue
@@ -0,0 +1,40 @@
+<template>
+    <FSpace>
+        <FForm :labelWidth="100">
+            <FFormItem label="是否显示:">
+                <FRadioGroup
+                    v-model="visible"
+                    :cancelable="false"
+                    :options="[
+                        { label: '否(默认)', value: false },
+                        { label: '是', value: true },
+                    ]"
+                    @change="
+                        (value) => {
+                            console.log(value);
+                        }
+                    "
+                />
+            </FFormItem>
+        </FForm>
+    </FSpace>
+
+    <FDivider></FDivider>
+
+    <FPopper v-model="visible" placement="bottom" trigger="click" :arrow="true">
+        <template #trigger>
+            <FButton>Click to activate</FButton>
+        </template>
+        <div style="padding: 30px">
+            this is content, this is content, this is content
+        </div>
+    </FPopper>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const visible = ref(false);
+</script>
+
+<style scoped></style>
diff --git a/docs/.vitepress/components/tooltip/index.md b/docs/.vitepress/components/tooltip/index.md
@@ -1,6 +1,7 @@
 # Tooltip 文字提示
 
-文字提示主要用于某个元素的辅助提示
+文字提示主要用于某个元素的辅助提示。
+基于 `Popper` 组件做的封装。
 
 ## 组件注册
 

diff --git a/docs/.vitepress/configs/sidebar/index.ts b/docs/.vitepress/configs/sidebar/index.ts
@@ -243,6 +243,10 @@ const sidebarConfig: Record<string, DefaultTheme.Config['sidebar']> = {
                         text: 'Skeleton 骨架屏',
                         link: '/zh/components/skeleton',
                     },
+                    {
+                        text: 'Popper 弹出信息',
+                        link: '/zh/components/popper',
+                    },
                 ],
             },
             {