Vue element tabs 点击锚点定位 , 鼠标滚动定位

一、效果图

二、代码

html

<el-tabsclass="customer-tab"type="card"@tab-click="jump"v-model="tabName"><el-tab-panev-for="(tab, index) in tabs":name="tab.refName":key="index":label="tab.name"></el-tab-pane></el-tabs><divclass="scroll-content"@scroll="onScroll":style="'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height"><!-- 用户管理 --><div :ref="tabs[0].refName" class="scroll-item"><div class="line-name"><h2>{{ tabs[0].name }}</h2></div><div><pstyle="height: 40px"v-for="item in [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,]":key="item">待发货符合规范化如故</p></div></div><!-- 配置管理 --><div :ref="tabs[1].refName" class="scroll-item"><div class="line-name"><h2>{{ tabs[1].name }}</h2></div><div><pstyle="height: 40px"v-for="item in [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,]":key="item">新能说出的基本功发到你DNF不得发布</p></div></div><!-- 角色管理 --><div:ref="tabs[2].refName"class="scroll-item"style="padding-top: 1rem; top: 5px"><div class="line-name"><h2>{{ tabs[2].name }}</h2></div><div><pv-for="item in [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,]":key="item">新水泥厂剧场版</p></div></div><!-- 角色管理2 --><div:ref="tabs[3].refName"class="scroll-item"style="padding-top: 1rem; top: 5px"><div class="line-name"><h2>{{ tabs[3].name }}</h2></div><div><pv-for="item in [0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,]":key="item">新水泥厂剧场版</p></div></div></div>

<script>
export default {name: 'index',props: {},components: {},data() {return {tabIndex: '0',contentStyleObj: {height: '100px',},tabName: 'setOneRef',tabs: [{name: '用户管理',refName: 'setOneRef',},{name: '配置管理',refName: 'setTwoRef',},{name: '角色管理',refName: 'setThreeRef',},{name: '角色管理2',refName: 'setFourRef',},],}},computed: {},watch: {},created() {this.getHight()window.addEventListener('resize', this.getHight)},destroyed() {window.removeEventListener('resize', this.getHight)},methods: {// tab clickjump(tab, event) {let target = document.querySelector('.scroll-content')let scrollItems = document.querySelectorAll('.scroll-item')// 判断滚动条是否滚动到底部if (target.scrollHeight <= target.scrollTop + target.clientHeight) {this.tabIndex = tab.index.toString()}let totalY = scrollItems[tab.index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)let distance = document.querySelector('.scroll-content').scrollTop // 滚动条距离滚动区域顶部的距离// let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)// 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次// 计算每一小段的距离let step = totalY / 50if (totalY > distance) {smoothDown(document.querySelector('.scroll-content'))} else {let newTotal = distance - totalYstep = newTotal / 50smoothUp(document.querySelector('.scroll-content'))}// 参数element为滚动区域function smoothDown(element) {if (distance < totalY) {distance += stepelement.scrollTop = distancesetTimeout(smoothDown.bind(this, element), 10)} else {element.scrollTop = totalY}}// 参数element为滚动区域function smoothUp(element) {if (distance > totalY) {distance -= stepelement.scrollTop = distancesetTimeout(smoothUp.bind(this, element), 10)} else {element.scrollTop = totalY}}},// 滚动条滚动onScroll(e) {let scrollItems = document.querySelectorAll('.scroll-item')for (let i = scrollItems.length - 1; i >= 0; i--) {// 判断滚动条滚动距离是否大于当前滚动项可滚动距离let judge =e.target.scrollTop >=scrollItems[i].offsetTop - scrollItems[0].offsetTop - 400if (judge) {this.tabIndex = i.toString()// 找对应的tab-name值this.tabName = this.tabs[this.tabIndex].refNamebreak}}},getHight() {this.contentStyleObj.height = window.innerHeight - 190 + 'px'},},
}
</script>

css

<style lang="scss" scoped>
::v-deep.customer-tab {width: 100%;height: 50px;background-color:#f5f7fa;padding: 4px;
}
::v-deep.el-tabs--card > .el-tabs__header {border-bottom: none;margin: 0;.el-tabs__nav {width: 100%;display: flex;justify-content: space-around;border: none;.el-tabs__item {width: 25%;text-align: center;border: none;}.is-active {border-radius: 4px;background-color: #005BD9;color: #fff;}}
}
</style>

Vue element tabs 点击锚点定位 , 鼠标滚动定位相关推荐

vue+element 实现点击左侧树形控件实现右侧滚动定位
树形控件实现定位+平滑滚动(左树形右内容) vue+element 实现点击左侧树形控件实现右侧滚动定位具体实现代码如下: <template><div class="d ...
【前端三分钟】锚点自动跟随滚动定位
最近看到写 "锚点自动跟随滚动定位"的方法,大都是基于JQ,或者是第三方. 所以,进行给出使用原生JS的写法. 什么都不说了,直接上代码(使用模块模式方式): <!DOCTY ...
Vue+element实现点击复制功能
功能点击按钮或指定位置后将数据复制到剪贴版,避免手动复制核心方法是 document.execCommand("Copy"); 但是这个是需要文字被选中时才可以复制成功所以第 ...
vue+element实现Select 选择器的远程搜索、滚动加载
1.html结构: <el-selectv-model.trim="query.enEnterpriseBaseId"v-loadmore="loadMore&qu ...
vue element 的 el-cascade 组件如何实现多选点击确认提交操作
1. 实现效果做这个也是自己踩了好多坑,比如: 用第三方的 el-cascader-multi 多选组件,不能实现自己想要的效果,element 最新版 2.12.0 就已经有完善,不需要使用那个第 ...
基于Vue+Element Plus实现快速导航
文章目录前言一.分析二.实现三.实现效果图总结前言快速导航对于前端开发的靓仔们应该是很熟悉了,他能快速的切换到之前打开的页面,是系统更加灵活方便.我这里采用的是Vue+Element p ...
vue 循环tabs 标签页组件_Vue render函数实战--实现tabs选项卡组件
用过Element ui库的童鞋肯定知道组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用组件的时候有没有想过它是如何实现的?我咋刚开始使用组件的时候就有去想过,也想去实现一个超级简单的 ...
使用vue+element开发一个谷歌插件
简单功能:点击浏览器右上角插件icon弹出小弹窗,点击设置弹出设置页,并替换背景颜色. 这里使用vue+element并不是说写插件引用各种库才好,而是为了演示而使用. 开始 1.本地创建文件夹tes ...
Vue+Element实现网页版个人简历系统
这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue.element.css3.css定位. 作者在window10进行开发,目前只在chrome上进行过测试,没有大 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...

Vue element tabs 点击锚点定位 , 鼠标滚动定位

一、效果图

二、代码

Vue element tabs 点击锚点定位 , 鼠标滚动定位相关推荐

最新文章

热门文章