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 固钉内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- element加固态(Element Plus实现Affix 固钉)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- vue 表格数据增加修改(vue element实现表格增加删除修改数据)
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- elementui下拉框联动(Element树形控件整合带图标的下拉菜单tree+dropdown+input)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- php和xml有什么关系(PHP创建XML的方法示例基于DOMDocument类及SimpleXMLElement类)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- vue代码和element用法(Vue Element前端应用开发之整合ABP框架的前端登录)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- element-ui如何关闭表单验证(ElementUI实现el-form表单重置功能按钮)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- elementui自定义坐标(element-ui 上传图片后标注坐标点)
- 必看 8月,相比七夕,更需要注意的是这些事(必看8月相比七夕)
- 8月23日11时16分将迎处暑,逐渐进入气象意义上的秋天(8月23日11时16分将迎处暑)
- 花不语 下 如果重来一次的话,你还会这么选择吗(花不语下如果重来一次的话)
- 城市记忆之上海 最难忘的是老弄堂里的市井味道(城市记忆之上海)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
热门推荐
- css旋转立体效果图(css制作三分圆形效果)
- sqlcount函数转化为数值型(SQL判断是否"存在",还在用 count 操作?很耗时的!)
- sqlserverdate格式比较(sqlserver之datepart和datediff应用查找当天上午和下午的数据)
- SQL Server Management Studio(SSMS)复制数据库的方法(SQL Server Management StudioSSMS复制数据库的方法)
- C# Windows服务的创建、安装、调试
- 知乎上的35条神回复(75条笑死人的知乎神回复,用60行代码就爬完了)
- es6新增语法以及用法(ES6 解构赋值的原理及运用)
- mysql编码设置
- html5页面布局框架(html5移动端自适应布局的实现)
- python用指针合并两个有序数组(Python3实现计算两个数组的交集算法示例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9