From 6290973543c7cb8ece3b236e1cd49fea6bc65e3d Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Mon, 27 Dec 2021 00:26:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(backtop):=E6=96=B0=E5=A2=9E=20size=20?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=EF=BC=8C=E7=A7=BB=E9=99=A4=20iconPrefix=20?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/backtop.md | 49 +++++++++++-------------
 src/module/backTop/index.less            | 19 ++++++++-
 src/module/backTop/index.vue             | 33 ++++++++++------
 3 files changed, 62 insertions(+), 39 deletions(-)

diff --git a/example/docs/zh-CN/components/backtop.md b/example/docs/zh-CN/components/backtop.md
index ced323d4..9b4534c5 100644
--- a/example/docs/zh-CN/components/backtop.md
+++ b/example/docs/zh-CN/components/backtop.md
@@ -1,6 +1,6 @@
 ::: title 基础使用
 
-###### 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 target 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
+###### 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 `target` 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
 
 :::
 ::: demo
@@ -49,7 +49,7 @@ export default {
 
 :::
 
-::: title 滚动容器
+::: title 挂载容器
 
 ###### 通过设置 <code>target</code> 和 <code>position="absolute"</code>参数，可对特定容器进行返回顶部操作
 
@@ -58,7 +58,7 @@ export default {
 
 <template>
 <!-- 需要用一个 div 包裹触发滚动事件的目标元素和 lay-backtop 组件 -->
-<div class="scrollContainer" style="width:700px; height:300px;">
+<div class="wrapper" style="width:700px; height:300px;">
   <div id="scrollContent" style="overflow-y:auto; overflow-x:auto; width:700px; height:300px;background-color:whitesmoke;padding:10px;">
     <lay-panel v-for="(n,index) in 50" :key="n" style="margin-top:5px;margin-bottom:5px;padding:10px;">内容</lay-panel>
   </div>
@@ -76,26 +76,23 @@ export default {
 
 ::: table
 
-| 属性                      | 说明                                          | 类型    | 可选值                     |
-| ------------------------- | --------------------------------------------- | ------- | -------------------------- |
-| <strong>通用属性</strong> |
-| target                    | 可选，触发滚动事件的对象                      | string  | CSS 选择器 \| window(默认) |
-| showHeight                | 可选，滚动高度达到该值后显示回到顶部按钮       | number  | 200(默认)                  |
-| disabled                  | 可选，禁用点击返回顶部                        | boolean | true \| false(默认)        |
-| <strong>组件样式</strong> |
-| position                  | 可选，定位方式，特定容器内部需设置为 absolute  | string  | absolute \| fixed(默认)    |
-| right                     | 可选，按钮距离页面右边距，单位 px              | number  | 30(默认)                   |
-| bottom                    | 可选，按钮距离页面底部位置，单位 px            | number  | 40(默认)                   |
-| bgcolor                   | 可选，背景颜色                                | string  | \#9F9F9F(默认)             |
-| opacity                   | 可选，不透明度                                | number  | 0.0-1.0                    |
-| color                     | 可选，前景颜色                                | string  | #FFFFFF                    |
-| borderRadius              | 可选，添加圆角                                | string  | 2px(默认)                  |
-| circle                    | 可选, 使用圆形按钮                            | boolean | true \| false(默认)
-| <strong>图标样式</strong> |
-| icon                      | 可选,图标类型                                 | string  | layui-icon-top(默认)       |
-| iconSize                  | 可选,图标大小                                 | number  | 30                         |
-| iconPrefix                | 可选,图标前缀 layui-icon layui-icon-top       | string  | layui-icon(默认)           |
-| iconColor                 | 可选,图标颜色                                 | string  | #FFFFFF(默认)              |
+| 属性         | 描述                                           | 类型             | 默认值           | 可选值                         |
+| ------------ | ---------------------------------------------  | ---------------- | ---------------- | ------------------------------ |
+| target       | 可选，触发滚动事件的对象                        | string \| Window | `window`         | `CSS/Element 选择器` `window` |
+| showHeight   | 可选，滚动高度达到该值后<br>显示回到顶部按钮     | number           | `200`            | —                              |
+| disabled     | 可选，禁用点击返回顶部                          | boolean          | `false`          | `true` `false`                 |
+| position     | 可选，定位方式，特定容器内部<br>需设置为 absolute | string           | `fixed`          | `absolute` `fixed`             |
+| right        | 可选，按钮距离页面右边距                        | number           | `30`             | —                              |
+| size         | 可选，按钮大小                                 | string           | ——               | `medium` `small`        |
+| bottom       | 可选，按钮距离页面底部位置                      | number           | `40`             | `40`                           |
+| bgcolor      | 可选，背景颜色                                 | string           | `#9F9F9F`        | —                              |
+| opacity      | 可选，不透明度                                 | number           | `0.95`           | `0-1`                          |
+| color        | 可选，前景颜色                                 | string           | `#FFFFFF`        | —                              |
+| borderRadius | 可选，添加圆角                                 | number \| string | `2`              | e: 2 \| 2px \|50%              |
+| circle       | 可选，使用圆形按钮                             | boolean          | `false`          | `true`  `false`                |
+| icon         | 可选，图标类型                                 | string           | `layui-icon-top` | `lay-icon`组件支持的所有类型   |
+| iconSize     | 可选，图标大小                                 | number           | `30`             | `30`                           |
+| iconColor    | 可选，图标颜色                                 | string           | `#FFFFFF`        | —                              |
 
 :::
 
@@ -104,7 +101,7 @@ export default {
 
 ::: table
 
-| 事件名 | 说明                       | 回调参数 |
+| 事件   | 描述                       |   参数   |
 | ------ | -------------------------- | -------- |
 | click  | 点击回到顶部按钮的回调函数  | event    |
 
@@ -115,8 +112,8 @@ export default {
 
 ::: table
 
-| 插槽名 | 说明       |
+| 插槽 | 说明       |
 | ------ | ---------- |
-| —      | 自定义内容 |
+| default| 自定义内容 |
 
 :::
diff --git a/src/module/backTop/index.less b/src/module/backTop/index.less
index 95717a2e..e903d701 100644
--- a/src/module/backTop/index.less
+++ b/src/module/backTop/index.less
@@ -1,10 +1,13 @@
 /** backtop **/
+@width: 50px;
+@height: @width;
+
 .layui-backtop {
   position: fixed;
   right: 30px;
   bottom: 40px;
-  width: 50px;
-  height: 50px;
+  width: @width;
+  height: @height;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -19,3 +22,15 @@
     opacity: 0.85;
   }
 }
+
+.layui-backtop-medium{
+  width: @width - 10px;
+  height: @height - 10px;
+  font-size: 30px;
+}
+
+.layui-backtop-small{
+  width: @width - 20px;
+  height: @height - 20px;
+  font-size: 20px;
+}
diff --git a/src/module/backTop/index.vue b/src/module/backTop/index.vue
index 2a9c39bd..200a51b1 100644
--- a/src/module/backTop/index.vue
+++ b/src/module/backTop/index.vue
@@ -3,6 +3,7 @@
     v-show="visible"
     ref="backtopRef"
     class="layui-backtop"
+    :class="classBacktop"
     :style="{ ...styleBacktop }"
     @click.stop="handleClick"
     @mousedown="handlerMousedown"
@@ -12,7 +13,6 @@
       <lay-icon
         :type="props.icon"
         :size="`${props.iconSize}px`"
-        :prefix="props.iconPrefix"
         :color="props.iconColor"
       />
     </slot>
@@ -47,6 +47,7 @@ export interface LayBacktopProps {
   position?: "fixed" | "absolute";
   right?: number;
   bottom?: number;
+  size?: "medium" | "small";
   bgcolor?: string;
   opacity?: number;
   color?: string;
@@ -55,7 +56,6 @@ export interface LayBacktopProps {
   /**图标样式*/
   icon?: string;
   iconSize?: number;
-  iconPrefix?: string;
   iconColor?: string;
 }
 
@@ -64,7 +64,6 @@ const props = withDefaults(defineProps<LayBacktopProps>(), {
   showHeight: 200,
   icon: "layui-icon-top",
   iconSize: 30,
-  iconPrefix: "layui-icon",
   disabled: false,
   circle: false,
 });
@@ -75,8 +74,17 @@ const backtopRef = ref<HTMLElement | null>(null);
 const scrollTarget = shallowRef<Window | HTMLElement | undefined>(undefined);
 let visible = ref(props.showHeight === 0);
 
+const classBacktop = computed(() => {
+  return {
+    'layui-backtop-medium': props.size === "medium",
+    'layui-backtop-small': props.size === "small"
+  }
+});
+
 const borderRadius = computed(() => {
-  if (props.circle) return "50%";
+  if (props.circle) {
+    return "50%"
+  };
   return typeof props.borderRadius === "number"
     ? `${props.borderRadius}px`
     : props.borderRadius;
@@ -150,14 +158,14 @@ const getScrollTarget = () => {
     return getScrollParent(backtopRef.value!, false);
   } else {
     const targetElement = document.querySelector<HTMLElement>(props.target);
-    if (!targetElement)
+    if (!targetElement){
       throw new Error(`target is not existed: ${props.target}`);
+    }
     // 特定容器内部显示
     if (props.position === "absolute") {
-      if (!targetElement.parentElement)
-        throw new Error(
-          `target parent element is not existed: ${props.target}`
-        );
+      if (!targetElement.parentElement){
+        throw new Error( `target parent element is not existed: ${props.target}`);
+      }
       targetElement.parentElement.style.position = "relative";
       // backtopRef.value!.style.position = props.position;
     }
@@ -178,9 +186,12 @@ const getScrollParent = (
   //if (style.position === "fixed") return document.documentElement || document.body || window;
   for (let parent: HTMLElement = element; (parent = parent.parentElement!); ) {
     style = getComputedStyle(parent);
-    if (excludeStaticParent && style.position === "static") continue;
-    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
+    if (excludeStaticParent && style.position === "static") {
+      continue;
+    }
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)){
       return parent;
+    }
   }
   return document.documentElement || document.body || window;
 };