element加固态(Element Plus实现Affix 固钉)
类别:编程学习 浏览量:176
时间:2021-10-03 01:26:28 element加固态
Element Plus实现Affix 固钉目录
- 一、组件介绍
- 二、源码分析
- 2.1 template
- 2.2 script
- 2.3 实现总结:
Affix组件用于将页面元素固定在特定可视区域。
1.1 属性
- position:指定固钉的位置,可设置为top或bottom,默认为top
- offset: 设置偏移距离,默认为0
- target:指定容器(CSS 选择器),让固钉始终保持在容器内,超过范围则隐藏,默认的容器是document.documentElement。
- z-index: 固钉的层级,默认100
1.2 事件
- scroll: 容器滚动时触发事件,参数是:固钉的scrollTop值和状态(是否fixed)
- change: 固钉状态改变时触发,参数是固钉当前是否处于fixed状态
2.1 template
<template> <li ref="root" class="el-affix" :style="rootStyle"> <li :class="{'el-affix--fixed': state.fixed}" :style="affixStyle"> <slot></slot> </li> </li> </template>
template部分很简单,通过slot接收内容
2.2 script
// 部分核心代码,代码顺序有所调整 setup(props, { emit }) { // target容器 ref const target = ref(null) // 固钉ref,与template中的ref属性配合,得到HTML元素 const root = ref(null) // 滚动容器ref const scrollContainer = ref(null) // 固钉状态 const state = reactive({ fixed: false, height: 0, // height of root width: 0, // width of root scrollTop: 0, // scrollTop of documentElement clientHeight: 0, // clientHeight of documentElement transform: 0, }) onMounted(() => { // 根据传入的target确定 target容器 if (props.target) { target.value = document.querySelector(props.target) if (!target.value) { throw new Error(`target is not existed: ${props.target}`) } } else { target.value = document.documentElement } // 根据固钉元素,向上寻找滚动容器 scrollContainer.value = getScrollContainer(root.value) // 监听滚动容器的scroll事件 on(scrollContainer.value, 'scroll', onScroll) // 监听固钉元素的resize事件 addResizeListener(root.value, updateState) }) // 滚动容器的scroll事件的响应函数 const onScroll = () => { // 更新固钉状态 updateState() emit('scroll', { scrollTop: state.scrollTop, fixed: state.fixed, }) } // 更新固钉状态函数 const updateState = () => { const rootRect = root.value.getBoundingClientRect() const targetRect = target.value.getBoundingClientRect() state.height = rootRect.height state.width = rootRect.width state.scrollTop = scrollContainer.value === window ? document.documentElement.scrollTop : scrollContainer.value.scrollTop state.clientHeight = document.documentElement.clientHeight if (props.position === 'top') { if (props.target) { const difference = targetRect.bottom - props.offset - state.height // targetRect.bottom > 0 对应的是让固钉始终保持在容器内,超过范围则隐藏 state.fixed = props.offset > rootRect.top && targetRect.bottom > 0 // 用于处理场景:滚动过程中,target容器可视区域不足以显示整个固钉,则固钉应相应偏移,只展示部分 state.transform = difference < 0 ? difference : 0 } else { state.fixed = props.offset > rootRect.top } } else { if (props.target) { const difference = state.clientHeight - targetRect.top - props.offset - state.height state.fixed = state.clientHeight - props.offset < rootRect.bottom && state.clientHeight > targetRect.top state.transform = difference < 0 ? -difference : 0 } else { state.fixed = state.clientHeight - props.offset < rootRect.bottom } } } // 监测固钉fixed状态变化,并对外emit change事件 watch(() => state.fixed, () => { emit('change', state.fixed) }) // 计算属性,通过固钉的状态自动更新固钉的样式 const affixStyle = computed(() => { if (!state.fixed) { return } const offset = props.offset ? `${props.offset}px` : 0 const transform = state.transform ? `translateY(${state.transform}px)` : '' return { height: `${state.height}px`, width: `${state.width}px`, top: props.position === 'top' ? offset : '', bottom: props.position === 'bottom' ? offset : '', transform: transform, zIndex: props.zIndex, } }) }
2.3 实现总结:
- 通过监听滚动容器的scroll事件(及固钉自身的resize事件);
- 事件响应函数中动态获取固钉及target容器的DOM属性并以此计算固钉的状态;
- 利用计算属性自动更新固钉的样式;
到此这篇关于Element Plus实现Affix 固钉的文章就介绍到这了,更多相关Element Affix 固钉内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue可以用vite打包吗(vite+vue3+element-plus项目搭建的方法步骤)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- vue 表格数据增加修改(vue element实现表格增加删除修改数据)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- php和xml有什么关系(PHP创建XML的方法示例基于DOMDocument类及SimpleXMLElement类)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- elementui的el-popover修改样式不生效的解决(elementui的el-popover修改样式不生效的解决)
- vue加element ui开发项目(Vue+ElementUI之Tree的使用方法)
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- element加固态(Element Plus实现Affix 固钉)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- element中表单验证规则(element多个表单校验的实现)
- elementui下拉框联动(Element树形控件整合带图标的下拉菜单tree+dropdown+input)
- 0 1 岁婴儿最强作息指南,照着做养出天使宝宝(01岁婴儿最强作息指南)
- 沪上这16所高校 萌新 礼包开箱 哪一款让你心动(沪上这16所高校萌新)
- 她救了被绑架的他,而这一切竟是一场阴谋...(她救了被绑架的他)
- 冬季养殖这6种阴生植物,方便又好养,你家有么(冬季养殖这6种阴生植物)
- 阴生植物为什么不怕照不到阳光(阴生植物为什么不怕照不到阳光)
- 阴生环境 耐阴地被植物,你知道哪些(阴生环境耐阴地被植物)
热门推荐
- tomcat怎么知道访问servlet(详解从源码分析tomcat如何调用Servlet的初始化)
- cdn上传加速(云服务器搭建网站需要用CDN加速吗?)
- 获取数据库中所有的索引信息
- python一分钟认识条件判断(对python判断ip是否可达的实例详解)
- 用php调用函数的换行(php中关于换行的实例写法)
- laravel判断变量为空(关于laravel 数据库迁移中integer类型是无法指定长度的问题)
- pythonftp功能介绍(使用Python操作FTP实现上传和下载的方法)
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- mysql中怎么删除整张表(MySQL如何优雅的删除大表实例详解)
- SqlServer索引的原理与应用详解(SqlServer索引的原理与应用详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9