feat(backtop):新增 size 属性,移除 iconPrefix 属性

This commit is contained in:
sight
2021-12-27 00:26:26 +08:00
parent d492c496bd
commit 6290973543
3 changed files with 62 additions and 39 deletions

View File

@@ -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;
}

View File

@@ -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;
};