Vue組件設(shè)計(jì)Sticky布局效果怎么實(shí)現(xiàn)

本篇內(nèi)容主要講解“Vue組件設(shè)計(jì)Sticky布局效果怎么實(shí)現(xiàn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue組件設(shè)計(jì)Sticky布局效果怎么實(shí)現(xiàn)”吧!

Vue組件設(shè)計(jì)-Sticky布局

Sticky布局即為粘性定位，常見于一些重要的頁面區(qū)域在向上滾動(dòng)時(shí)不會(huì)被卷起來，在CSS中可以通過設(shè)置position:sticky來實(shí)現(xiàn)這一功能，但是如果出于兼容性考慮或是一些復(fù)雜的場(chǎng)景，就需要我們用傳統(tǒng)的方法來實(shí)現(xiàn)。

1. 效果示例

 2. 組件封裝

<template>
    <div :>
        <div
            :class="className"
            :style="{
                width: width,
                zIndex: zIndex,
                position: position,
                height: height + 'px',
                top: isSticky ? stickyTop + 'px' : '',
            }">
            <slot>
            </slot>
        </div>
    </div>
</template>
<script>
export default {
    name: "Sticky",
    props: {
        stickyTop: {
            type: Number,
            default: 0,
        },
        zIndex: {
            type: Number,
            default: 1,
        },
        className: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            position: "",
            active: false,
            isSticky: false,
            width: undefined,
            height: undefined,
        };
    },
    mounted() {
        this.height = this.$el.getBoundingClientRect().height;
        window.addEventListener("scroll", this.handleScroll);
        window.addEventListener("resize", this.handleResize);
    },
    // 組件激活時(shí)調(diào)用
    activated() {
        this.handleScroll();
    },
    destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
        window.removeEventListener("resize", this.handleResize);
    },
    methods: {
        sticky() {
            if (this.active) {
                return;
            }
            this.active = true;
            this.isSticky = true;
            this.position = "fixed";
            this.width = this.width + "px";
        },
        handleReset() {
            if (!this.active) {
                return;
            }
            this.reset();
        },
        reset() {
            this.position = "";
            this.width = "auto";
            this.active = false;
            this.isSticky = false;
        },
        handleScroll() {
            // 粘性定位區(qū)域的寬度
            const width = this.$el.getBoundingClientRect().width;
            this.width = width || "auto";
            // 粘性定位距屏幕頂部的高度
            const offsetTop = this.$el.getBoundingClientRect().top;
            // 如果滾動(dòng)高度小于設(shè)定的定位高度
            if (offsetTop < this.stickyTop) {
                this.sticky();
                return;
            };
            this.handleReset();
        },
        handleResize() {
            if (this.isSticky) {
                this.width = this.$el.getBoundingClientRect().width + "px";
            }
        },
    },
};
</script>

3. 組件使用

<template>
    <div >
        <div ></div>
        <Sticky>
            <div >
                這是定位區(qū)域
            </div>
        </Sticky>
    </div>
</template>
<script>
import Sticky from "@/components/Sticky";
export default {
    components:{
        Sticky:Sticky
    }
};
</script>

到此，相信大家對(duì)“Vue組件設(shè)計(jì)Sticky布局效果怎么實(shí)現(xiàn)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！