Vue 菜单导航栏，轮播图

news2024/11/17 23:43:04

导航菜单栏结构和样式代码实现

一级导航栏
在这里插入图片描述

views/HomeView.vue

<template>
    <div>
        <Shortcut></Shortcut>
        <Header></Header>
        <div class="inner">
            <Navigation></Navigation>
        </div>
        
        <div>
            我是主页
        </div>
    </div>
</template>

<script setup>
import Shortcut from "@/components/common/Shortcut.vue"
import Header from "@/components/home/Header"
import Navigation from "@/components/home/Navigation"


</script>

<style lang="less" scoped>

    .inner{
        background-color: #f4f4f4;
    }
</style>

src/components/home/navigation.vue

<template>
  <div class="nav ">
    <div class="main clearfix">
      <div class="menu fl">
        <LeftMenu></LeftMenu>
      </div>
      <div class="banner fl">我是banner</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.nav {
  .main {
    padding-top: 15px;
    width: var(--content-width);
    margin: 0 auto;
   
  }
}
</style>

<script setup>
import LeftMenu from "./LeftMenu.vue";
</script>

src/components/home/leftmenu.vue

<template>
  <div class="left-menu">
    <ul>
      <li>
        <span>
          <a href="">手机</a>
          <span>/</span>
          <a href="">运营商</a>
          <span>/</span>
          <a href="">数码</a>
        </span>
      </li>
    </ul>

    <div class="second-item">我是二级菜单</div>
  </div>
</template>

<style scoped lang="less">
@red: #e2231a;
.left-menu {
  // text-align: left;
  // float: left;
  background-color: #fff;
  width: 190px;
  height: 470px;
  ul {
    padding-top: 15px;
    li {
      padding-top: 5px;
      padding-bottom: 5px;

      padding-left: 15px;
      &:hover {
        cursor: pointer;
        background-color: #d9d9d9;
      }
      a {
        font-size: 14px;
        color: #333;
        &:hover {
          cursor: pointer;
          color: @red;
        }
      }
    }
  }
}
</style>

在这里插入图片描述

导航菜单栏接口数据渲染

数据库存储格式
在这里插入图片描述
在这里插入图片描述

let leftMenuData=ref([])
onMounted(()=>{
    getMainMenu().then(res=>{
        console.log(res.data)
        init_menu_data(res.data)
    })
})

在这里插入图片描述
根据main_menu_id判断菜单名在哪一行

const init_menu_data=(menuData=>{
    for(let i in menuData){
        let jsonData = JSON.parse(menuData[i])
        leftMenuData.value.push(jsonData)       
    }
    console.log(leftMenuData)
})

在这里插入图片描述

//  接口返回数据需要进行加工，基本结构应该是[{index:1,data:[{name,url},{},{}]}]
	const showMainData=computed(()=>{
		let resultList = [];
		let result = {"index":"","data":[]};
		for(let i in leftMenuData.value){
			let id = leftMenuData.value[i].main_menu_id;
			let data = {"name":leftMenuData.value[i].main_menu_name};
			if(result["index"] != null && id == result["index"]){
				result["data"].push(data);
			}else{
				result = {"index":"","data":[]};
				result["index"] = id;
				result["data"].push(data);
				resultList.push(result);
			}
		}
		return resultList;
	})

在这里插入图片描述

完整代码

<template>
  <div class="left-menu">
    <ul>
      <li v-for="(item,index) in showMainData" :key="index">
        <span v-for="(d,i) in item.data" :key="i">
          <a href="">{{d.name}}</a>
          <!-- 删除多余的斜线 -->
          <span v-if="item.data.length-i-1">/</span>
        </span>
      </li>
    </ul>

    <div class="second-item">我是二级菜单</div>
  </div>
  {{showMainData}}
</template>

<style scoped lang="less">
@red: #e2231a;
.left-menu {
  // text-align: left;
  // float: left;
  background-color: #fff;
  width: 190px;
  height: 470px;
  ul {
    padding-top: 15px;
    li {
      padding-top: 5px;
      padding-bottom: 5px;

      padding-left: 15px;
      &:hover {
        cursor: pointer;
        background-color: #d9d9d9;
      }
      a {
        font-size: 14px;
        color: #333;
        &:hover {
          cursor: pointer;
          color: @red;
        }
      }
    }
  }
}
</style>

<script setup>
import {getMainMenu} from "@/network/home.js"
import {onMounted, ref,computed} from "vue"

let leftMenuData=ref([])
onMounted(()=>{
    getMainMenu().then(res=>{
        init_menu_data(res.data)
    })
})

