当前位置：

首页 > 编程开发 > vue3伸缩菜单组件怎么使用

vue3伸缩菜单组件怎么使用

作者：归人云淡风轻时间：2025-04-17 来源：正软商城浏览：3

效果图1.在components下面创建一个container的文件，在container文件下面创建一个src文件，然后在src文件下创建index.vue文件这个文件里写入import{ref}from'vue'importnavHeaderfrom'./navHeader/index.vue'importnavSidefrom'./navSide/index.vue'constisCollapse=ref(false).el-header{paddin

本文目录

效果图

vue3伸缩菜单组件怎么使用

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

vue3伸缩菜单组件怎么使用

这个文件里写入



import {ref} from 'vue'
import navHeader from './navHeader/index.vue'
import navSide from './navSide/index.vue'
const isCollapse=ref(false)
 

 

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

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

// @ts-ignore
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array = [
    {
        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文件

vue3伸缩菜单组件怎么使用

在文件里写入


 

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

 

.header {
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

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

vue3伸缩菜单组件怎么使用

在文件里写入


    
    
      
      导航二
    
    
      
      导航三
    
    
      
      导航四
    
  

 

import {ref} from 'vue'
let props=defineProps<{
  collapse:Boolean
}>()

 

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

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

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系bd@zhengruan.com

作者最新文章

coreldraw快捷键怎么设置在哪里 2026-11-02 21:39

AO3最新可用链接及中文入口汇总 2026-10-29 13:32

coreldraw怎么插入图片图片导入步骤 2026-10-27 15:37

coreldraw快捷键冲突怎么改自定义按键解决 2026-10-24 08:50

AO3中文界面设置指南与核心功能使用教程 2026-10-14 23:28

编程开发 Vue3

上一篇：杭州市民卡app怎么办理学生卡

下一篇：爱奇艺进行登录会员的方法介绍

相关文章更多

pinia数据持久化的步骤详解与插件配置教程

详解Pinia数据持久化的实现步骤，包括手动订阅状态、封装通用插件及处理序列化例外，帮助开发者构建稳定的前端状态存储方案。

2026-10-29 8 DreamView

Vue3 数据持久化

如何从零开始搭建vue3项目

说明记录一次Vue3的项目搭建过程。文章基于vue3.2.6和vite2.51版本，使用了ui库Elementplus，vue-router4，Layout布局封装，axios请求封装，别名配置等。开始1.使用vscode开发工具安装vue3的插件Volar，在vue2中我们使用的是Vetur。vue3在线code工具传送门sfc.vuejs.org/2.执行初始化及安装命令：npminitvite初始化vite此过程可以输入项目名、选择vue/react项目及js/ts环境选择，vue3已经完全支持ts

2025-07-05 6 BrightSoul

vue3中getCurrentInstance怎么使用

父组件中：1.setup语法糖中导入子组件2.在子组件标签上绑定ref值3.setup内部从vue中按需导出getCurrentInstance方法4.调用getCurrentInstance方法导出proxy5.通过proxy.$refs.子组件ref名.子组件内属性/方法实现调用子组件count+1import{getCurrentInstance,ComponetInternalInstance,ref}from"vue";importChildfrom"./zi.vue";constchild=r

2025-06-02 2 小宇宙叶知秋

怎么使用vue3搭建后台系统

首先使用npm或者yarn创建一个vue项目//使用npm创建一个基于vite构建的vue项目npmcreatevite@latest//使用yarn创建一个基于vite构建的vue项目yarncreatevite@latest在创建的构成中选择vuevue-ts创建完之后将项目拖到编译器打开一、配置vite在vite.config.ts文件中配置项目的服务数据，配置如下：//此处配置项目服务参数server:{host:"0.0.0.0",//项目运行地址，此处代表localhostport:8888,

2025-05-28 3 RainLight

Vue3基于countUp.js怎么实现数字滚动的插件

countUp简介CountUp.js是一种无依赖项的轻量级JavaScript类，可用于快速创建以更有趣的方式显示数字数据的动画。CountUp可以在两个方向上进行计数，具体取决于传递的开始和结束值。虽然现在市面上基于countUp.js二次封装的Vue组件不在少数，但我个人是不太喜欢使用这些第三方封装的，因为第三方组件的更新频率很难保证，也许作者只是一时兴起封装上传了，并未打算继续维护，如果使用了等于后续根本没有维护性了，所以这种二次封装我推荐自行实现，我们可以通过本次封装熟悉一下vue3,ts的语法

2025-05-25 2 NorthPath

vue3中addRoute路由变化但页面未更新如何解决

解决办法，每次addRoute时深复制组件对象importtimefrom"../views/time"functioncopyObj(obj){if(typeofobj=="object"){if(Array.isArray(obj)){letarr=[];for(letitemofobj){arr.push(Object.assign(copyObj(item)));}returnarr;}elseif(obj==null){returnnull;}else{letobj1={};for(letind

2025-05-24 3 小月亮

怎么将Vue3 Axios拦截器封装成request文件

1、创建一个名为request.js的新文件，并导入Axios：importaxiosfrom'axios';2、创建一个名为request的函数，并将其导出：这将创建一个名为request的函数，并将其设置为具有基本URL的新的Axios实例。要在封装的Axios实例中添加超时设置，可以在创建Axios实例时传递timeout选项。exportconstrequest=axios.create({baseURL:'https://example.com/api',time

2025-05-20 6 OpenWorld

axios Vue3

Vue3侦听器的实现原理是什么

侦听响应式对象前面我们聊到计算属性，它可以自动计算并缓存响应式数据的值。而如果我们仅需要在响应式数据变化时，执行一些预设的操作，就可以使用watch侦听器。我们还是先来实现一个最简单的例子，然后来一点一点扩充它。constdata={foo:1}constobj=reactive(data)watch(obj,()=>{console.log('obj已改变')})在这个例子中，我们使用了watch侦听器，当obj的属性被改变时，控制台应该会打印出obj已改变。基于前面我们对计算属性的实现

2025-05-17 3 SunnyJourney

vue3中的createApp怎么使用

函数定义createApp函数定义在文件packages/runtime-dom/src/index.ts中exportconstcreateApp=((...args)=>{constapp=ensureRenderer().createApp(...args)if(__DEV__){injectNativeTagCheck(app)injectCompilerOptionsCheck(app)}const{mount}=appapp.mount=(containerOrSelector:Element

2025-05-16 3 小月亮

vue3中＜script setup＞和setup函数的区别是什么

是在单文件组件(SFC)中使用组合式API的编译时语法糖。当同时使用SFC与组合式API时该语法是默认推荐。相比于普通的语法，它具有更多优势：更少的样板内容，更简洁的代码。能够使用纯TypeScript声明props和自定义事件。更好的运行时性能(其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。更好的IDE类型推导性能(减少了语言服务器从代码中抽取类型的工作)。以上是vue3官网对的说明，其实＜scriptsetup＞就是setup函数的一个语法糖。一、基本语法setup函数的写法im

2025-05-15 8 若安舟已远

热门文章更多

Photoshop蒙版换证件照背景颜色怎么改？实用操作步骤详解 AutoCAD绘制机械零件三维实体详细教程 AE教程书籍挑选指南：零基础、动效与合成方向实战标准 Photoshop图层合并快捷键是什么？合并盖印及分开图层方法 Photoshop日系调色教程：小清新风格参数与思路

精品专题更多

装机必备

正软商城装机必备专区，精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件，帮助用户快速完成新电脑软件配置。

Windows

正软商城Windows软件专区，汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件，提供软件介绍、系统要求、正版授权及购买下载服务。

PDF教程

正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法，同时介绍常用PDF软件和工具的使用技巧。