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

代码哈士奇 等级 493 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
element-ui Dialog组件的close-on-click-modal属性
element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog,即点击空白处弹框可关闭。 单功能设置如下: <eldialog :closeonclickmodal"false" </eldialog 全局修改默认配置,点击空白处不能关闭弹窗: //在组件注册.js文件中 Dialog.props.cl
VUE+Element国际化(vue-il8n)实现多语言
1.安装:npm install vuei18n 2.在main.js引入i18n,注册,并设置element语言 import i18n from './lang' // set ElementUI lang ,兼容elementui写法 Vue.use(ElementUI, { i18n: (key, value) i18n.t(key, v
vue疫情大屏数据展示+数据导出+地图图片下载
不废话,先上效果图 审美有限 下午5点开工 去掉吃饭时间 我的审美也只能让我做到这一步哈哈 在线体验地址 http://www.zczyp.top/big//(http://www.zczyp.top/big//) 有需要可以去github下载 github上代码是不加注释的 看注释在这个文章 github地址 https://github
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种)
效果如下 数据来源为uniCloud云数据库 照片来源为网络 代码来源为我的毕业设计 在这里插入图片描述(https://imghelloworld.osscnbeijing.aliyuncs.com/68857ab4a9c485bbbd98c94ad98fb490.png) 鼠标未放到软件上面之前 在这里插入图片描述(ht
前端技术栈: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是啥?简单来说就是
【Flutter实战】布局类组件简介
4.1 布局类组件简介布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排版(layout)方式不同。我们在前面说过Element树才是最终的绘制树,Element树是通过Widget树来创建的(通过Widget.createElement()),Widget其实就是Element的配置数据。在Flutter中,根据Widget是否
11个基于vue的UI框架_U.R.M.L
Element UI 来自中国,由与 Mint UI 相同的开发者所创建。Element UI 是用于 Web 和桌面应用程序的桌面 UI 工具包,如果你需要开发 Electron 应用,这个库会是你的理想之选。 iView 是一个 UI 工具包,其中包含简洁又设计优雅的小部件和各种组件。iView 团队维护非常及时,最近一次的更新在19年3
go语言坑之list删除所有元素
go提供了一个list包 类似python的list,可以存储任意类型的数据,并提供了相应的API,如下:type Element func (e Element) Next() Element func (e Element) Prev() Elementtype List func New() List func (l List)
Vue.js的图片加载性能优化你可以试试
前言图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。备注以下的优化一、优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的。资源 Vue.js Element UI 优化一:图片加载动画只有当图片加载完成后才可以显示图片,加载动画结束。我们使用Element UI
使用Vue封装一个实用的人脸识别组件
❝ 欢迎阅读本博文,本文主要讲述【使用Vue封装一个实用的人脸识别组件】,文字通俗易懂,如有不妥,还请多多指正。 ❞在这里插入图片描述前言人脸识别技术现在越来越火,那么我们今天教大家实现一个人脸识别组件。资源 element UI Vue.js trackingmin.js facemin.js 源码由于我们
想用Vue搭建考试答卷系统吗?
❝ 欢迎阅读本文,本文主要讲述【怎样用Vue搭建考试答卷系统】,文字通俗易懂,如有不妥,还请多多指正。 ❞本篇章主要讲述系统搭建逻辑,有疑问的可以加微信联系我。考试系统 在这里插入图片描述资源 Vue.js Element UI 第三方数据接口 业务 1. 答题过程中,防止用户中途退出或者其他不可抗力因素阻碍答
vue项目中使用element-ui实现excel表格上传
恰逢项目中要实现excel表格上传,度娘甚久,得此一文,留之。原文:https://blog.csdn.net/qq36718999/article/details/95387542 需求 vuecli 搭建前端项目,并使用elementui实现本地excel表格上传。(1) 限制上传文件只能是 xls、xlsx格式;(2) 限制上传文件大小不能超过 2MB
vue+ts项目对app类型限制
描述做一个ts+vue+elementplus项目的时候总是有警告 消除警告 1. 将src/plugins/element.js文件后缀名改成ts 2. 在element里面还要对脚手架现有的代码进行类型限制 在element.ts中引入jsimport App from 'vue' 在element.ts中 对参数app和函数返回值进行类型限制jse