feat(backtop):新增 size 属性，移除 iconPrefix 属性
This commit is contained in:
sight
parent
d492c496bd
commit
6290973543
@ -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| 自定义内容 |
|
||||
|
||||
:::
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user