新增 prettierrc.js 配置
This commit is contained in:
parent
a0661bf46b
commit
d814aca171
3
.prettierrc.js
Normal file
3
.prettierrc.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
|
||||
}
|
@ -21,14 +21,22 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'LayBacktop',
|
||||
name: "LayBacktop",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits, ref, shallowRef, withDefaults, computed, onMounted, } from 'vue';
|
||||
import LayIcon from '../icon/index';
|
||||
import './index.less';
|
||||
import {
|
||||
defineProps,
|
||||
defineEmits,
|
||||
ref,
|
||||
shallowRef,
|
||||
withDefaults,
|
||||
computed,
|
||||
onMounted,
|
||||
} from "vue";
|
||||
import LayIcon from "../icon/index";
|
||||
import "./index.less";
|
||||
|
||||
export interface LayBacktopProps {
|
||||
/**通用*/
|
||||
@ -36,7 +44,7 @@ export interface LayBacktopProps {
|
||||
showHeight?: number;
|
||||
disabled?: boolean;
|
||||
/**组件样式*/
|
||||
position?: 'fixed' | 'absolute';
|
||||
position?: "fixed" | "absolute";
|
||||
right?: number;
|
||||
bottom?: number;
|
||||
bgcolor?: string;
|
||||
@ -52,16 +60,16 @@ export interface LayBacktopProps {
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayBacktopProps>(), {
|
||||
target: 'window',
|
||||
target: "window",
|
||||
showHeight: 200,
|
||||
icon: 'layui-icon-top',
|
||||
icon: "layui-icon-top",
|
||||
iconSize: 30,
|
||||
iconPrefix: 'layui-icon',
|
||||
iconPrefix: "layui-icon",
|
||||
disabled: false,
|
||||
circle: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
const emit = defineEmits(["click"]);
|
||||
|
||||
const backtopRef = ref<HTMLElement | null>(null);
|
||||
const scrollTarget = shallowRef<Window | HTMLElement | undefined>(undefined);
|
||||
@ -69,7 +77,9 @@ let visible = ref(props.showHeight === 0);
|
||||
|
||||
const borderRadius = computed(() => {
|
||||
if (props.circle) return "50%";
|
||||
return typeof props.borderRadius === 'number' ? `${props.borderRadius}px` : props.borderRadius;
|
||||
return typeof props.borderRadius === "number"
|
||||
? `${props.borderRadius}px`
|
||||
: props.borderRadius;
|
||||
});
|
||||
|
||||
const styleBacktop = computed(() => {
|
||||
@ -81,18 +91,18 @@ const styleBacktop = computed(() => {
|
||||
opacity: props.opacity,
|
||||
color: props.color,
|
||||
borderRadius: borderRadius.value,
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// TODO 待改进
|
||||
const easeInOut = (value: number): number => {
|
||||
return value < 0.5 ? 2 * value * value : 1 - 2 * (value - 1) * (value - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const scrollToTop = () => {
|
||||
if (!scrollTarget.value) return;
|
||||
if (scrollTarget.value instanceof Window) {
|
||||
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); // smooth | instant(default)
|
||||
window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); // smooth | instant(default)
|
||||
} else {
|
||||
const previous: number = Date.now();
|
||||
const scrollHeight: number = scrollTarget.value.scrollTop;
|
||||
@ -105,62 +115,75 @@ const scrollToTop = () => {
|
||||
} else {
|
||||
scrollTarget.value.scrollTop = 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
window.requestAnimationFrame(animationFunc);
|
||||
}
|
||||
};
|
||||
|
||||
const handleScroll = () => {
|
||||
if (!scrollTarget.value) return;
|
||||
const scrollTop = scrollTarget.value instanceof Window ? window.pageYOffset : scrollTarget.value.scrollTop;
|
||||
const scrollTop =
|
||||
scrollTarget.value instanceof Window
|
||||
? window.pageYOffset
|
||||
: scrollTarget.value.scrollTop;
|
||||
visible.value = scrollTop >= props.showHeight;
|
||||
};
|
||||
|
||||
const handleClick = (event: MouseEvent) => {
|
||||
if (!props.disabled) {
|
||||
scrollToTop()
|
||||
};
|
||||
emit('click', event);
|
||||
scrollToTop();
|
||||
}
|
||||
emit("click", event);
|
||||
};
|
||||
|
||||
const handlerMousedown = () => {
|
||||
backtopRef.value!.style.opacity = '1';
|
||||
}
|
||||
backtopRef.value!.style.opacity = "1";
|
||||
};
|
||||
|
||||
const handlerMouseup = () => {
|
||||
backtopRef.value!.style.opacity = '0.95';
|
||||
}
|
||||
backtopRef.value!.style.opacity = "0.95";
|
||||
};
|
||||
|
||||
// 获取滚动目标元素
|
||||
const getScrollTarget = () => {
|
||||
if (props.target === 'window') {
|
||||
if (props.target === "window") {
|
||||
return getScrollParent(backtopRef.value!, false);
|
||||
} else {
|
||||
const targetElement = document.querySelector<HTMLElement>(props.target);
|
||||
if (!targetElement) throw new Error(`target is not existed: ${props.target}`);
|
||||
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}`);
|
||||
targetElement.parentElement.style.position = 'relative';
|
||||
if (props.position === "absolute") {
|
||||
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;
|
||||
}
|
||||
return targetElement;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 获取距离元素最近的可滚动祖先元素
|
||||
const getScrollParent = (element: HTMLElement, includeHidden: boolean): HTMLElement => {
|
||||
const getScrollParent = (
|
||||
element: HTMLElement,
|
||||
includeHidden: boolean
|
||||
): HTMLElement => {
|
||||
let style: CSSStyleDeclaration = getComputedStyle(element);
|
||||
let excludeStaticParent: boolean = style.position === "absolute";
|
||||
let overflowRegex: RegExp = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
|
||||
let overflowRegex: RegExp = includeHidden
|
||||
? /(auto|scroll|hidden)/
|
||||
: /(auto|scroll)/;
|
||||
//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);
|
||||
if (excludeStaticParent && style.position === "static") continue;
|
||||
if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
|
||||
if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
|
||||
return parent;
|
||||
}
|
||||
return document.documentElement || document.body || window;
|
||||
}
|
||||
};
|
||||
|
||||
// 节流
|
||||
const throttle = (func: Function, wait: number) => {
|
||||
@ -172,12 +195,12 @@ const throttle = (func: Function, wait: number) => {
|
||||
func.apply(this, args);
|
||||
}, wait);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (!props.target) return;
|
||||
scrollTarget.value = getScrollTarget();
|
||||
scrollTarget.value.addEventListener('scroll', throttle(handleScroll, 300));
|
||||
scrollTarget.value.addEventListener("scroll", throttle(handleScroll, 300));
|
||||
});
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user