fix(mdAnchor): 折叠md目录后切换页面缩放异常的问题
This commit is contained in:
parent
f8513ceca1
commit
e22c521980
@ -33,7 +33,7 @@
|
||||
</aside>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, shallowRef } from "vue";
|
||||
import { computed, onMounted, ref, shallowRef, watch } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
anchors?: Array<string> | string;
|
||||
@ -49,6 +49,8 @@ const anchors: string | string[] | undefined = props.anchors;
|
||||
const scrollTop = ref<number>(0);
|
||||
/**要监听的滚动元素 */
|
||||
const scrollRefEl = shallowRef<HTMLElement | undefined>(undefined);
|
||||
/**折叠动画 */
|
||||
let enableAnimation = false;
|
||||
|
||||
const anchorList = computed(() => {
|
||||
return typeof anchors === "string" ? anchors?.split(",") : anchors;
|
||||
@ -56,25 +58,39 @@ const anchorList = computed(() => {
|
||||
|
||||
const classAside = computed(() => [
|
||||
"lay-aside",
|
||||
{ "lay-aside-animation": enableAnimation },
|
||||
{ "lay-aside-collapse": !show.value },
|
||||
]);
|
||||
|
||||
const classAsideBtn = computed(() => [
|
||||
"lay-aside-collapse-btn",
|
||||
{ "lay-aside-collapse-btn-collapse": !show.value },
|
||||
]);
|
||||
const classAsideBtn = computed(() => {
|
||||
let classBtn = [];
|
||||
if (enableAnimation) {
|
||||
classBtn = [
|
||||
"lay-aside-collapse-btn",
|
||||
"lay-aside-animation",
|
||||
{ "lay-aside-collapse-btn-collapse": !show.value }
|
||||
];
|
||||
} else {
|
||||
classBtn = [
|
||||
"lay-aside-collapse-btn",
|
||||
{ "lay-aside-collapse-btn-collapse": !show.value }
|
||||
];
|
||||
|
||||
enableAnimation = true;
|
||||
}
|
||||
return classBtn;
|
||||
});
|
||||
|
||||
const handlerBtnClick = () => {
|
||||
show.value = !show.value;
|
||||
iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
|
||||
scrollRefEl.value!.firstElementChild!.style.marginRight = show.value ? "180px" : "0px";
|
||||
};
|
||||
}
|
||||
|
||||
const handlerListItemClick = (index: number, id: string) => {
|
||||
activeIndex.value = index;
|
||||
scrollToTitle(id);
|
||||
};
|
||||
}
|
||||
|
||||
/**锚点标签跟随滚动高亮 */
|
||||
const handlerScroll = () => {
|
||||
// 距离顶部 90 改变 activeIndex
|
||||
scrollTop.value = getScrollTop(scrollRefEl.value) + 90;
|
||||
@ -90,12 +106,29 @@ const handlerScroll = () => {
|
||||
});
|
||||
}
|
||||
|
||||
const handlerCollapse = () => {
|
||||
iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
|
||||
scrollRefEl.value!.firstElementChild!.style.marginRight = show.value
|
||||
? "180px"
|
||||
: "0px";
|
||||
}
|
||||
|
||||
watch(show, () => {
|
||||
handlerCollapse();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// TODO 封装 hooks
|
||||
scrollRefEl.value = document.querySelector(".layui-body");
|
||||
if (!scrollRefEl.value) throw new Error("");
|
||||
if (!scrollRefEl.value) {
|
||||
throw new Error(`scroll element is not existed: ".layui-body"`);
|
||||
}
|
||||
scrollRefEl.value.scrollTop = 0;
|
||||
scrollRefEl.value?.addEventListener("scroll", throttle(handlerScroll, 500));
|
||||
// 如果已折叠,关闭组件初始渲染时的动画,然后自动开启
|
||||
show.value =
|
||||
scrollRefEl.value!.firstElementChild!.style.marginRight !== "0px";
|
||||
enableAnimation = show.value;
|
||||
});
|
||||
|
||||
/**获取滚动高度 */
|
||||
@ -108,7 +141,7 @@ const getScrollTop = (el: HTMLElement | undefined): number => {
|
||||
0;
|
||||
}
|
||||
/**平滑滚动 */
|
||||
const scrollToTitle = (id: string): void =>{
|
||||
const scrollToTitle = (id: string): void => {
|
||||
document.getElementById(id)?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
@ -145,10 +178,16 @@ const throttle = (func: Function, wait: number) => {
|
||||
padding: 0 25px;
|
||||
background-color: #ffffff;
|
||||
border-left: 1px solid rgb(229 230 235);
|
||||
transition: right 200ms;
|
||||
transition: none;
|
||||
-webkit-transition: none;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.lay-aside-collapse {
|
||||
right: -180px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.lay-aside-top {
|
||||
height: 29px;
|
||||
}
|
||||
@ -192,11 +231,6 @@ const throttle = (func: Function, wait: number) => {
|
||||
color: #5fb878 !important;
|
||||
}
|
||||
|
||||
.lay-aside-collapse {
|
||||
right: -180px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.lay-aside-collapse-btn {
|
||||
position: fixed;
|
||||
right: 197px;
|
||||
@ -212,8 +246,9 @@ const throttle = (func: Function, wait: number) => {
|
||||
border-bottom-left-radius: 4px;
|
||||
border: rgb(229 230 235) 1px solid;
|
||||
border-right: none;
|
||||
transition: right 200ms;
|
||||
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
|
||||
transition: none;
|
||||
-webkit-transition: none;
|
||||
&:hover {
|
||||
background-color: #e2e2e2;
|
||||
}
|
||||
@ -222,6 +257,11 @@ const throttle = (func: Function, wait: number) => {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.lay-aside-animation {
|
||||
transition: right 200ms;
|
||||
-webkit-transition: right 200ms;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.lay-aside {
|
||||
width: 100px !important;
|
||||
|
Loading…
Reference in New Issue
Block a user