新增 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"> <script lang="ts">
export default { export default {
name: 'LayBacktop', name: "LayBacktop",
}; };
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { defineProps, defineEmits, ref, shallowRef, withDefaults, computed, onMounted, } from 'vue'; import {
import LayIcon from '../icon/index'; defineProps,
import './index.less'; defineEmits,
ref,
shallowRef,
withDefaults,
computed,
onMounted,
} from "vue";
import LayIcon from "../icon/index";
import "./index.less";
export interface LayBacktopProps { export interface LayBacktopProps {
/**通用*/ /**通用*/
@ -36,7 +44,7 @@ export interface LayBacktopProps {
showHeight?: number; showHeight?: number;
disabled?: boolean; disabled?: boolean;
/**组件样式*/ /**组件样式*/
position?: 'fixed' | 'absolute'; position?: "fixed" | "absolute";
right?: number; right?: number;
bottom?: number; bottom?: number;
bgcolor?: string; bgcolor?: string;
@ -52,16 +60,16 @@ export interface LayBacktopProps {
} }
const props = withDefaults(defineProps<LayBacktopProps>(), { const props = withDefaults(defineProps<LayBacktopProps>(), {
target: 'window', target: "window",
showHeight: 200, showHeight: 200,
icon: 'layui-icon-top', icon: "layui-icon-top",
iconSize: 30, iconSize: 30,
iconPrefix: 'layui-icon', iconPrefix: "layui-icon",
disabled: false, disabled: false,
circle: false, circle: false,
}); });
const emit = defineEmits(['click']); const emit = defineEmits(["click"]);
const backtopRef = ref<HTMLElement | null>(null); const backtopRef = ref<HTMLElement | null>(null);
const scrollTarget = shallowRef<Window | HTMLElement | undefined>(undefined); const scrollTarget = shallowRef<Window | HTMLElement | undefined>(undefined);
@ -69,7 +77,9 @@ let visible = ref(props.showHeight === 0);
const borderRadius = computed(() => { const borderRadius = computed(() => {
if (props.circle) return "50%"; 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(() => { const styleBacktop = computed(() => {
@ -81,18 +91,18 @@ const styleBacktop = computed(() => {
opacity: props.opacity, opacity: props.opacity,
color: props.color, color: props.color,
borderRadius: borderRadius.value, borderRadius: borderRadius.value,
} };
}); });
// TODO // TODO
const easeInOut = (value: number): number => { const easeInOut = (value: number): number => {
return value < 0.5 ? 2 * value * value : 1 - 2 * (value - 1) * (value - 1); return value < 0.5 ? 2 * value * value : 1 - 2 * (value - 1) * (value - 1);
} };
const scrollToTop = () => { const scrollToTop = () => {
if (!scrollTarget.value) return; if (!scrollTarget.value) return;
if (scrollTarget.value instanceof Window) { 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 { } else {
const previous: number = Date.now(); const previous: number = Date.now();
const scrollHeight: number = scrollTarget.value.scrollTop; const scrollHeight: number = scrollTarget.value.scrollTop;
@ -105,62 +115,75 @@ const scrollToTop = () => {
} else { } else {
scrollTarget.value.scrollTop = 0; scrollTarget.value.scrollTop = 0;
} }
} };
window.requestAnimationFrame(animationFunc); window.requestAnimationFrame(animationFunc);
} }
}; };
const handleScroll = () => { const handleScroll = () => {
if (!scrollTarget.value) return; 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; visible.value = scrollTop >= props.showHeight;
}; };
const handleClick = (event: MouseEvent) => { const handleClick = (event: MouseEvent) => {
if (!props.disabled) { if (!props.disabled) {
scrollToTop() scrollToTop();
}; }
emit('click', event); emit("click", event);
}; };
const handlerMousedown = () => { const handlerMousedown = () => {
backtopRef.value!.style.opacity = '1'; backtopRef.value!.style.opacity = "1";
} };
const handlerMouseup = () => { const handlerMouseup = () => {
backtopRef.value!.style.opacity = '0.95'; backtopRef.value!.style.opacity = "0.95";
} };
// //
const getScrollTarget = () => { const getScrollTarget = () => {
if (props.target === 'window') { if (props.target === "window") {
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) 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 (props.position === "absolute") {
if (!targetElement.parentElement) throw new Error(`target parent element is not existed: ${props.target}`); if (!targetElement.parentElement)
targetElement.parentElement.style.position = 'relative'; throw new Error(
`target parent element is not existed: ${props.target}`
);
targetElement.parentElement.style.position = "relative";
// backtopRef.value!.style.position = props.position; // backtopRef.value!.style.position = props.position;
} }
return targetElement; return targetElement;
} }
} };
// //
const getScrollParent = (element: HTMLElement, includeHidden: boolean): HTMLElement => { const getScrollParent = (
element: HTMLElement,
includeHidden: boolean
): HTMLElement => {
let style: CSSStyleDeclaration = getComputedStyle(element); let style: CSSStyleDeclaration = getComputedStyle(element);
let excludeStaticParent: boolean = style.position === "absolute"; 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; //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") 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; return document.documentElement || document.body || window;
} };
// //
const throttle = (func: Function, wait: number) => { const throttle = (func: Function, wait: number) => {
@ -172,12 +195,12 @@ const throttle = (func: Function, wait: number) => {
func.apply(this, args); func.apply(this, args);
}, wait); }, wait);
} }
} };
} };
onMounted(() => { onMounted(() => {
if (!props.target) return; if (!props.target) return;
scrollTarget.value = getScrollTarget(); scrollTarget.value = getScrollTarget();
scrollTarget.value.addEventListener('scroll', throttle(handleScroll, 300)); scrollTarget.value.addEventListener("scroll", throttle(handleScroll, 300));
}); });
</script> </script>