Vue3.0 + Element Plus｜ 侧边导航栏、标题栏组件应用全局

最新推荐文章于 2024-08-13 16:27:02 发布
最新推荐文章于 2024-08-13 16:27:02 发布
阅读量4.7k 收藏 5
点赞数 1
分类专栏： vue3.0+element plus 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/StellaXiao98/article/details/118937365
版权
本文介绍了在Vue3.0项目中，如何使用Element Plus解决页面布局问题，避免代码冗余。通过创建全局布局组件，包括侧边导航栏和标题栏，并在`App.main`文件与`route/index.js`中进行配置，实现不同页面按需渲染，特别适用于登录页和404页的场景。
摘要由CSDN通过智能技术生成

刚开始接触项目，从0开始搭建管理平台，最开始先写的页面布局，采用的很笨的方法：每写一个页面就写一次页面布局样式

<el-container>
    <el-aside style="width: auto"  v-if="$route.meta.keepAlive">
        <keep-alive>

        <!--  封装好的侧边导航栏组件  -->
        <com-sidebar ></com-sidebar>

        </keep-alive>
    </el-aside>

    <el-container>

        <el-header v-if="$route.meta.keepAlive">
          <keep-alive>

          <!--  封装好的顶部标题栏组件  -->
          <header-navbar ></header-navbar>

          </keep-alive>
        </el-header>

        <el-main>

          <!--  此处为不同的页面样式语句  -->

        </el-main>
    </el-container>
</el-container>

后来随着页面逐渐变多，代码冗余量也逐渐增多。于是采取了以下方法将整体的页面布局注册为了全局布局组件：

App.main文件

