Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop

README.md

@@ -12,7 +12,6 @@
   <a href="https://www.npmjs.com/package/layui"><img src="https://img.shields.io/npm/l/layui.svg?sanitize=true" alt="License"></a>
   <a href="https://travis-ci.org/sentsin/layui"><img alt="Build Status" src="https://img.shields.io/travis/sentsin/layui/master.svg"></a>
   <a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
-  <!--<a href="https://saucelabs.com/beta/builds/7e6196205e4f492496203388fc003b65"><img src="https://saucelabs.com/buildstatus/layui" alt="Build Status"></a>-->
 </p>
 
 <!--

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

@@ -1,6 +1,6 @@
 ::: title 基础使用
 
-###### 回到顶部组件的默认样式，通过滑动来查看页面右下角的按钮。
+###### 回到顶部组件的默认样式，通过滑动来查看页面右下角的正方形按钮。
 
 :::
 ::: demo
@@ -9,18 +9,6 @@
   <lay-backtop target=".layui-body"></lay-backtop>
 </template>
 
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
 :::
 
 :::title 自定义
@@ -29,19 +17,19 @@ export default {
 
 ::: demo
 
-<!-- 使用默认插槽自定义组件内容,也可以使用组件提供的样式属性快速定义常用样式 -->
+<!-- 使用默认插槽自定义组件内容,也可以使用组件提供的样式属性快速定义常用样式，样式属性能满足大多数场景,lay-backtop组件可搭配 lay-tooltip 组件使用-->
 <template>
-  <lay-backtop target=".layui-body" :showHeight="0" :bottom="100"  @click="handlerClick" bgcolor="#FFFFFF" disabled >
+  <!-- 使用默认插槽自定义 -->
-    <div style="
+  <lay-tooltip content="插槽自定义 backtop " position="left">
-        width:50px;
+    <lay-backtop target=".layui-body" :showHeight="0" :bottom="160" bgcolor="#5FB878" circular disabled>
-        height:50px;
+      <lay-icon type="layui-icon-dialogue" size="30px"></lay-icon>
-        background-color: #5FB878;
+    </lay-backtop>
-        color: #FFFFFF;
+  </lay-tooltip>
-        text-align: center;
+  <!-- 使用样式属性自定义 -->
-        border-radius:50%">
+  <lay-tooltip content="属性自定义 backtop " position="left">
-        <i class="layui-icon layui-icon-dialogue" style="font-size:30px"></i>
+    <lay-backtop target=".layui-body" :bottom="100" bgcolor="#5FB878" icon="layui-icon-up" circular>
-    </div>
+    </lay-backtop>
-  </lay-backtop>
+  </lay-tooltip>  
 </template>
 
 <script>
@@ -50,14 +38,11 @@ import { layer } from "../../../../src/index.ts"
 
 export default {
   setup() {
-    let count = 0;
     const handlerClick = () => {
-      count++;
+      layer.msg("layui-vue", { time: 1000 });
-      layer.msg(count, { time: 1000 })
     }
-
+    
     return {
-      count,
       handlerClick,
     }
   }
@@ -74,8 +59,8 @@ export default {
 ::: demo
 
 <template>
-<!-- 需要用一个 div 包裹滚动目标和 lay-backtop 组件 -->
+<!-- 需要用一个 div 包裹触发滚动事件的目标元素和 lay-backtop 组件 -->
-<div class="scrollContainer">
+<div class="scrollContainer" style="width:700px; height:300px;">
   <div id="scrollContent" style="overflow-y:auto; overflow-x:auto; width:700px; height:300px;">
     <p v-for="(n,index) in 50" :key="n" style="height:32px;border-bottom:0.5px solid #5FB878;margin-bottom:10px;line-height:35px">
       {{index + ". &nbsp;layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式"}}
@@ -86,63 +71,7 @@ export default {
 </template>
 
 <script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
 </script>
-<style>
-.scrollContainer{
-  width:700px; 
-  height:300px;
-}
-</style>
-
-:::
-
-::: title 结合 tooltip 组件使用
-
-###### 可以和 lay-tooltip 组件搭配使用
-
-:::
-::: demo
-
-<template>
-<!-- 需要用一个 div 包裹滚动容器和 Lay-backtop 组件 -->
-<div class="scrollContainer">
-  <div id="scrollContent2" style="overflow-y:auto; overflow-x:auto; width:700px; height:300px;">
-    <p v-for="(n,index) in 50" :key="n" style="height:40px;border-bottom:0.5px solid #5FB878;margin-bottom:10px;line-height:40px">
-      {{index + ". &nbsp;layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式"}}
-    </p>
-  </div>
-  <lay-tooltip content="backtop" position="left">
-    <lay-backtop target="#scrollContent2" :showHeight="100" :bottom="30" position="absolute" border-radius="50%" bgcolor="#5FB878"></lay-backtop>
-  </lay-tooltip>
-</div>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-<style>
-.scrollContainer{
-  width:700px; 
-  height:300px;
-}
-</style>
 
 :::
 
@@ -154,23 +83,23 @@ export default {
 | 属性                      | 说明                                          | 类型    | 可选值                     |
 | ------------------------- | --------------------------------------------- | ------- | -------------------------- |
 | <strong>通用属性</strong> |
-| target                    | 可选，触发滚动的对象                          | string  | 元素选择器 \| window(默认) |
+| target                    | 可选，触发滚动事件的对象                      | string  | CSS 选择器 \| window(默认) |
-| showHeight                | 可选，滚动高度达到该值后显示回到顶部按钮      | number  | 200(默认)                  |
+| showHeight                | 可选，滚动高度达到该值后显示回到顶部按钮       | number  | 200(默认)                  |
 | disabled                  | 可选，禁用点击返回顶部                        | boolean | true \| false(默认)        |
 | <strong>组件样式</strong> |
-| position                  | 可选，定位方式，特定容器内部需设置为 absolute | string  | absolute \| fixed(默认)    |
+| position                  | 可选，定位方式，特定容器内部需设置为 absolute  | string  | absolute \| fixed(默认)    |
-| right                     | 可选，按钮距离页面右边距，单位 px             | number  | 30(默认)                   |
+| right                     | 可选，按钮距离页面右边距，单位 px              | number  | 30(默认)                   |
-| bottom                    | 可选，按钮距离页面底部位置，单位 px           | number  | 40(默认)                   |
+| bottom                    | 可选，按钮距离页面底部位置，单位 px            | number  | 40(默认)                   |
 | bgcolor                   | 可选，背景颜色                                | string  | \#9F9F9F(默认)             |
 | opacity                   | 可选，不透明度                                | number  | 0.0-1.0                    |
 | color                     | 可选，前景颜色                                | string  | #FFFFFF                    |
 | borderRadius              | 可选，添加圆角                                | string  | 2px(默认)                  |
-|
+| circular                  | 可选, 使用圆形按钮                            | boolean | true \| false(默认)
-| <strong>图标样式</strong>  |
+| <strong>图标样式</strong> |
-| icon | 可选,图标类型 | string | layui-icon-top(默认) |
+| icon                      | 可选,图标类型                                 | string  | layui-icon-top(默认)       |
-| iconSize | 可选,图标大小 | number | 30 |
+| iconSize                  | 可选,图标大小                                 | number  | 30                         |
-| iconPrefix | 可选,图标前缀 layui-icon layui-icon-top | string | layui-icon(默认) |
+| iconPrefix                | 可选,图标前缀 layui-icon layui-icon-top       | string  | layui-icon(默认)           |
-| iconColor | 可选,图标颜色 | string | #FFFFFF(默认) |
+| iconColor                 | 可选,图标颜色                                 | string  | #FFFFFF(默认)              |
 
 :::
 
@@ -181,7 +110,7 @@ export default {
 
 | 事件名 | 说明                       | 回调参数 |
 | ------ | -------------------------- | -------- |
-| click  | 点击回到顶部按钮的回调函数 | event    |
+| click  | 点击回到顶部按钮的回调函数  | event    |
 
 :::
 

src/module/backTop/index.less

@@ -1,20 +1,20 @@
 /** backtop **/
-.lay-backtop {
+.layui-backtop {
   position: fixed;
-  right: 15px;
+  right: 30px;
-  bottom: 15px;
+  bottom: 40px;
-  z-index: 999999;
   width: 50px;
   height: 50px;
-  line-height: 50px;
+  display: flex;
-  margin-bottom: 1px;
+  align-items: center;
-  text-align: center;
+  justify-content: center;
   cursor: pointer;
   font-size: 40px;
   background-color: #9f9f9f;
-  color: #fff;
+  color: #ffffff;
   border-radius: 2px;
   opacity: 0.95;
+  z-index: 999999;
   :hover {
     opacity: 0.85;
   }

src/module/backTop/index.vue

@@ -1,29 +1,20 @@
 <template>
-<!-- FIXME style为临时方案 -->
   <div
     v-show="visible"
     ref="backtopRef"
-    class="lay-backtop"
+    class="layui-backtop"
-    :style="{
+    :style="{ ...styleBacktop }"
-      right: `${props.right}px`,
-      bottom: `${props.bottom}px`,
-      backgroundColor: `${props.bgcolor}`,
-      opacity:`${props.opacity}`,
-      color: `${props.color}`,
-      borderRadius:`${props.borderRadius}`,
-    }"
     @click.stop="handleClick"
-    @mousedown="backtopRef.style.opacity = 1"
+    @mousedown="handlerMousedown"
-    @mouseup="backtopRef.style.opacity = 0.95"
+    @mouseup="handlerMouseup"
   >
-    <!-- <i v-if="!$slots.default" :class="`layui-icon ${props.icon}`" style="font-size: 30px;"></i> -->
     <slot>
-      <lay-icon 
+      <lay-icon
-      :type="`layui-icon ${props.icon}`" 
+        :type="props.icon"
-      :size="`${props.iconSize}px`"
+        :size="`${props.iconSize}px`"
-      :prefix="`${props.iconPrefix}`"
+        :prefix="props.iconPrefix"
-      :color="`${props.iconColor}`">
+        :color="props.iconColor"
-      </lay-icon>
+      ></lay-icon>
     </slot>
   </div>
 </template>
@@ -36,29 +27,28 @@ export default {
 
 <script lang="ts" setup>
 import { defineProps, defineEmits, ref, shallowRef, withDefaults, computed, onMounted, } from 'vue';
-import layIcon from '../icon/index';
+import LayIcon from '../icon/index';
 import './index.less';
 
 export interface LayBacktopProps {
-  // 通用
+  /**通用*/
-  target?: string; // 触发滚动的对象
+  target?: string;
   showHeight?: number;
-  disabled?: boolean; // 禁用返回顶部
+  disabled?: boolean;
-  // 组件样式
+  /**组件样式*/
-  position?: 'fixed' | 'absolute';  // 定位方式,显示在特定容器内部需要设置为 absolute
+  position?: 'fixed' | 'absolute';
   right?: number;
   bottom?: number;
-  bgcolor?: string; // 背景颜色
+  bgcolor?: string;
-  opacity?: number; // 不透明度0.01~1.00
+  opacity?: number;
-  color?: string; // 前景颜色
+  color?: string;
-  borderRadius?: string
+  borderRadius?: number | string;
-  // shape?: 'square' | 'circular';
+  circular?: boolean;
-  // 图标样式
+  /**图标样式*/
   icon?: string;
   iconSize?: number;
   iconPrefix?: string;
   iconColor?: string;
-
 }
 
 const props = withDefaults(defineProps<LayBacktopProps>(), {
@@ -67,26 +57,39 @@ const props = withDefaults(defineProps<LayBacktopProps>(), {
   right: 30,
   bottom: 40,
   icon: 'layui-icon-top',
-  iconSize:30,
+  iconSize: 30,
+  iconPrefix: 'layui-icon',
   disabled: false,
+  circular: false,
 });
 
 const emit = defineEmits(['click']);
 
-let visible = ref(props.showHeight === 0);
 const backtopRef = ref<HTMLElement | null>(null);
 const scrollTarget = shallowRef<Window | HTMLElement | undefined>(undefined);
+let visible = ref(props.showHeight === 0);
+const borderRadius = computed(() => {
+  if (props.circular) return "50%";
+  return typeof props.borderRadius === 'number' ? `${props.borderRadius}px` : props.borderRadius;
+});
+const styleBacktop = computed(() => {
+  return {
+    position: props.position,
+    right: `${props.right}px`,
+    bottom: `${props.bottom}px`,
+    backgroundColor: props.bgcolor,
+    opacity: props.opacity,
+    color: props.color,
+    borderRadius: borderRadius.value,
+  }
+});
 
+// TODO 临时动画方案
 const scrollToTop = () => {
   if (!scrollTarget.value) return;
   if (scrollTarget.value instanceof Window) {
-    window.scrollTo({
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); // smooth | instant(default)
-      top: 0,
-      left: 0,
-      behavior: 'smooth' //smooth(平滑滚动),instant(瞬间滚动)，默认instant
-    });
   } else {
-    // FIXME 临时动画方案待改进
     let step = scrollTarget.value.scrollTop / 4;
     if (scrollTarget.value.scrollTop > 0) {
       scrollTarget.value.scrollTop -= Math.max(step, 10);
@@ -110,6 +113,14 @@ const handleClick = (event: MouseEvent) => {
   emit('click', event);
 };
 
+const handlerMousedown = () => {
+  backtopRef.value!.style.opacity = '1';
+}
+
+const handlerMouseup = () => {
+  backtopRef.value!.style.opacity = '0.95';
+}
+
 // 获取滚动目标元素
 const getScrollTarget = () => {
   if (props.target === 'window') {
@@ -121,8 +132,7 @@ const getScrollTarget = () => {
     if (props.position === 'absolute') {
       if (!targetElement.parentElement) throw new Error(`target parent element is not existed: ${props.target}`);
       targetElement.parentElement.style.position = 'relative';
-      if (!backtopRef.value) throw new Error(`backtop component ref is null: ${props.target}`);
+      // backtopRef.value!.style.position = props.position;
-      backtopRef.value.style.position = props.position;
     }
     return targetElement;
   }
@@ -131,7 +141,7 @@ const getScrollTarget = () => {
 onMounted(() => {
   let timer: any = undefined;
   scrollTarget.value = getScrollTarget();
-  // FIXME 节流待改进
+  // TODO 节流待改进
   scrollTarget.value.addEventListener('scroll', () => {
     clearTimeout(timer);
     timer = setTimeout(() => {