vue实现鼠标滑动展示tab栏切换

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue中选项卡点击切换且能滑动切换功能的实现代码

    具体代码如下所述: <div> <div class="navlist"> <ul> <li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabClick(index)"><i>{{item.name}}<

  • vue使用swiper实现左右滑动切换图片

    本文实例为大家分享了vue使用swiper实现左右滑动切换图片的具体代码,供大家参考,具体内容如下 使用npm 安装vue-awesome-swiper npm install vue-awesome-swiper --save 在main.js中引用 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.user(VueAwesomeSwiper) import 'swiper/dist/css/swiper.css' 在组件中使用 <te

  • Vue.js组件tabs实现选项卡切换效果

    今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

  • 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)

    在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些. 先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件. 效果预览 关键代码及分析如下: <template> // 每一个 tab 绑定了一个点击事件,传入的参数对应着

  • 移动端滑动切换组件封装 vue-swiper-router实例详解

    具体代码如下所述: <strong>组件部分</strong> <template> <div class="main"> <div class="page-tab"> <div :class="nowPath == item.path ? 'tab-item tab-item_active' : 'tab-item'" v-for='(item, index) in tabLis

  • 详解使用vue实现tab 切换操作

    在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').find('.item') .removeClass('current').eq(index).addClass('current'); // 为index位置的title添加current $('.tab .content').find('.item') .hide().eq(index).show()

  • vue实现页面切换滑动效果

    本文实例为大家分享了vue实现页面切换滑动的具体代码,供大家参考,具体内容如下 试着用Vue做了个页面切换时滑动的效果,如下示例,源码 这里使用了Vue的transition组件,具体可见文档 直接看实现过程 先在本机安装vue-cli npm install -g @vue/cli 初始化一个项目 vue create hello-world 创建完毕后安装vue-router和vuex,现在vue-cli3支持图形化界面,可以直接在项目目录用ui启动,在管理页面点击安装 vue ui 然后建

  • 基于Vue实现页面切换左右滑动效果

    基于Vue的页面切换左右滑动效果,具体内容如下 HTML文本页面: <template> <div id="app> <transition :name="direction" mode="out-in"> <!--动态获得transition 的name值--> <router-view class="app-view" wechat-title></router-vi

  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • vue实现滑动切换效果(仅在手机模式下可用)

    本文实例为大家分享了vue实现滑动时红黄色块左右滑动相应距离,效果如下图 实现过程主要在于实时跟踪手指滑动位置与原位置之间的偏移量,再相应移动红黄块. 红黄块布局如下 back中包含back-l,back-r左右两块,正常情况下为了隐藏其中一块,子模块需要设置display: inline-block,并且宽度都需要设置width: 100%.父模块中设置white-space: nowrap用于处理两个子模块之间的空白. <template lang="html"> &l

随机推荐