const init_menu_data=(menuData=>{
    for(let i in menuData){
        let jsonData = JSON.parse(menuData[i])
        leftMenuData.value.push(jsonData)       
    }
})

//  接口返回数据需要进行加工，基本结构应该是[{index:1,data:[{name,url},{},{}]}]
	const showMainData=computed(()=>{
		let resultList = [];
		let result = {"index":"","data":[]};
		for(let i in leftMenuData.value){
			let id = leftMenuData.value[i].main_menu_id;
			let data = {"name":leftMenuData.value[i].main_menu_name};
			if(result["index"] != null && id == result["index"]){
				result["data"].push(data);
			}else{
				result = {"index":"","data":[]};
				result["index"] = id;
				result["data"].push(data);
				resultList.push(result);
			}
		}
		return resultList;
	})
</script>

在这里插入图片描述

二级菜单栏的显示与隐藏

需要把二级菜单调到右边覆盖banner
home/leftMenu.vue
在这里插入图片描述
在这里插入图片描述

home/SecondMenu.vue
接收一级菜单传递过来的id

<template>
    <div>我是二级菜单xxxxxxxxxxxxxxxxxx {{showSecondMenuIndex}}</div>
</template>


<script setup>
const showSecondMenuIndex = defineProps(["showSecondMenuIndex"])
</script>

鼠标移动会向二级菜单传递一级菜单的ID
在这里插入图片描述

二级菜单栏的代码开发骨架结构搭建

在这里插入图片描述
home/SecondMenu.vue

<template>
  <div class="second">
    <div class="menu-content">
      <div class="menu-title">
        <span>
          <a href=""> 家电馆
            <img src="@/assets/images/menu/arrows-white.png" alt="" />
          </a>
        </span>
      </div>

      <div class="menu-detail">
        <div class="menu-detail-item">
            <span>
                <span>
                    <span class="menu-detail-tit">
                        <a href="">电视
                            <img src="@/assets/images/menu/arrows-black.png" alt="" />
                        </a>
                    </span>
                    <span class="menu-detail-data">
                        <a href="">全面屏电视</a>
                    </span>
                </span>
            </span>
        </div>

      </div>
    </div>
  </div>
</template>


<script setup>
const showSecondMenuIndex = defineProps(["showSecondMenuIndex"]);
</script>

<style lang="less" scoped>
</style>

二级菜单栏的代码开发页面样式渲染

<template>
  <div class="second">
    <div class="menu-content">
      <div class="menu-title">
        <span>
          <a href="">
            家电馆
            <img src="@/assets/images/menu/arrows-white.png" alt="" />
          </a>
        </span>
      </div>

      <div class="menu-detail">
        <div class="menu-detail-item">
          <span>
            <span class="menu-detail-tit">
              <a href=""
                >电视
                <img src="@/assets/images/menu/arrows-black.png" alt="" />
              </a>
            </span>
            <span class="menu-detail-data">
              <a href="">全面屏电视</a>
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
const showSecondMenuIndex = defineProps(["showSecondMenuIndex"]);
</script>

<style lang="less" scoped>
@red: #e2231a;
.second {
  width: 1000px;
  background-color: #fff;
  border: 2px solid #e9e9e9;
  padding: 20px;
  
  .menu-content {
    margin-right: 900px;
    .menu-title {
      a {
        display: inline-block;
        background-color: black;
        color: white;
        margin-right: 10px;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        img {
          height: 18px;
        }
        &:hover {
          background-color: @red;
        }
      }
    }

    .menu-detail {
      margin-top: 15px;
      .menu-detail-item {
        .menu-detail-tit {
          a {
            font-weight: 700;
            img {
              height: 18px;
            }
            &:hover {
              color: @red;
            }
          }
        }
        .menu-detail-data {
          a {
            margin-left: 20px;
            &:hover {
              color: @red;
            }
          }
        }
      }
    }
  }
}
</style>

二级菜单栏的接口数据渲染

home/secondMenu.vue

<template>
  <div class="second">
    <div class="menu-content" v-for="(item,index) in showSubMenuData" :key="index">
      <div class="menu-title">
        <span v-for="(d,i) in item.data" :key="i">
          <a href="" v-show="d.type==='channel'">
            {{d.name}}
            <img src="@/assets/images/menu/arrows-white.png" alt="" />
          </a>
        </span>
      </div>

      <div class="menu-detail">
        <div class="menu-detail-item">
          <span v-for="(d,i) in item.data" :key="i">
            <span class="menu-detail-tit" v-if="d.type==='dt'">
              <a href=""
                >{{d.name}}
                <img src="@/assets/images/menu/arrows-black.png" alt="" />
              </a>
            </span>
            <span class="menu-detail-data" v-else-if="d.type==='dd'">
              <a href="">{{d.name}}</a>
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { getSecondMenu } from "@/network/home.js";
import { ref, watch,computed } from "vue";

