新增 prettierrc.js 配置

This commit is contained in:
就眠儀式 2021-12-24 13:28:18 +08:00
parent a0661bf46b
commit d814aca171
2 changed files with 62 additions and 36 deletions

3
.prettierrc.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
}

View File

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