uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种)

代码哈士奇 等级 806 0 0

效果如下 数据来源为uniCloud云数据库 照片来源为网络 代码来源为我的毕业设计 uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种)

鼠标未放到软件上面之前 uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种)放到软件上面后 软件所在卡片 高亮显示 如果背景颜色是灰色 效果更加明显 uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种) uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种))uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种)

使用element ui的 卡片 走马灯 弹出框 文字链接 分割线

elementui文档地址 https://element.eleme.cn/#/zh-CN/component/installation

这里的 uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种) 是数据来源 自行更换即可

完整代码如下

<template>
    <div>
        <el-container>
            <el-aside width="400px" style="position: relative;top: 20px;left: 15px;height: 500px;">
                <div style="height: 500px;">
                    <div v-for="(item,index) in menus" :key="index">
                        <div style="width: 340px;height: 49px;margin-left: 30px;line-height: 10px;"
                            @mouseover="showMsg(item.menu_two)" @mouseleave="unShow">
                            <el-card shadow="hover" style="width: 340px;height: 49px;line-height: 10px;">
                                {{item.type}}
                            </el-card>
                        </div>
                        <div style="margin-top: 5px;"></div>
                    </div>
                </div>
            </el-aside>
            <el-main>
                <div v-show="isShow" class="show-menu" @mouseover="isShow_o=true" @mouseleave="unShows()">
                    <span>⁣⁣⁣⁣ ⁣⁣⁣⁣ </span>
                    <div v-for="(item,index) in meunItems" :key="index">
                        <el-divider content-position="left">{{item.type}}</el-divider>
                        <div style="margin-left: 20px;">
                            <el-popover v-for="(items,indexs) in item.items" :key="indexs" placement="top-start"
                                :title="items.name" width="200" trigger="hover" :content="items.msg" >
                                    <el-link slot="reference" :underline="false" style="font-size: 20px;">{{items.name}}
                                        <el-divider v-if="indexs!=item.items.length-1" direction="vertical"></el-divider>
                                    </el-link>
                            </el-popover>
                        </div>
                    </div>
                </div>
                <el-carousel height="500px" v-show="!isShow">
                    <el-carousel-item v-for="(item,index) in carousels" :key="index">
                        <el-image :src="item.url" style="width: 100%;height: 500px;"></el-image>
                        <!-- <h3 class="small">{{ item }}</h3> -->
                    </el-carousel-item>
                </el-carousel>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: 'homeMsg',
        data() {
            return {
                carousels: [],
                isShow: false,
                menus: [],
                meunItems: [],
                isShow_o: false,
                timer_a: "",
                timer_b: ""
            }
        },
        mounted() {
            this.getMenu()
            this.getCarousel()
        },
        methods: {
            showMsg(item) {
                this.isShow = true;
                this.meunItems = item
                clearTimeout(this.timer_a)
                clearTimeout(this.timer_b)
            },
            unShow() {
                this.timer_b = setTimeout(() => {
                    if (!this.isShow_o) {
                        this.isShow = false
                    }
                }, 1000)
            },
            unShows() {
                this.isShow_o = false;
                this.timer_a = setTimeout(() => {
                    this.isShow = false
                }, 1000)
            },
            getMenu() {
                const getMenus = uniCloud.database().collection("home-menu-a");
                getMenus.get().then(res => {
                    this.menus = res.result.data;
                }).catch((err) => {
                    console.log(err.code); // 打印错误码
                    console.log(err.message); // 打印错误内容
                })
            },
            getCarousel() {
                const carousel = uniCloud.database().collection("static");
                carousel.where({
                    type: "homeCarousel"
                }).get().then(res => {
                    this.carousels = res.result.data
                    console.log(this.carousels)
                }).catch((err) => {
                    console.log(err.code); // 打印错误码
                    console.log(err.message); // 打印错误内容
                })
            }
        }
    }
</script>

<style>
    .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;
    }

    .show-menu {
        width: 100%;
        height: 500px;
        background-color: #ffffff;
        box-shadow: darkgrey 3px 3px 10px 5px;
    }