const showSecondMenuIndex = defineProps(["showSecondMenuIndex"]);
watch(showSecondMenuIndex, (newVlue, oldValue) => {
  getSecondMenu(newVlue.showSecondMenuIndex).then((res) => {
    initMenuData(res.data);
  });
});

let subMenuData = ref([]);
const initMenuData = (menuData) => {
  // 每次初始化的时候  必须把subMenuData设置为空 不然数据会累加
  subMenuData.value = [];
  for (let i in menuData) {
    let jsonData = JSON.parse(menuData[i]);
    subMenuData.value.push(jsonData);
  }
};

const showSubMenuData = computed(() => {
  let resultList = [];
  let result = { index: "", data: [] };
  for (let i in subMenuData.value) {
    let id = subMenuData.value[i].sub_menu_id;
    let data = {
      name: subMenuData.value[i].sub_menu_name,
      type: subMenuData.value[i].sub_menu_type,
    };
    if (result["index"] != null && id == result["index"]) {
      result["data"].push(data);
    } else {
      result = { index: "", data: [] };
      result["index"] = id;
      result["data"].push(data);
      resultList.push(result);
    }
  }
  return resultList;
});
</script>

<style lang="less" scoped>
@red: #e2231a;
.second {
  width: 1000px;
  background-color: #fff;
  border: 2px solid #e9e9e9;
  padding: 20px;

  .menu-content {
    // margin-right: 80px;
    .menu-title {
      a {
        display: inline-block;
        background-color: black;
        color: white;
        margin-right: 10px;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        img {
          height: 18px;
        }
        &:hover {
          background-color: @red;
        }
      }
    }

    .menu-detail {
      margin-top: 15px;
      .menu-detail-item {
        .menu-detail-tit {
          a {
            font-weight: 700;
            img {
              height: 18px;
            }
            &:hover {
              color: @red;
            }
          }
        }
        .menu-detail-data {
          a {
            margin-left: 20px;
            &:hover {
              color: @red;
            }
          }
        }
      }
    }
  }
}
</style>

在这里插入图片描述
在这里插入图片描述

首页 Banner 图效果开发

home/banner

<template>
	  <div class="block" style="width: 1000px;">
	    <span class="demonstration"></span>
	    <el-carousel trigger="click" height="470px">
	      <el-carousel-item v-for="item in images" :key="item">
	        <img :src="item" alt="">
	      </el-carousel-item>
	    </el-carousel>
	  </div>
</template>

<script setup>
import banner1 from "@/assets/images/banner/banner1.png";
import banner2 from "@/assets/images/banner/banner2.png";
import banner3 from "@/assets/images/banner/banner3.png";
import banner4 from "@/assets/images/banner/banner4.png";
import banner5 from "@/assets/images/banner/banner5.png";
import banner6 from "@/assets/images/banner/banner6.png";
import { ref } from "vue";

	const images=ref([
		banner1,
		banner2,
		banner3,
		banner4,
		banner5,
		banner6
	])
	
</script>

<style scoped>
	.el-carousel__item h3 {
	    color: #475669;
	    font-size: 14px;
	    opacity: 0.75;
	    line-height: 150px;
	    margin: 0;
	  }
	
	  .el-carousel__item:nth-child(2n) {
	    background-color: #99a9bf;
	  }
	
	  .el-carousel__item:nth-child(2n + 1) {
	    background-color: #d3dce6;
	  }
</style>

home/Navigation.vue


<template>
  <div class="nav ">
    <div class="main clearfix">
      <div class="menu fl">
        <LeftMenu></LeftMenu>
      </div>
      <div class="banner fl"><Banner></Banner></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.nav {
  .main {
    padding-top: 15px;
    width: var(--content-width);
    margin: 0 auto;
   
  }
}
</style>

<script setup>
import LeftMenu from "./LeftMenu.vue";
import Banner from "./Banner.vue";
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1150585.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

多人协作使用git如何解决冲突？

多人协作使用git如何解决冲突？

什么情况会产生冲突 git merge XXX(合并分支时的冲突)&#xff1a; 当你尝试将一个分支的更改合并到另一个分支时&#xff0c;如果两个分支都修改了相同的文件的相同部分&#xff0c;Git 将无法自动解决冲突&#xff0c;因此会发生冲突。你需要手动解决这些冲突&#xff0c;然后…
阅读更多...
外汇天眼：在2023年Expo上探索金融科技的未来！

