快捷導(dǎo)航

vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換

更新時(shí)間：2022年04月14日 15:59:31 作者：逆風(fēng)優(yōu)雅

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換的具體代碼，供大家參考，具體內(nèi)容如下

動(dòng)畫(huà)效果：

代碼如下：

<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">產(chǎn)品</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">控制臺(tái)</span>
? ? ? </div>
? ? </div>
? </div>
</template>
?
<script>
export default {
? name: "homeLayoutHeader",
? data() {
? ? return {
? ? ? liList: [
? ? ? ? {
? ? ? ? ? type: "text1",
? ? ? ? ? title: "產(chǎn)品",
? ? ? ? ? img: "down",
? ? ? ? ? show: true,
? ? ? ? },
? ? ? ? {
? ? ? ? ? type: "text2",
?
? ? ? ? ? title: "解決方案",
? ? ? ? ? img: "down",
? ? ? ? ? show: true,
? ? ? ? },
? ? ? ? {
? ? ? ? ? type: "text3",
?
? ? ? ? ? title: "支持與服務(wù)",
? ? ? ? ? show: false,
? ? ? ? },
? ? ? ? {
? ? ? ? ? type: "text4",
? ? ? ? ? title: "了解我們",
? ? ? ? ? show: false,
? ? ? ? },
? ? ? ],
? ? ? dropDownActive:'',
? ? ? active: 0,
? ? };
? },
? methods: {
? ? mouserOver(v, tp) {
? ? ? //鼠標(biāo)移動(dòng)上去的事件
? ? ? this.dropDownActive = tp
? ? ? this.active
? ? ? this.active = v;
? ? ? this.liList.map((item, index) => {
? ? ? ? if (v === index) {
? ? ? ? ? item.img = "up";
? ? ? ? } else {
? ? ? ? ? item.img = "down";
? ? ? ? }
? ? ? });
? ? },
? ? contentmouseleave(){
? ? ? // 鼠標(biāo)離開(kāi)下拉內(nèi)容區(qū)的操作
? ? ? this.dropDownActive = ''
? ? ? this.liList.map(item=>{
? ? ? ? item.img = 'down'
? ? ? })
?
? ? },
? ? productContentMouseover(value){
? ? ? // 鼠標(biāo)在產(chǎn)品下面內(nèi)容區(qū)的操作
? ? ? this.dropDownActive = value
? ? },
? ? planContentMouseover(value){
? ? ? // 鼠標(biāo)在解決方案下面內(nèi)容區(qū)的操作
? ? ? 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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: