vue3中的伸缩菜单组件

目录
  • vue3伸缩菜单组件
  • 效果图
  • 总结

vue3伸缩菜单组件

最近一直在学习分装组件,学到了一个伸缩菜单栏组件,浅浅的记录一下,想要封装菜单的,代码可以直接拿去用,稍作修改即可!

效果图

1.在components下面创建一个container的文件,在container文件下面创建一个src文件,然后在src文件下创建index.vue文件

这个文件里写入

<template>
    <div class="common-layout">
      <el-container>
        <el-aside width="auto">
<!--        侧边菜单栏组件-->
        <nav-side v-model:collapse="isCollapse"></nav-side>
        </el-aside>
        <el-container>
          <el-header>
<!--          头部组件-->
            <nav-header v-model:collapse="isCollapse"></nav-header>
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import navHeader from './navHeader/index.vue'
import navSide from './navSide/index.vue'
const isCollapse=ref<boolean>(false)

</script>

<style lang="scss" scoped>

.el-header {
 padding: 0;
  border-bottom: 1px solid #eeeeee;
}
</style>

2.在router文件下的index.ts写入

// @ts-ignore
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
    {
        path:'/',
        component:()=>import('../components/container/src/index.vue'),
        children:[
            {
                path: '/',
                name: 'home',
                component:()=>import('../view/home.vue'),
            }
        ]
    },

]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

3.在components下面创建一个container的文件,在container文件下面创建一个src文件,然后在src文件下创建navHeader文件,在navHeader文件下创建index.vue文件

在文件里写入

<template>
  <div class="header">
    <div @click="shrink">
<!--        伸缩图标-->
      <Expand v-if="collapse==true"></Expand>
      <Fold v-else></Fold>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
let props=defineProps<{
  collapse:Boolean
}>()
let emits=defineEmits(['update:collapse'])
const shrink=()=>{
  emits('update:collapse',!props.collapse)
}
</script>

