feat:1. backtop组件新增组件样式和图标样式的常用属性,方便使用 \n 2. 更新backtop API 文档

example/docs/zh-CN/components/backtop.md

@@ -136,14 +136,25 @@ export default {
 ::: table
 
 | 属性         | 说明                                          | 类型    | 可选值                     |
-| ---------- | --------------------------------------------------- | ------- | ------------------------ |
+| ------------ | --------------------------------------------- | ------- | -------------------------- |
+| <strong>通用属性</strong>                                                                                           |
 | target       | 可选，触发滚动的对象                          | string  | 元素选择器 \| 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(默认)             |
-| disabled   | 可选，禁用点击返回顶部                             | boolean | true \| false(默认)      |
+| opacity      | 可选，不透明度                                | number  | 0.0-1.0                    |
+| color        | 可选，前景颜色                                | string  | #FFFFFF                    |
+| borderRadius | 可选，添加圆角                                | string  | 2px(默认)                  |
+| <strong>图标样式</strong>                                                                                         
+| icon         | 可选,图标类型                                 | string  | layui-icon-top(默认)       |
+| iconSize     | 可选,图标大小                                 | number  | 30                         |
+| iconPrefix   | 可选,图标前缀layui-icon  layui-icon-top       | string  | layui-icon(默认)           |
+| iconColor    | 可选,图标颜色                                 | string  | #FFFFFF(默认)              |
+
 
 :::
 
@@ -153,7 +164,7 @@ export default {
 ::: table
 
 | 事件名 | 说明                       | 回调参数 |
-| ------ | ------------------------- | -------- |
+| ------ | -------------------------- | -------- |
 | click  | 点击回到顶部按钮的回调函数 | event    |
 
 :::
@@ -164,7 +175,7 @@ export default {
 ::: table
 
 | 插槽名 | 说明       |
-| ------ | ------------------ |
+| ------ | ---------- |
 | —      | 自定义内容 |
 
 :::

src/module/backTop/index.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- FIXME style为临时方案 -->
   <div
     v-show="visible"
     ref="backtopRef"
@@ -6,14 +7,23 @@
     :style="{
       right: `${props.right}px`,
       bottom: `${props.bottom}px`,
-      backgroundColor: `${props.bgcolor}`
+      backgroundColor: `${props.bgcolor}`,
+      opacity:`${props.opacity}`,
+      color: `${props.color}`,
+      borderRadius:`${props.borderRadius}`,
     }"
     @click.stop="handleClick"
-    @mousedown="backtopRef.style.opacity=1"
-    @mouseup="backtopRef.style.opacity=0.95"
+    @mousedown="backtopRef.style.opacity = 1"
+    @mouseup="backtopRef.style.opacity = 0.95"
   >
+    <!-- <i v-if="!$slots.default" :class="`layui-icon ${props.icon}`" style="font-size: 30px;"></i> -->
     <slot>
-      <lay-icon type="layui-icon-top" size="40px"></lay-icon>
+      <lay-icon 
+      :type="`layui-icon ${props.icon}`" 
+      :size="`${props.iconSize}px`"
+      :prefix="`${props.iconPrefix}`"
+      :color="`${props.iconColor}`">
+      </lay-icon>
     </slot>
   </div>
 </template>
@@ -30,22 +40,34 @@ import layIcon from '../icon/index';
 import './index.less';
 
 export interface LayBacktopProps {
+  // 通用
   target?: string; // 触发滚动的对象
   showHeight?: number;
+  disabled?: boolean; // 禁用返回顶部
+  // 组件样式
   position?: 'fixed' | 'absolute';  // 定位方式,显示在特定容器内部需要设置为 absolute
   right?: number;
   bottom?: number;
-  bgcolor?: string;
-  disabled?: boolean; // 禁用返回顶部
+  bgcolor?: string; // 背景颜色
+  opacity?: number; // 不透明度0.01~1.00
+  color?: string; // 前景颜色
+  borderRadius?: string
+  // shape?: 'square' | 'circular';
+  // 图标样式
+  icon?: string;
+  iconSize?: number;
+  iconPrefix?: string;
+  iconColor?: string;
+
 }
 
 const props = withDefaults(defineProps<LayBacktopProps>(), {
   target: 'window',
   showHeight: 200,
-  position: 'fixed',
   right: 30,
   bottom: 40,
-  bgcolor: '#9F9F9F',
+  icon: 'layui-icon-top',
+  iconSize:30,
   disabled: false,
 });
 
@@ -64,7 +86,7 @@ const scrollToTop = () => {
       behavior: 'smooth' //smooth(平滑滚动),instant(瞬间滚动)，默认instant
     });
   } else {
-    // FIXME 初版待改进
+    // FIXME 临时动画方案待改进
     let step = scrollTarget.value.scrollTop / 4;
     if (scrollTarget.value.scrollTop > 0) {
       scrollTarget.value.scrollTop -= Math.max(step, 10);