</style>

收藏
评论区

相关推荐

🎉无人维护?官方打脸:Element UI for Vue 3.0 来了!🎊
Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是 Element 对 Vue 3.0 的升级适配。此前网上有传言称 Element 无人维护,Element UI 也不会支持 Vue 3.0,这次官方出来打脸了。 image(https://imghelloworld.ossc
前端技术栈:5分钟入门VUE+Element UI
目录前端技术栈:5分钟入门VUEElement UI前言2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进VUE是啥?简单来说就是
Vue.js的图片加载性能优化你可以试试
前言图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。备注以下的优化一、优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的。资源 Vue.js Element UI 优化一:图片加载动画只有当图片加载完成后才可以显示图片,加载动画结束。我们使用Element UI
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
* [element](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement) ★11612 - 饿了么出品的Vue2的web UI工具套件 * [Vux](https://www.oschina.net/action
VUE +element el
Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) ![](https://img2018.cnblogs.com/blog/1022288/201809/1022288-20180928101029146-110495051.png) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了so
Vue + Element 实现动态添加input
 此篇博客背景:项目开发技术为vue+element,需求为form表单中动态添加input表单,本element中有现成form动态添加案例,但ui小姐姐效果图与ui库有些微差别,固重新整理。废话不多说啦,正式开始了: 代码地址:https://codepen.io/newgingkgo/pen/gObMMow  (备注:将代码复制至vue项目即可查看
Vue 开源项目库汇总
![图片1](http://evgetimg.oss-cn-hangzhou.aliyuncs.com/Content/files/2017/3/30/6e14c1c665e24072900300b55919f411636264715611223167.jpg) **UI组件** * element ★9305 - 饿了么出品的Vue2的web UI
springboot+vue 登录页面(一)
首先了解的技术点是: 后台:springboot,mybatis,mybatis逆向工程,mysql,日志 前端: nodejs,npm ,cnpm,vue,vue-cli,webpack,element ui,router,axios 开发工具:idea,webstorm 该项目前端使用的是vue ,目的是实现前后端分离 后台: 1.选择spr
vue element
1.真正理解v-model input元素上的v-model其实是一个语法糖,其真正作用有两个:(1)创建一个props,其键为value;(2)监听input事件,改变value。键名与事件名都可以另外设置。 当定义一个组件时,v-model是绑定在input的外层的,所以需要手动实现v-model。 2.provide / inject prov
vue cli3 element ui 打包减少体积 按需引入
原文链接: [vue cli3 element ui 打包减少体积 按需引入](https://my.oschina.net/ahaoboy/blog/3044859) element-ui 按需引入 [https://element.eleme.cn/#/zh-CN/component/quickstart](https://www.oschina.n
vue element
工作中遇到后台给的表格数据里时间是一个13位的时间戳,需要转换成时间显示在表格里, 可以用element-ui表格自带的:formatter函数,来格式化表格内容: 1 // 时间戳转换成时间 2 // 使用element table组件中的formatter属性,传入一个函数 3 timestampToTime
vue iview element
首先安装babel-polyfill npm install babel-polyfill --save-dev 入口文件引用,在main.js中引用 import 'babel-polyfill' 配置文件webpack.base.conf.js修改 entry: { app: './src/main.j
vue 如何将输入框的输入自动小写转大写(使用 v
> 前言:小写转大写,可以用过滤器实现,但当使用 v-model 时就不行了,这里有解决方案。转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9289205.html **网站地址:**[我的个人vue+element ui demo网站](https://www.oschina.net/action/GoToLink
vue+element UI + axios封装文件上传及进度条组件
1.前言 ==== 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人。 项目用的是Vue框架,UI库使用的是element UI,前后端交互请求使用的是Vue官方推荐的axios。其中,UI方面主要使用了element UI库中的`Upload`文件上传组件、`Progress
vue+element
页面展示: ![](https://oscimg.oschina.net/oscnet/46b9f7c40a7aedbcc30f2c107ca22129439.jpg) vue组件中分页代码: <div class="pagination"> <el-pagination