vue实现鼠标滑动展示tab栏切换
作者:逆风优雅 发布时间:2023-07-02 16:38:05
标签:vue,滑动,切换
本文实例为大家分享了vue实现鼠标滑动展示tab栏切换的具体代码,供大家参考,具体内容如下
动画效果:
代码如下:
<template>
<div id="header">
<div class="conten_width">
<div class="contnet_width_content">
<div style=" transform: translateX(-242px);" >
<img src="./../../assets/img/logo.png" alt="" />
</div>
<ul class="header_ul">
<li
v-for="(v, i) in liList"
:key="i"
:class="{ chosed: active === i }"
@mouseover="mouserOver(i, v.type)"
>
{{ v.title }} <a-icon v-if="v.show" :type="v.img" />
</li>
</ul>
<div v-if="dropDownActive==='text1'|| dropDownActive ==='text2'" class="dropDownContent" @mouseleave="contentmouseleave">
<div v-if="active===0" @mousemove="productContentMouseover('text1')" class="porductContentStyle">产品</div>
<div v-if="active===1" @mousemove="planContentMouseover('text2')" class="planContentStyle">解决方案</div>
</div>
<a-input-search
placeholder="input search text"
class="header_input"
@search="onSearch"
/>
<span class="header_right1">文档</span>
<span class="header_right2">控制台</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "homeLayoutHeader",
data() {
return {
liList: [
{
type: "text1",
title: "产品",
img: "down",
show: true,
},
{
type: "text2",
title: "解决方案",
img: "down",
show: true,
},
{
type: "text3",
title: "支持与服务",
show: false,
},
{
type: "text4",
title: "了解我们",
show: false,
},
],
dropDownActive:'',
active: 0,
};
},
methods: {
mouserOver(v, tp) {
//鼠标移动上去的事件
this.dropDownActive = tp
this.active
this.active = v;
this.liList.map((item, index) => {
if (v === index) {
item.img = "up";
} else {
item.img = "down";
}
});
},
contentmouseleave(){
// 鼠标离开下拉内容区的操作
this.dropDownActive = ''
this.liList.map(item=>{
item.img = 'down'
})
},
productContentMouseover(value){
// 鼠标在产品下面内容区的操作
this.dropDownActive = value
},
planContentMouseover(value){
// 鼠标在解决方案下面内容区的操作
this.dropDownActive = value
},
onSearch() {
console.log(12);
},
},
};
</script>
<style scoped>
* {
margin: 0;
padding: 0;
}
.conten_width {
height: 62px;
width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
.contnet_width_content {
height: 62px;
width: 1200px;
display: flex;
justify-content: center;
align-items: center;
}
.header_ul {
display: flex;
width: 340px;
height: 14px;
justify-content: space-between;
transform: translateX(-169px);
}
.header_ul li {
padding-bottom: 36px;
cursor: pointer;
}
.header_input {
width: 200px;
transform: translateX(170px);
}
.header_right1 {
transform: translateX(210px);
}
.header_right2{
transform: translateX(240px);
}
.chosed {
border-bottom: 2px solid red;
}
.dropDownContent {
/* margin: 0 auto; */
position: absolute;
z-index: 6;
top: 63px;
}
.porductContentStyle{
width: 1000px;
height: 300px;
background: red;
}
.planContentStyle{
width: 800px;
height: 300px;
background: green;
}
</style>
来源:https://blog.csdn.net/qq_44603011/article/details/122473096
0
投稿
猜你喜欢
- 问题一:TypeError: a bytes-like object is required, not 'str'解决:该问
- 单例模式是一种常见的设计模式,该模式的主要目的是确保某一个类只有一个实例存在。当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派
- 学习Python网络通信的时候发现书上只有一个服务端对应一个客户端的情形,于是自己想自己动手实现一个服务端响应多个客户端。首先建立服务器的s
- 项目开发中文件的读写是必不可少的下面来简单介绍一下文件的读读文件,首先我们要有文件那我首先自己创建了一个文本文件password.txt内容
- 本文实例讲述了Python实现计算文件MD5和SHA1的方法。分享给大家供大家参考,具体如下:不多说,直接源码:#file md5impor
- 从一个问题开始最近银行这个事情闹的比较厉害啊,很多储户的钱放在银行,就不翼而飞了,而银行还不管不问,说是用户的责任,打官司,用户还能输了,这
- 这篇文章主要介绍了Python使用configparser库读取配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考
- 如何避免磁盘临时表因为内存储引擎不支持TEXT和BLOB数据类型, 使用到BLOB和TEXT列的查询和使用隐式临时表的查询将不得不使用MyI
- python实现的对文件夹中的图像进行连续的重命名方法:import osclass BatchRename(): def __init__
- asp正则表达式检测字符串是否是数字及字母。<% '函数:CheckString(strng) '
- pytorch在Horovod上训练步骤分为以下几步:import torchimport horovod.torch as hvd# In
- 安装pip install faker使用简单使用本库可生成姓名、地址、电话、邮箱、公司等等一系列数据。首先导入库,实例化:from fak
- 在开发数据库应用中,经常会遇到处理时间的问题,如查询指定时间的记录等。下面就这些常见的问题,结合自己的一些经验,和大家探讨一下这类问题。首先
- 看代码吧~package mainimport ( "fmt")type XCDataStu struct { Id &
- 1、二进制数、八进制数、十六进制数转十进制数 有一个公式:二进制数、八进制数、十六进制数的各位数字分别乖以各自的基数的(N-1)次方,其和相
- 虽然 prometheus 已有大量可直接使用的 exporter 可供使用,以满足收集不同的监控指标的需要。例如,node exporte
- transforms按住Ctrl查看transforms的源码可以知道,transforms就是一个python文件,里面定义了很多类,每一
- 一、yield迭代器在python深度学习模型读取数据时,经常遇到yield,互联网搜索后,将比较容易理解的说明记录一下。二、使用步骤1.引
- 这篇论坛文章(赛迪网技术社区)主要介绍了一些特别有用但文档中没有介绍的sql server DBCC命令,详细内容请参考下文:以下是一些sq
- 根据本人的学习经验,我总结了以下十点和大家分享: 1)学好python的第一步,就是马上到www.python.org网站上下载一个pyth