外汇天眼：在2023年Expo上探索金融科技的未来！

从2020年初至2022年年底&#xff0c;全球范围内爆发的新冠疫情蔓延&#xff0c;对各国经济造成了严重冲击&#xff0c;导致贸易活动几近停滞&#xff0c;国际人员流动受限&#xff0c;产业链陷入危机。为应对这一局面&#xff0c;美欧经济体采取了前所未有的扩张性财政和货币政…
阅读更多...
【已解决】取消 el-aside 默认宽度｜不再用 !important

【已解决】取消 el-aside 默认宽度｜不再用 !important

文章目录 问题原因解决方法 问题原因 element-ui 的 el-aside 组件有 width props&#xff0c;默认为 300px 解决方法 给 el-aside 标签添加 width"" width 为空&#xff08;不正确的css样式/写法&#xff09;样式将会失效。 就可以在 style 中修改 el-aside 宽…
阅读更多...
【小尘送书-第十期】《ChatGPT进阶：提示工程入门》

【小尘送书-第十期】《ChatGPT进阶：提示工程入门》

大家好&#xff0c;我是小尘&#xff0c;欢迎你的关注&#xff01;大家可以一起交流学习&#xff01;欢迎大家在CSDN后台私信我&#xff01;一起讨论学习&#xff0c;讨论如何找到满意的工作&#xff01; &#x1f468;‍&#x1f4bb;博主主页&#xff1a;小尘要自信 &#x1…
阅读更多...
Windows原生蓝牙编程 第一章 获取本地蓝牙并扫描周围蓝牙信息并输出【C++】

Windows原生蓝牙编程 第一章 获取本地蓝牙并扫描周围蓝牙信息并输出【C++】