<style lang="scss" scoped>
.header {
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
</style>

4.在components下面创建一个container的文件,在container文件下面创建一个src文件,然后在src文件下创建navSide文件,在navSide文件下创建index.vue文件

在文件里写入

<template>
  <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      :collapse="collapse"
  >
    <el-menu-item index="1">
      <el-icon><House></House></el-icon>
      <template #title>导航一</template>
    </el-menu-item>
    <el-menu-item index="2">
      <el-icon><Message></Message></el-icon>
      <template #title>导航二</template>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon><Grid></Grid></el-icon>
      <template #title>导航三</template>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><Tools></Tools></el-icon>
      <template #title>导航四</template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
let props=defineProps<{
  collapse:Boolean
}>()
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

这就是封装伸缩菜单栏组件的代码。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue3.0实现无限级菜单

    业务需求 菜单项是业务系统的重要组成部分,一般业务系统都要支持显示多级业务菜单,但是根据每个业务人员的权责不同,看到的的菜单项也是不同的. 这就要求页面可以支持无限极菜单显示,根据每个用户的权限不同,后台服务返回对应的菜单项. 本文基于Vue 3.0实现了一个可配置的无限等级菜单,关键代码如下: 后端返回的菜单项数据结构 后端服务一般不会直接返回一个树型结构菜单集合给前端,这样做也不合理.前端应该根据自己的具体需求,构建自己的菜型单树.后端返回的数据结构一般包含以下一个字段: Id 菜单ID,

  • Vue 动态添加路由及生成菜单的方法示例

    写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单. 为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的. 在网上找了好多资料,终于想到了解决办法. 动态生成路由 利用 vue-router 的 addRoutes 方法可以动态添加路由. 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组.

  • vue实现三级联动动态菜单

    本文实例为大家分享了vue实现三级联动动态菜单的具体代码,供大家参考,具体内容如下 三级联动动态菜单展示:一级菜单选中,生成二级菜单数据,二级菜单选中,生成三级菜单数据(根据上一级菜单的id,作为请求下一级菜单数据接口的参数) 1.代码 <template>   <div>     <!-- inline:代表的是行内表单,代表一行可以放置多个表单元素 -->     <el-form :inline="true" class="de

  • vue3中的伸缩菜单组件

    目录 vue3伸缩菜单组件 效果图 总结 vue3伸缩菜单组件 最近一直在学习分装组件,学到了一个伸缩菜单栏组件,浅浅的记录一下,想要封装菜单的,代码可以直接拿去用,稍作修改即可! 效果图 1.在components下面创建一个container的文件,在container文件下面创建一个src文件,然后在src文件下创建index.vue文件 这个文件里写入 <template> <div class="common-layout"> <el-conta

  • Vue3+TypeScript实现递归菜单组件的完整实例

    目录 前言 需求 实现 首次渲染 点击菜单项 样式区分 默认高亮 数据源变动引发的 bug 完整代码 App.vue 总结 前言 小伙伴们好久不见,最近刚入职新公司,需求排的很满,平常是实在没时间写文章了,更新频率会变得比较慢. 周末在家闲着无聊,突然小弟过来紧急求助,说是面试腾讯的时候,对方给了个 Vue 的递归菜单要求实现,回来找我复盘. 正好这周是小周,没想着出去玩,就在家写写代码吧,我看了一下需求,确实是比较复杂,需要利用好递归组件,正好趁着这 个机会总结一篇 Vue3 + TS 实现递

  • 如何在在Vue3中使用markdown 编辑器组件

    目录 安装 引入组件 基础用法 保存后的 markdown 或者 html 文本如何渲染在页面上? 安装 # 使用 npm npm i @kangc/v-md-editor@next -S # 使用yarn yarn add @kangc/v-md-editor@next 引入组件 import { creatApp } from 'vue'; import VMdEditor from '@kangc/v-md-editor'; import '@kangc/v-md-editor/lib/s

  • Vue3中注册全局的组件,并在TS中添加全局组件提示方式

    目录 Vue3中注册全局的组件 Vue3踩坑--全局注册组件 我的框架:vue3+vite+ts+naiveUI Vue3中注册全局的组件 1. 在src/components中新建index.ts用来将所有需要全局注册的组件导入 : 如果使用的是 JS 可以删除类型校验 import type { Component } from 'vue' import SvgIcon from './SvgIcon/index.vue' // 如果使用的是 JS 可以删除类型校验 const compon

  • Vue3中使用defineCustomElement 定义组件详解

    目录 使用 Vue 构建自定义元素 跳过组件解析 传递 DOM 属性 defineCustomElement() 生命周期 Props 事件 插槽 依赖注入 将 SFC 编译为自定义元素 基于 Vue 构建自定义元素库 defineComponent() defineAsyncComponent() 使用 Vue 构建自定义元素 Web Components 是一组 web 原生 API 的统称,允许开发者创建可复用的自定义元素 (custom elements). 自定义元素的主要好处是,它们

  • vue3中echarts的tooltip组件不显示问题及解决

    目录 vue3 echarts的tooltip组件不显示 解决办法 Echarts|tooltip提示框组件参数 vue3 echarts的tooltip组件不显示 data() { return { chartInstance: '' } }, mounted() { if(!this.chartInstance) this.chartInstance = echarts.init(this.$refs.myChart) this.chartInstance.setOption(option)

  • 详解vue3中的非父子组件传值

    目录 App.vue sub1.vue sub2.vue 总结 vue2中非父子组件的传值主要是通过事件总线,创建一个vue实例,通过在不同的组件中导入该实例来实现非父子组件之间的通信行为. vue3提供了**provide**和**inject**属性,可以实现非父子组件之间的通信: 假设有三个组件:App.vue(父级).sub1(子级).sub2(子级的子级): App.vue <template> <div style="border: 1px solid pink&q

  • vue3中的elementPlus全局组件中文转换方式

    目录 elementPlus 全局组件中文转换 elementPlus 设置默认语言为中文 elementPlus 全局组件中文转换 在项目中使用日期下拉框发现是英文的,需要全局改成中文样式. 代码实现 在 App.vue 的文件中修改即可. 代码如下 <template>     <el-config-provider :locale="locale">       <router-view></router-view>     <

  • Java GUI编程菜单组件实例详解

    前面讲解了如果构建GUI界面,其实就是把一些GUI的组件,按照一定的布局放入到容器中展示就可以了.在实际开发中,除了主界面,还有一类比较重要的内容就是菜单相关组件,可以通过菜单相关组件很方便的使用特定的功能,在AWT中,菜单相关组件的使用和之前学习的组件是一模一样的,只需要把菜单条.菜单.菜单项组合到一起,按照一定的布局,放入到容器中即可. 下表中给出常见的菜单相关组件: 菜单组件名称 功能 MenuBar 菜单条 , 菜单的容器 . Menu 菜单组件 , 菜单项的容器 . 它也是Menult

  • vue3 element-plus二次封装组件系列之伸缩菜单制作

    目录 1.效果 2.主要逻辑代码 1.效果 折叠效果--只剩图标 展开效果--有图标有文字 2.主要逻辑代码 home.vue--主页代码 <template> <div class="common-layout"> <el-container> <!-- 侧边栏菜单 --> <el-aside width="auto"> <nav-menu :collpase="state.isColla

随机推荐