vue3 组件篇 Affix

组件介绍

Affix是一种常用于前端界面设计的组件，它可以让网页元素固定在页面中的某个位置，随着用户的滚动而保持不变。

通常用于固定导航栏、侧边栏等。通过设置相应的CSS样式和JavaScript代码，我们可以轻松地实现Affix组件的效果。

Affix可以增强网页的用户体验，让用户在页面滚动时能够方便地访问重要的导航链接或信息，提高页面的可用性。

组件库安装与使用

需要先安装vue3-dxui

yarn add vue3-dxui

或者

npm install vue3-dxui

全局main.ts中引入css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vue3-dxui/dxui/dxui.css'createApp(App).use(store).use(router).mount('#app')

按需引入

<script>
import { Affix } from 'vue3-dxui'export default {components: {Affix}
}
</script>

组件代码

<template><divv-show="fixed":style="{position: 'fixed',top: affix.top,'z-index': affix.zIndex,bottom: affix.bottom}"><slot /></div><div :style="{ opacity: fixed ? 0 : 1 }" ref="affixTarget"><slot /></div>
</template><script lang="ts">
import { reactive, ref, onMounted, onBeforeUnmount, watch, SetupContext } from 'vue'
// import { useRouter } from 'vue-router'import { Data } from './types/index'export default {name: 'Affix',emits: ['affixChange'],props: {// 是否禁用，禁用就不会产生固定效果，和正常的元素一样显示disabled: {require: false,default: false,type: Boolean},top: {require: false,default: undefined,type: Number},bottom: {require: false,default: undefined,type: Number},zIndex: {require: false,default: 1,type: Number}},setup(props: Data, context: SetupContext) {const affix = reactive({top: props.top + 'px',bottom: props.bottom + 'px',zIndex: props.zIndex})const affixTarget = ref<any>()const fixed = ref(false)const handleScroll = () => {if (props.disabled) {return}const { top, bottom } = affixTarget?.value?.getBoundingClientRect()if (props.top !== undefined && top < props.top) {fixed.value = trueaffix.bottom = 'auto'affix.top = props.top + 'px'} else if (props.bottom !== undefined && window.innerHeight - bottom < props.bottom) {fixed.value = trueaffix.bottom = props.bottom + 'px'affix.top = 'auto'} else {fixed.value = false}}onMounted(() => {window.addEventListener('scroll', handleScroll)window.addEventListener('resize', handleScroll)handleScroll()})onBeforeUnmount(() => {window.removeEventListener('scroll', handleScroll)window.removeEventListener('resize', handleScroll)})watch(fixed, (value) => {context.emit('affixChange', value)})return {affix,fixed,affixTarget}}
}
</script><style lang="scss">
@import '@/scss/layout.scss';
</style>

参数说明

事件

关于dxui组件库

dxui组件库是我个人搭建的vue3 前端交互组件库，倾向于pc网站的交互模式。

1. 如果你有任何问题，请在博客下方评论留言，我尽可能24小时内回复。
2. 组件日后地更新将会在dxui官网同步进行。
3. dxui新上线的官网域名变更 http://dxui.cn
4. npm 官方链接 https://www.npmjs.com/package/vue3-dxui
5. 如果你想看完整源码 https://github.com/757363985/dxui