vue3+ts 实现左侧菜单收缩加拖拽功能

最新推荐文章于 2024-02-18 09:53:20 发布
最新推荐文章于 2024-02-18 09:53:20 发布
阅读量1.6k 收藏
点赞数
分类专栏： 前端开发 文章标签： typescript vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uncle_huang/article/details/122061969
版权
本文介绍如何使用 Vue3 和 TypeScript 开发一个具备左侧菜单收缩及拖拽功能的应用。通过实现这一功能，使得菜单在收起和展开时能保持初始状态，提升了用户体验。
摘要由CSDN通过智能技术生成

先看一下效果图：
在这里插入图片描述
开发需求就是左侧菜单支持收缩和拖拽，不管拖拽到哪个位置，收起再展开后，左侧宽度恢复到初始状态。用到的是vue3+ts，这里我只简单写了一下布局，具体代码如下

<template>
  <div class="main-box">
    <div class="header-box">header</div>
了解本专栏 订阅专栏 解锁全文 超级会员免费看
uncle_Huang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue实现展开收缩动画
CaseyWei
03-06 5553
1、实际效果 展开收起效果.gif 2、代码 <!--css--> .box{ height:200px;width: 200px; background-color:black; } .draw-enter-active, .draw-leave-active { transition: all 1s ease; } .draw-enter, .d...
展开收起vue3
最新发布
qq_38210427的博客
05-15 173
【代码】展开收起vue3。
Vue draggable实现从左到右拖拽功能
qq_32184753的博客
07-31 2188
1:安装插件 npm install vuedraggable 2:在需要使用的组件中引入 import draggable from ‘vuedraggable’ 3:注册组件 components:{ draggable } 示例： <div style="height: 1000px;"> <div class="test-left"> <!-- 左侧按钮 --> <draggable v-model="lis.
九、vue3+ts项目框架搭建——顶部左侧按钮折叠菜单效果
xiaoququ的博客
02-18 468
【代码】九、顶部左侧按钮折叠菜单效果。
【Vue3+Vite+TS】2.0 组件一：伸缩菜单
我睡醒刚刚
12-20 104
必备UI组件 伸缩菜单将用到以下几个组件： Container 布局容器 Menu 菜单 组件设计 修改路由： src\router\index.ts import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import Home from '../views/Home/index.vue' impo...
vue列表单项展开收缩功能之this.$refs
宝贝QY的博客
07-26 7143
接受vue框架的小技巧之---this.$ref
vue 拖拽事件和展开收缩事件
qq_32555123的博客
01-13 231
【代码】vue 拖拽事件和展开收缩事件。
vue3+ts实现drag/draggable拖拽任务看板taskboard
07-05
本文将深入探讨如何利用Vue3和ts实现一个具备drag/draggable功能的拖拽任务看板（Taskboard），同时提及与之相关的Gantt图表和JSON编辑器。 首先，Vue3引入了Composition API，它极大地提高了代码的可重用性和可...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
利用vue3+ts实现管理后台（增删改查）
01-18
简单的管理后台基本上就是数据的增删改查。...本文就是利用composition API，将可复用的逻辑抽离到composition API中，并引入ts，实现一个简单的管理后台功能。 利用@vue/cli创建项目 首先需要将 @v
vue3+ts入门（todolist案例）
02-10
- **使用 Vue3 的脚手架工具**：Vue CLI 提供了生成 Vue3 组件和项目模板的功能，简化开发流程。 5. **部署与测试**： - **本地开发**：使用 Vue CLI 的 `serve` 命令启动本地开发服务器，实时预览应用。 - **...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
vue3+ts实现拖拽功能
qq_35181466的博客
04-19 1396
<template> <div class="about"> <h1>拖拽demo</h1> <p id="drag"></p> </div> </template> <script lang="ts"> import { reactive, toRefs, onMounted } from "vue"; export default { name: "about", .
Vue3封装一个左侧可拖拽折叠的侧边栏布局
xiaopiaoliang777的博客
08-14 1351
Vue3封装一个左侧可拖拽折叠的侧边栏布局
基于Vue3实现鼠标按下某个元素进行拖动，实时改变左侧或右侧元素的宽度，以及点击收起或展开的功能
都随它大小便吧
07-28 3941
其原理主要是利用JavaScript中的鼠标事件来控制CSS样式。大致就是监听某个DOM元素的鼠标按下事件，以及按下之后的移动事件和松开事件。在鼠标按下且移动过程中，可实时获得鼠标的X轴坐标的值，通过简单计算，可计算出目标元素的宽度，然后再用CSS赋值就实现该效果了。
vue.draggable+el-menu 实现无限级菜单的拖拽
CSDNDAN的博客
04-18 790
2.因为采用的递归组件的方法，如果使用end事件来完成拖拽的话需要添加一个add事件，因为子组件的draggable如果拖到最外层不是触发的end事件而是add事件，所以我直接采用的sort事件来实现。需要注意的是以下几点：1.draggable最好要绑定v-model的值，因为v-model是用于实现数据的双向绑定，可以将dom元素和vue组件的数据状态同步，当排序改变时，排序的值会响应式更新。：使用v-model绑定变量 scenes，识别需要拖拽的区域，这里将该区域数据绑定到 scenes 变量中。
vue3自定义全局拖拽指令（设置边界）
小多的博客
07-11 568
在 mounted 和 updated 时触发相同行为，而不关心其他的钩子函数。那么你可以通过将这个函数模式实现 自定义全局拖拽指令 directive.ts main.ts 使用
vue实现左侧导航菜单可拖拽改变左侧导航宽度
可可爱爱的你吖的博客
08-26 4733
vue实现左侧导航菜单可拖拽改变左侧导航宽度
使用elementui的el-table时，出现错误：ResizeObserver loop limit exceeded
uncle_Huang的博客
03-12 5501
使用elementui的el-table时，出现错误：ResizeObserver loop limit exceeded。 在网上搜到很多解决方法，最后找到了对自己有效的解决办法。 在el-table里加一行这个就行了。 <el-table-column type="index"></el-table-column> ...
electron + vite + vue3+ ts 实现右键菜单功能
05-17
首先需要安装一些依赖： ```bash npm install electron electron-context-menu vite vue@next vue-router@next @vue/compiler-sfc typescript tslib --save-dev ``` 然后在 `src` 目录下新建 `main.ts` 和 `renderer.ts` 两个文件。 `main.ts` 的内容如下： ```ts import { app, BrowserWindow, Menu } from 'electron'; import path from 'path'; import contextMenu from 'electron-context-menu'; // 创建窗口 function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { // 允许使用 node.js nodeIntegration: true, // 允许使用 Electron 的 remote 模块 enableRemoteModule: true, // 允许在渲染进程中使用上下文菜单 contextIsolation: false, }, }); // 加载页面 win.loadFile(path.join(__dirname, '../renderer/index.html')); // 打开开发者工具 win.webContents.openDevTools(); // 设置窗口菜单 const template = [ { label: '菜单1', submenu: [ { label: '子菜单1', click: () => { console.log('点击了子菜单1'); }, }, { label: '子菜单2', click: () => { console.log('点击了子菜单2'); }, }, ], }, { label: '菜单2', click: () => { console.log('点击了菜单2'); }, }, ]; const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu); } // 当 Electron 初始化完成并准备好创建窗口时调用这个函数 app.whenReady().then(() => { // 注册上下文菜单 contextMenu({ window: BrowserWindow.getFocusedWindow(), showInspectElement: true, }); createWindow(); // 如果所有窗口都关闭了，退出应用 app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); }); // 在 macOS 上，当单击 Dock 图标并且没有其他窗口打开时，重新创建一个窗口 app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); ``` `renderer.ts` 的内容如下： ```ts import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` 接下来在 `src` 目录下新建 `index.html` 文件，并且在里面添加一个 `div` 元素，并且指定它的 `id` 为 `app`。同时在 `body` 元素下添加如下代码： ```html <script src="./renderer.js"></script> ``` 最后在 `package.json` 中添加如下脚本： ```json { "scripts": { "start": "vite", "build": "vite build", "electron": "electron ." } } ``` 现在可以运行 `npm run start` 来启动应用程序，然后运行 `npm run electron` 来启动 Electron 应用程序。现在你应该已经能够看到一个 Electron 窗口，并且它包含一个菜单。如果你右键单击窗口，你应该能够看到一个上下文菜单。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

uncle_Huang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值