新增 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">
|
<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>
|
||||||
|
Loading…
Reference in New Issue
Block a user