Merge branch 'next' of https://gitee.com/layui/layui-vue into next
This commit is contained in:
就眠儀式
commit
0a3ac48d95
@ -12,27 +12,29 @@ export default {
|
||||
import "./index.less";
|
||||
import { ref, onMounted, onUnmounted, nextTick, computed } from "vue";
|
||||
export interface LayAiffxProps {
|
||||
top?: number;
|
||||
bottom?: number;
|
||||
offset?: number;
|
||||
target?: HTMLElement;
|
||||
position?: string;
|
||||
}
|
||||
const props = withDefaults(defineProps<LayAiffxProps>(), {
|
||||
top: 0,
|
||||
offset: 0,
|
||||
position: 'top',
|
||||
target: () => {
|
||||
return document.body;
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['scroll'])
|
||||
const outWindow = ref(false);
|
||||
const affixTop = ref(false);
|
||||
const dom = ref();
|
||||
|
||||
let changeScrollTop = 0;
|
||||
let orginOffsetLeft = 0;
|
||||
let orginOffsetTop = 0;
|
||||
let marginLeft = 0;
|
||||
let marginTop = 0;
|
||||
let fixedTop = 0;
|
||||
let fixedBottom = 0;
|
||||
let marginBottom = 0;
|
||||
let fixedOffset = 0;
|
||||
|
||||
const getStyle = computed(() => {
|
||||
if (outWindow.value && dom.value) {
|
||||
let style = {
|
||||
@ -41,17 +43,12 @@ const getStyle = computed(() => {
|
||||
bottom: "unset",
|
||||
left: orginOffsetLeft - marginLeft + "px",
|
||||
};
|
||||
if (affixTop.value) {
|
||||
style.top = fixedTop - marginTop + "px";
|
||||
return style;
|
||||
if (props.position === 'top') {
|
||||
style.top = fixedOffset - marginTop + "px";
|
||||
} else {
|
||||
if (props.hasOwnProperty("bottom")) {
|
||||
style.bottom = props.bottom + "px";
|
||||
return style;
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
style.bottom = fixedOffset - marginBottom + "px";
|
||||
}
|
||||
return style;
|
||||
}
|
||||
});
|
||||
//检查是否在窗口内
|
||||
@ -59,11 +56,10 @@ const checkInWindow = () => {
|
||||
if (dom.value) {
|
||||
let offsetTop = dom.value.offsetTop;
|
||||
let scrollTop = props.target?.scrollTop;
|
||||
|
||||
if (typeof props.bottom === "undefined") {
|
||||
if (props.position === 'top') {
|
||||
//top检查 当前元素与容器顶部距离-减去滚动条的高度+容器offsetTop
|
||||
let result = offsetTop - scrollTop + props.target.offsetTop;
|
||||
if (result < fixedTop) {
|
||||
if (result < fixedOffset) {
|
||||
if (outWindow.value) {
|
||||
if (scrollTop <= changeScrollTop) {
|
||||
outWindow.value = false;
|
||||
@ -71,9 +67,7 @@ const checkInWindow = () => {
|
||||
} else {
|
||||
changeScrollTop = scrollTop;
|
||||
outWindow.value = true;
|
||||
affixTop.value = true;
|
||||
}
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
//bottom检查 可视区窗口高度 + 文档滚动高度 - 当前元素与容器顶部距离 - 当前元素高度
|
||||
@ -84,20 +78,20 @@ const checkInWindow = () => {
|
||||
let result = viewHeight + scrollTop - offsetTop - dom.value.offsetHeight;
|
||||
if (outWindow.value) {
|
||||
if (scrollTop >= changeScrollTop) {
|
||||
if (props.bottom == 0) {
|
||||
console.log(scrollTop);
|
||||
}
|
||||
outWindow.value = false;
|
||||
}
|
||||
} else {
|
||||
if (result < fixedBottom) {
|
||||
changeScrollTop = scrollTop - result + props.bottom;
|
||||
console.log(changeScrollTop);
|
||||
if (result < fixedOffset) {
|
||||
changeScrollTop = scrollTop - result + props.offset
|
||||
outWindow.value = true;
|
||||
affixTop.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
emit('scroll', {
|
||||
targetScroll: scrollTop,
|
||||
affixed: outWindow.value,
|
||||
offset: !outWindow.value ? 0 : Math.abs(scrollTop - changeScrollTop)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -112,14 +106,15 @@ const getDomStyle = (dom: any, attr: string) => {
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
orginOffsetLeft = dom.value.getBoundingClientRect().left;
|
||||
fixedTop = props.top + props.target.offsetTop;
|
||||
if (typeof props.bottom !== "undefined") {
|
||||
fixedBottom =
|
||||
props.bottom + parseFloat(getDomStyle(dom.value, "marginBottom"));
|
||||
orginOffsetTop = dom.value.offsetTop - props.target.offsetTop
|
||||
orginOffsetLeft = dom.value.getBoundingClientRect().left
|
||||
marginLeft = parseFloat(getDomStyle(dom.value, 'marginLeft'))
|
||||
marginTop = parseFloat(getDomStyle(dom.value, 'marginTop'))
|
||||
marginBottom = parseFloat(getDomStyle(dom.value, 'marginBottom'))
|
||||
fixedOffset = props.offset + props.target.offsetTop
|
||||
if (props.position === 'bottom') {
|
||||
fixedOffset = props.offset
|
||||
}
|
||||
marginLeft = parseFloat(getDomStyle(dom.value, "marginLeft"));
|
||||
marginTop = parseFloat(getDomStyle(dom.value, "marginTop"));
|
||||
props.target.addEventListener("scroll", checkInWindow, true);
|
||||
checkInWindow();
|
||||
});
|
||||
|
||||
@ -10,22 +10,22 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-affix` 标签, 创建锚点，`target` 属性用于需要监听其滚动事件的元素，默认为 `document.body` ,`top`设置距离容器顶部偏移量
|
||||
::: demo 使用 `lay-affix` 标签, 创建锚点，`target` 属性用于需要监听其滚动事件的元素，默认为 `document.body` ,`offset`设置距离容器的偏移量
|
||||
<template>
|
||||
<div style="width:100%;height:200px">
|
||||
<lay-affix :target="target" :top="0" v-if="target">
|
||||
<lay-affix :target="target" v-if="target">
|
||||
<lay-button type="normal">固定在最顶部</lay-button>
|
||||
</lay-affix>
|
||||
<lay-affix :target="target" :top="38" v-if="target" style="margin-left:150px;">
|
||||
<lay-affix :target="target" :offset="38" v-if="target" style="margin-left:150px;">
|
||||
<lay-button type="normal">固定在距离顶部38px</lay-button>
|
||||
</lay-affix>
|
||||
<lay-affix :target="target" :top="76" v-if="target" style="margin-left:350px">
|
||||
<lay-affix :target="target" :offset="76" v-if="target" style="margin-left:350px">
|
||||
<lay-button type="normal">固定在距离顶部76px</lay-button>
|
||||
</lay-affix>
|
||||
<lay-affix :target="target" :top="114" v-if="target" style="margin-left:550px">
|
||||
<lay-affix :target="target" :offset="114" v-if="target" style="margin-left:550px">
|
||||
<lay-button type="normal">固定在距离顶部114px</lay-button>
|
||||
</lay-affix>
|
||||
<lay-affix :target="target" :top="152" v-if="target" style="margin-left:750px">
|
||||
<lay-affix :target="target" :offset="152" v-if="target" style="margin-left:750px">
|
||||
<lay-button type="normal">固定在距离顶部152px</lay-button>
|
||||
</lay-affix>
|
||||
</div>
|
||||
@ -37,16 +37,20 @@
|
||||
nextTick(()=>{
|
||||
target.value=document.querySelector(".layui-body");
|
||||
})
|
||||
const color=ref(0)
|
||||
const scroll=(e)=>{
|
||||
color.value=e.offset*2
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title 固定在最底部
|
||||
:::
|
||||
|
||||
::: demo 使用 `bottom` 属性, 设置距离容器底部偏移量
|
||||
::: demo 使用 `position` 属性, 改变定位属性，默认为 `top`,可选值 `bottom`
|
||||
<template>
|
||||
<div style="width:100%;height:100px">
|
||||
<lay-affix :target="target" :bottom="0" v-if="target">
|
||||
<lay-affix :target="target" :offset="0" position="bottom" v-if="target">
|
||||
<lay-button type="normal">固定在最底部</lay-button>
|
||||
</lay-affix>
|
||||
</div>
|
||||
@ -61,19 +65,27 @@
|
||||
</script>
|
||||
:::
|
||||
|
||||
|
||||
|
||||
|
||||
::: title Aiffx 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ------ | ---- | -------------- |
|
||||
| top | 顶部偏移量 : number | 0 |
|
||||
| bottom | 底部偏移量 : number，优先级大于`top` | - |
|
||||
| target | 指定参考容器 : HTMLElement | 默认`document.body`,请务必确保能够正确获取到dom|
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ------ | --------------------- | --------------------------------------- |
|
||||
| position | 定位属性 : string | `top` `bottom` |
|
||||
| offset | 偏移量 : number,默认为0 | - |
|
||||
| target | 指定参考容器 : HTMLElement | 默认`document.body`,请务必确保能够正确获取到dom|
|
||||
|
||||
:::
|
||||
|
||||
::: title Aiffx 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 回调参数 |
|
||||
| ------ | --------------------- | --------------------------------------- |
|
||||
| scroll | 初始化完成与滚动时触发的回调，回调会返回一个object<br><br>`{targetScroll:string,affixed:boolean,offset:number}` |<br/>`targetScroll` 容器滚动距离<br/><br/>`affixed` 是否处于fixed状态<br/><br/>`offset` 与原本位置的距离 <br> |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user