HTML：
<el-container>
最低0.47元/天 解锁文章
StellaXiao98
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element UI导航栏组件多级菜单侧边栏导航封装功能效果
weixin_45852123的博客
09-17 2391
在开发当中会遇到一些组件的封装，侧边栏导航的封装也是很实用的。下面代码拿走直接用！！！ <template> <div> <el-aside width="200px"> <el-menu default-ac
vue3 tsx element plus导航栏封装
Feast_aw的博客
05-29 348
【代码】vue3 tsx element plus form表单校验
Vue的组件化
2401_84446548的博客
04-29 221
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】Right总结来说，面试成功=基础知识+项目经验+表达技巧+运气。
基于vue+elementPlus的动态导航标签栏-tabs
qq_65325528的博客
07-29 813
首先用到了element-plus框架中tabs的组件，然后数据我这里是通过vuex来维护的。在点击菜单的同时往vuex相关数据数组中添加一项数据即可， 不使用setup语法糖时 使用setup语法糖时
vue3+Element Plus功能组件封装——顶部导航（动态渲染+样式调整）
最新发布
布克吉的博客
08-13 617
网页顶部的导航栏，一般由代码动态生成菜单数据在文件内统一配置，方便增删改查，导入后可自动生成导航菜单代码如下。
vue实现侧边栏导航效果
01-19
本文实例为大家分享了vue侧边栏导航的具体代码，供大家参考，具体内容如下 最终效果 点击下一个导航，上一个导航自动收回 实现代码 1.下载vue-router npm install vue-router --save-dev 2.在main.js中引入 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 引入路由 3.在components中新建组件 3.1 agencySearch.vue组件 代码： 直属下线代理查询 </
vue3+ElementPlus实现tagsView导航标签栏功能
m0_70346589的博客
01-09 3508
【代码】vue3+elementplus实现tagsView导航标签栏所有功能。
解决Vue3 使用Element-Plus导航刷新active高亮消失
键指江湖的博客
08-03 1648
解决vue3使用element plus导航菜单刷新页面后active高亮消失的问题
Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能
qq_38334677的博客
01-16 2452
1. 首先应该为 Menu (菜单)启用 vue-router 模式 (路由模式)，默认是false。例如 :router="true" 可以简写成 router:router 前面加冒号，代表属性绑定。代码改造，每一个二级菜单，应取服务器返回的path 属性做为跳转的唯一值，而不是Id。1.首先，第一步应创建各菜单列表链接对应的各内容组件页面。1.1 点击不同的菜单列表，可以在右侧 (Main) 主体区域显示不同的组件页面。如果需要把某个属性的值重置成true,可以对该属性进行简写。
Vue3里面全局配置
❤的博客
11-20 2753
Vue3里面全局配置 = =其实这个问题很早之前就遇到了，但是当时并没有解决，然后就放在js文件里面引入就不了了之了，今天去csdn博客上晨爱衿文老哥回答了我于是我又玩了下。 一般网上的教程 //在main.js中注册你想注册的东西比如： app.config.globalProperties.hello = ()=>{ console.log("hello,world"); } //然后在vue文件中通过getCurrentInstance解构出ctx进行获取比如： import { g
vue-sidebar-menu:Vue.js侧边栏菜单组件
05-12
Vue侧边栏菜单 Vue.js侧边栏菜单组件 演示版 本文档适用于Vue 2，对于Vue 3，您可以尝试预发行版，请参见 安装 npm i vue-sidebar-menu --save 全局安装插件。 //main.js import Vue from 'vue' import VueSidebarMenu from 'vue-sidebar-menu' import 'vue-sidebar-menu/dist/vue-sidebar-menu.css' Vue . use ( VueSidebarMenu ) 或在本地导入组件。 //App.vue import { SidebarMenu } from 'vue-sidebar-menu' export default { components : { SidebarMenu } } 基本用法 < temp
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
基于vue3.0+Element的后台管理系统.zip
01-04
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
vue3.0 + element-plus + 上传图片到七牛云
zxf_CN的博客
08-30 3082
时间： 2021.8.30 ，想在项目中，把上传的图片存储到 七牛云 上，但是发现，七牛云他只给了一个限时 30 天的 cdn，就是在30天后，这个就会取消掉，不知道上传后的图片还有没有在 。需要绑定 备案的域名，就应该可以永久使用了吧，不过我没有 备案的域名，但是还是记录一下 。 1. 创建七牛云账号： 创建账号后，需要实名后，才能开通一个 30 天，内存为 10G 的域名！ 1、创建一个对象存储 空间： 他会让你起一个空间名称，用来存储你的东西！ 地区我选择的是 华南的，访问控制选择 公开的。
Vue3+Element-Plus 实现左侧菜单折叠与展开功能 二七
热门推荐
build2024
12-10 2万+
1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来，画UI结构 1. 在侧边栏内部，在侧边栏菜单区域之前，放置一个DIV。 2. 在该DIV上面添加文本，然后通过点击该DIV，实现菜单折叠与展开功能 3.通过类选择器，为该DIV 添加相关样式 .toggle-button{ // 添加背景颜色 background-color: #4A5064; // 设置文本大小 font-size...
vue3 + element-plus实现侧边导航栏
dh99999900的博客
10-16 5096
当 NarBar.vue中绑定展开或收起的变量发生改变时候，右侧的内容不会随着左侧的内容变化而变化，而是会固定在初始位置不动。我们选择垂直导航菜单，后台管理系统彩带一般都可以被折叠，通过绑定一个变量来设定当前是否展开或关闭。侧边导航栏一般用在后台管理系统中，我们用element-plus更容易实现。所以我们需要在父组件中传入一个方法，在子组件触发，并且在。这个问题官网没有具体的解答，但是网上是有相关的处理方式的。中必须将控制展开和收起的变量暴露出去，用vue3中的。而绑定收起或展开的变量在。
vue3.0+element Plus表单校验
05-28
在Vue3.0中，可以使用Vue3.0官方推荐的表单校验库VeeValidate或者使用Element Plus提供的表单校验功能。 下面是一个使用Element Plus表单校验的示例： 1. 在Vue3.0项目中，首先需要先安装Element Plus组件库： ``` npm install element-plus --save ``` 2. 在需要使用表单校验的组件中，引入Element Plus的表单组件和校验规则： ```javascript <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; export default { components: { ElForm, ElFormItem, ElInput, ElButton, }, setup() { const form = ref({ username: '', password: '', }); const rules = ref({ username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }, ], }); const submitForm = () => { // 表单校验 const formRef = this.$refs.form; formRef.validate((valid) => { if (valid) { // 校验通过 console.log('submit'); } else { // 校验不通过 console.log('error submit!!'); return false; } }); }; return { form, rules, submitForm, }; }, }; </script> ``` 在上面的示例中，我们使用了Element Plus的表单组件和校验规则来实现表单校验，其中： - `ElForm`：表单组件，用于包裹需要校验的表单项； - `ElFormItem`：表单项组件，用于包裹表单控件和校验规则； - `ElInput`：输入框组件，用于输入表单数据； - `ElButton`：按钮组件，用于提交表单数据； - `ref`：Vue3.0中用于获取组件实例的方法。 在`setup()`函数中，我们使用了`ref`来定义表单数据和校验规则，并且定义了一个`submitForm()`方法来提交表单数据，其中： - `validate()`：表单校验方法，用于校验表单数据是否满足校验规则； - `valid`：校验结果，如果校验通过则为`true`，否则为`false`。 总体来说，使用Element Plus的表单校验功能非常简单，只需要在需要校验的表单项中定义相应的校验规则，并在提交表单时调用`validate()`方法即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值