vue点击tab页面滑到相应位置,vue实现tab切换保留滚动位置
这篇文章主要为大家详细介绍了某视频剪辑软件实现鼠标滑动展示标签栏切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现鼠标滑动展示标签栏切换的具体代码，供大家参考，具体内容如下
动画效果：
代码如下：
模板
div id=header
div class=conten_width
div class= contnet _ width _ content
div style= transform:translate x(-242 px)；
img src= ./././assets/img/logo.png alt= /
/div
ul class=header_ul
里
莉莉斯特中的v-for=(v，I
:key=i
:class={ chosed: active===i }
@mouseover=mouserOver(i，v.type)
{ { v . title } } a-icon v-if= v . show :type= v . img /
/李
/ul
div v-if=下拉active=== text 1 下拉active=== text 2 class=下拉内容 @ mouse leave= content mouse leave
div v-if= active===0 @ mousemove= productContentMouseover( text 1 ) class= porproductcontentstyle 产品/div
div v-if= active===1 @ mousemove= planContentMouseover( text 2 ) class= planContentStyle 解决方案/div
/div
输入搜索
占位符=输入搜索文本
class=header_input
@search=onSearch
/
span class=header_right1 文档/span
span class=header_right2 控制台/span
/div
/div
/div
/模板
脚本
导出默认值{
姓名： homeLayoutHeader ，
data() {
返回{
莉莉丝：[
{
类型："文本1",
标题： 产品，
img:"向下",
秀：真的，
},
{
类型："文本2",
标题： 解决方案，
img:"向下",
秀：真的，
},
{
类型："文本3",
标题： 支持与服务，
秀：假的，
},
{
类型："文本4",
标题： 了解我们，
秀：假的，
},
],
dropDownActive:" "，
活动：0,
};
},
方法：{
鼠标漫游器(v，tp) {
//鼠标移动上去的事件
this.dropDownActive=tp
this.active
这个。active=v；
this.liList.map((item，index)={
if (v===index) {
item.img= up
}否则{
item.img= down
}
});
},
contentmouseleave(){
//鼠标离开下拉内容区的操作
this.dropDownActive=
this.liList.map(item={
item.img=down
})
},
productContentMouseover(value){
//鼠标在产品下面内容区的操作
this.dropDownActive=value
},
planContentMouseover(值){
//鼠标在解决方案下面内容区的操作
this.dropDownActive=value
},
onSearch() {
控制台。日志(12)；
},
},
};
/脚本
样式范围
* {
边距：0;
填充：0;
}。内容宽度{
身高：62px
宽度：1200像素
边距：0自动；
框大小：边框-框；
}。内容宽度内容
身高：62px
宽度：1200像素
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
}。header_ul {
显示器：flex
宽度：340像素
高度：14px
justify-content:space-between；
transform:平移x(-169 px)；
}。header_ul li {
填充-底部：36px
光标：指针；
}。header_input {
宽度：200像素
transform:平移x(170 px)；
}。header_right1 {
transform:平移x(210 px)；
}。header_right2{
transform:平移x(240 px)；
}。已选择{
边框-底部：2px纯红；
}。dropDownContent {
/*边距：0自动；*/
位置：绝对；
z指数：6;
top:63px；
}。porductContentStyle{
宽度：1000像素
高度：300像素
背景：红色；
}。planContentStyle{
宽度：800像素
高度：300像素
背景：绿色；
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。