蓝牙系列文章目录 第一章 获取本地蓝牙并扫描周围蓝牙信息并输出 文章目录 前言头文件一、获取本地蓝牙的句柄和信息1.1 wstring转string1.2 获取MAC地址1.3 扫描附近设备并输出1.4 主函数 二、全部代码三、输出结果编译并运行查看结果 MAC地址我就打个码v ![在这里插入图片描述…
阅读更多...
拼多多商品数据分析接口|竞品分析接口|支持高并发|拼多多商品价格|拼多多商品优惠券|拼多多已拼人数|API接口申请指南

拼多多商品数据分析接口|竞品分析接口|支持高并发|拼多多商品价格|拼多多商品优惠券|拼多多已拼人数|API接口申请指南

拼多多提供了一些API接口&#xff0c;可以通过这些接口获取拼多多的商品数据。具体使用方法如下&#xff1a; 获取API接口提供的URL。在API文档中&#xff0c;可以找到获取商品信息的API接口URL。 根据需要获取的信息&#xff0c;选择响应的API。例如&#xff0c;如果想获取商…
阅读更多...
AD教程（二）元件库（原理图库）介绍及电阻容模型的创建

AD教程（二）元件库（原理图库）介绍及电阻容模型的创建

AD教程&#xff08;二&#xff09;元件库&#xff08;原理图库&#xff09;介绍及电阻容模型的创建 元件模型组成 主要由元件边框、管脚&#xff08;包括管脚序号和管脚名称&#xff09;、元件名称和元件说明组成&#xff0c;对尺寸大小没有严格要求&#xff0c;注意耦合&…
阅读更多...
视频无痕去水印怎么去，这三个神器轻松去除

视频无痕去水印怎么去，这三个神器轻松去除

视频无痕去水印怎么去&#xff1f;各位小伙伴在初学剪视频的时候是不是和我一样经常会碰到一个烦人的问题&#xff1a;在网上找到的视频素材总是带着讨厌的水印&#xff0c;不仅影响美观还挡住了视频的一些部分&#xff0c;让人特别不爽&#xff0c;我想各位遇到这种情况的时候…
阅读更多...
echarts环形图，每个分类设置成圆角的，分类之间有距离，如何实现

echarts环形图，每个分类设置成圆角的，分类之间有距离，如何实现

阅读更多...
vue3中，使用html2canvas截图包含视频、图片、文字的区域

vue3中，使用html2canvas截图包含视频、图片、文字的区域

需求&#xff1a;将页面中指定区域进行截图&#xff0c;区域中包含了图片、文字、视频。 第一步&#xff0c;先安装 npm install html2canvas第二步&#xff0c;在页面引入&#xff1a; import html2canvas from html2canvas;第三步&#xff0c;页面使用&#xff1a; 1&…
阅读更多...
实现接口自动化测试

实现接口自动化测试

最近接到一个接口自动化测试的case&#xff0c;并展开了一些调研工作&#xff0c;最后发现&#xff0c;使用pytest测试框架并以数据驱动的方式执行测试用例&#xff0c;可以很好的实现自动化测试。这种方式最大的优点在于后续进行用例维护的时候对已有的测试脚本影响很小。当然…
阅读更多...
2023/10/30 JAVA学习

2023/10/30 JAVA学习

JAVA浮点型运算会出现精度问题 如果没break,不会立刻停止,会执行下一个语句,并且不会判断条件,执行完后break 也可以这样写定义动态数组 两个变量地址相同,指向了同一个数组对象,所以更改一个另一个也会进行更改 方法其实就是函数 OUT: 外部标签,一种神奇的方式, print是输出括…
阅读更多...
软考系统架构师知识点集锦七：计算机系统基础知识

软考系统架构师知识点集锦七：计算机系统基础知识

一、考情分析 二、考点精讲 2.1计算机系统概述 2.1.1计算机系统组成 2.1.2 存储系统 时间局部性:指程序中的某条指令一旦执行&#xff0c;不久以后该指令可能再次执行,典型原因是由于程序中存在着大量的循环操作。 空间局部性:指一旦程序访问了某个存储单元&#xff0c;不久…
阅读更多...
ICS T8310输入输出模块

ICS T8310输入输出模块

输入输入模块&#xff08;Input/Output Modules&#xff0c;简称I/O模块&#xff09;是产业自动化和掌握体系中的症结组件&#xff0c;用于衔接传感器、履行器和掌握装备&#xff0c;以兑现数据收罗、监测和掌握。以下是输入输入模块的一些主要特征&#xff1a; 多通道输入和输…
阅读更多...
新手如何重装Win10系统？新手一键重装Win10系统教程

新手如何重装Win10系统？新手一键重装Win10系统教程

新手如何重装Win10系统&#xff1f;新手用户不是很了解专业的系统知识&#xff0c;自己重装系统的难度会比较大&#xff0c;所以特别想知道适合新手的重装方法。接下来小编给大家介绍关于新手用户重装Win10系统的简单步骤教程&#xff0c;帮助更多的新手用户完成Win10系统的重装…
阅读更多...
数据结构（三）：栈及面试常考的算法

数据结构（三）：栈及面试常考的算法

一、栈介绍 1、定义 栈也是一种数据呈线性排列的数据结构&#xff0c;不过在这种结构中&#xff0c;我们只能访问最新添加的数据。从栈顶放入元素的操作叫入栈&#xff0c;取出元素叫出栈。 2、优缺点及使用场景 优点&#xff1a;高效的操作、简单易用、空间效率高等 缺点&…
阅读更多...
【C语言实现扫雷小游戏——可展开一片】

【C语言实现扫雷小游戏——可展开一片】

文章目录 1. 游戏分析和设计1.1扫雷游戏的功能说明1.2数据结构的分析与设计 2.代码实现2.1基本框架2.2初始化棋盘2.3打印棋盘2.4布置雷2.4统计周围雷的个数2.5排查雷2.6展开一片 3.完成代码3.1game.h3.2 game.c3.3test.c 学习完了函数和数组&#xff0c;让我们做个扫雷小游戏巩…
阅读更多...
怎样才能把视频号的视频保存到相册，怎么下载视频号视频两个方法轻松解决

怎样才能把视频号的视频保存到相册，怎么下载视频号视频两个方法轻松解决

在微信客户端想要下载视频号视频却不知道怎么保存到本地相册&#xff1f;让不少网友犯了难&#xff0c;不用在纠结怎么样才可以将视频号视频下载下来&#xff0c;今天就分享两个小程序将视频号视频提取出来&#xff0c;另外在告诉大家一个下载技巧&#xff0c;一定要看到到结尾…
阅读更多...
【Leetcode】 94. 二叉树的中序遍历

【Leetcode】 94. 二叉树的中序遍历

给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,3,2] 示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[] 示例 3&#xff1a; 输入&#xff1a;root [1] 输出&#xff1a;[1] 提…
阅读更多...
低代码PAAS加速推进企业数字化转型

低代码PAAS加速推进企业数字化转型

无论是“十四五”规划从国家层面提出的“加快数字化发展 建设数字中国”&#xff0c;还是后疫情时代企业自身的感受&#xff0c;数字化转型已成为必答题。当前 企业 业务场景化、线上趋势愈加明显&#xff0c;越来越多并发的数字化应用场景&#xff0c;而原有集中式架构扩展能力…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023