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