element-plus+vue3项目(侧边栏菜单的使用和历史记录切换问题的解决(高点效果对应不上))

一、使用element-plus的菜单,侧边栏类型

 导入element-plus,安装方式有如下几种:

# 选择一个你喜欢的包管理器# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus

在main.js引入和使用:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import '../src/assets/static/css/normalize.css'
import App from './App.vue'
import router from '../routers/router'
// 引入element-plus和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(router).use(ElementPlus).use(createPinia()).mount('#app')

我的实际运用代码:

<template><div class="container"><!-- 菜单侧边栏 --><div class="bar"><!-- 系统名称 --><div class="system-title">智慧物业管理平台</div><el-menuactive-text-color="#ffd04b"background-color="#545c64"class="el-menu-vertical-demo":default-active="mainStore.currentSelected"text-color="#fff"@open="handleOpen"@close="handleClose"style="height: calc(100vh - 52px)"router><el-menu-item index="notice"><el-icon><Bell /></el-icon><span>整改通知</span></el-menu-item><el-menu-item index="projectManagement"><el-icon><Document /></el-icon><span>项目管理</span></el-menu-item><el-menu-item index="supplierManagement"><el-icon><Shop /></el-icon><span>供应商管理</span></el-menu-item><el-sub-menu index="personnel" ><!-- index属性用于指定子菜单的唯一标识符 --><template #title><el-icon><User /></el-icon><span>人事管理</span></template><el-menu-item index="personnelList">人员列表</el-menu-item><!-- <el-menu-item index="departmentManagement">部门管理</el-menu-item><el-menu-item index="postManagement">岗位管理</el-menu-item> --></el-sub-menu><el-menu-item index="

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

特斯拉一面算法原题

来自太空的 X 帖子 埃隆马斯克&#xff08;Elon Musk&#xff09;旗下太空探索技术公司 SpaceX 于 2 月 26 号&#xff0c;从太空往社交平台 X&#xff08;前身为推特&#xff0c;已被马斯克全资收购并改名&#xff09;发布帖子。 这是 SpaceX 官号首次通过星链来发送 X 帖子&a…

【Acwing】差分矩阵

图1&#xff1a;a和b数组映射表 由于a是b的前缀和数组&#xff0c;因此改变b[ x1][ y1]之后&#xff0c;受到影响的a中元素如右半图所示 图2&#xff1a;求b数组的前缀和 #include<bits/stdc.h> using namespace std;int n,m,q; int a[1010][1010]; int b[1010][1010]…

Vue概念详解【目录】

本专栏简介&#xff1a; 这个专栏是关于 Vue2 和 Vue3 各种概念的大集合&#xff01;它深入挖掘原理&#xff0c;分析各种优势和劣势&#xff0c;适配各种应用场景&#xff0c;部分内容还列出了代码示例&#xff0c;以清晰地讲述原理。在这里&#xff0c;你将全面了解 Vue2 和…

B端系统:故障页面设计,告知用户接下来怎么办?

Hi&#xff0c;大家好&#xff0c;我是贝格前端工场&#xff0c;从事8年前端开发的老司机。很多B端系统体验不好很大一部分原因在于设计不合理&#xff0c;让用户无所适从&#xff0c;大大降低了操作体验&#xff0c;本文着重分析B端系统的故障页面如何设计&#xff0c;欢迎老铁…

基于springboot实现二次元商品购物系统项目【项目源码+论文说明】

基于springboot实现二次元商品购物系统演示 摘要 时代的变化速度实在超出人类的所料&#xff0c;21世纪&#xff0c;计算机已经发展到各行各业&#xff0c;各个地区&#xff0c;它的载体媒介-计算机&#xff0c;大众称之为的电脑&#xff0c;是一种特高速的科学仪器&#xff0…

Vue 组件和插件:探索细节与差异

查看本专栏目录 关于作者 还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#x…

java面试(网络)

TCP和UDP有什么区别&#xff1f;TCP三次握手不是两次&#xff1f; TCP&#xff1a;面向连接&#xff0c;可靠的&#xff0c;传输层通信协议。点对点&#xff0c;占用资源多&#xff0c;效率低。 UDP&#xff1a;无连接&#xff0c;不可靠&#xff0c;传输层通信协议。广播&…

东方博宜 1962. 数值计算

东方博宜 1962. 数值计算 #include<iostream> using namespace std; int main() {int n ;cin >> n ;int cnt 0 ;int a[6] ;int k 0 ;while(true){a[k] n % 10 ;k ;cnt 1 ;n n/10;if(n0)break; }cout << cnt << endl ;for(int i cnt-1 ; i >…

理解TCP Socket编程模型和I/O多路复用技术

最基本Socket模型 基本只能一对一通信&#xff0c;因为使用的是同步阻塞的方式&#xff0c;当服务端在还没处理完一个客户端的网络 I/O 时&#xff0c;或者 读写操作发生阻塞时&#xff0c;其他客户端是无法与服务端连接的。 多进程模型 基于最原始的阻塞网络 I/O&#xff0c…

定制红酒:定制周期与交货时间,确保服务准时完成

在云仓酒庄洒派的定制红酒服务中&#xff0c;为了确保服务的品质和准时完成&#xff0c;云仓酒庄洒派严格控制定制的周期与交货时间。 首先&#xff0c;让云仓酒庄洒派来了解一下定制周期。从消费者提交定制需求开始&#xff0c;到红酒生产完成&#xff0c;整个定制周期通常需要…

字节一面,Redis 为什么这么快?

一、问题解析 这是一道非常经典并且面试频率很高的面试题。却很少有人回答得比较全面&#xff0c;今天就给大家分享一下我的理解。决定 Redis 请求效率的因素主要是三个方面&#xff0c;分别是网络、cpu、内存。在网络层面&#xff0c;Redis 采用多路复用的设计&#xff0c;提升…

Qt中关于信号与槽函数的思考

信号与槽函数的思考 以pushbutton控件为例&#xff0c;在主界面上放置一个pushbutton控件&#xff0c;点击右键选择关联槽函数&#xff0c;关联一个click函数&#xff0c;如下图所示&#xff1a; 在该函数中&#xff0c;实现了一个点击pushbutton按钮后&#xff0c;弹出一个窗…