vue3 组件篇 Affix

文章目录

组件介绍
组件库安装与使用
组件代码
参数说明
事件
关于dxui组件库

组件介绍

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>

参数说明

名称	说明
disabled	boolean类型，默认为false，当为true时，affix组件默认不生效，看起来和一般的dom一样。开发者可能会在某些特殊的情况下禁用或者启用affix组件
top	number类型距离窗口顶部达到指定偏移量后触发比如传入100，就是当组件距离视窗顶部为100px时开始固定
bottom	number类型距离窗口底部达到指定偏移量后触发比如传入100，就是当组件距离视窗底部为100px时开始固定
zIndex	number类型默认值为1 设置fixed后，组件zindex的值，实际开发中，页面比较复杂，说不定affix 在fixed后还被某些内容覆盖，zindex将帮助开发更加灵活地处理

事件

名称	说明
@affixChange	当affix组件的fixed状态发生改变时，触发的回调函数，返回当前的fixed状态布尔值

关于dxui组件库

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

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

vue3 组件篇 Affix相关推荐

vue3组件篇 Slider
文章目录组件介绍组件安装与使用组件代码参数说明事件关于dxui组件库组件介绍 slider组件已成为前端开发中广泛使用的UI组件之一.Slider组件可以让用户在一个可选范围内选择一个值 ...
vue3组件篇 Select
文章目录组件介绍何时使用基本功能组件安装与使用组件代码参数说明事件关于dxui组件库组件介绍何时使用弹出一个下拉菜单给用户选择操作,用于代替原生的选择器,或者需要一个更优雅的多选 ...
vue3 组件篇 tag
文章目录组件介绍标准用法自定义背景色和字体颜色点击和关闭的回调组件代码参数说明关于dxui组件库组件介绍 tag组件,是前端开发常用组件之一,无论是移动端,还是pc端,我们都能经常看到 ...
VUE3组件库-input组件
theme: mk-cute 这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战 VUE3组件库-input组件大家好,今天一起来学习vue3实现input组件,希望对你有帮助目录预览基 ...
手把手教你写一个Vue3组件库但是乞丐版
好久没写文章了,最近在研究一些组件库的实现方法,分享一下.在这我这篇文章之前其实已经有一篇文章讲了Vue如何打包组件库了(最底部),但是这篇文章一是没有源码二是Vue3和Vue2的组件库写法有点不一样 ...
使用 Vite 和 TypeScript 从零打造一个属于自己的 Vue3 组件库
前言随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被打造出来的吗? 读完这篇 ...
Xamarin Android组件篇教程RecylerView动画组件RecylerViewAnimators（1）
Xamarin Android组件篇教程RecylerView动画组件RecylerViewAnimators(1) RecyclerView是比ListView和GridView更为强大的布局视图, ...
九十一、Python的GUI系列 | QT组件篇
@Author:Runsen @Date:2020/7/13 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
VMware View 5.0从菜鸟到高手系列 3 -安装View Composer组件篇
在vCenter Server上安装View Composer组件 View Composer具有非常强大的功能,可以为企业快速部署成千上万的虚拟桌面并为企业节省近70%的存储空间. 1. 安装Vie ...