VUE：侧边弹出栏组件，组件中有树状图，搜索框可筛选树状图节点，可收缩

于 2023-10-18 16:14:14 发布
阅读量335 收藏
点赞数
分类专栏： Vue高阶 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyyyyyyyyyy_9/article/details/133908511
版权
Vue高阶 专栏收录该内容
14 篇文章 7 订阅 ¥9.90 ¥99.00
订阅专栏

作者：CSDN @ _乐多_

本文记录了一个侧边弹出栏组件代码。代码即插即用。

弹出栏中有树状图，搜索框，可收缩。

其中，搜索框可筛选树状图节点。点击右侧小按钮可以收缩弹出框，点击X号也可以收缩弹出框。

请添加图片描述

文章目录

代码依赖element-plus库。且需要下载几个svg图标。

一、组件代码

<template>

  <div class="donate-content-div" :class
了解本专栏 订阅专栏 解锁全文
_乐多_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
在vue项目中引入高德地图及其UI组件的方法
10-18
今天小编就为大家分享一篇在vue项目中引入高德地图及其UI组件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
五分钟完成侧边栏组件
weixin_45311714的博客
09-11 1228
【代码】五分钟完成侧边栏组件。附上完整的侧边栏vue.js代码
vue + element ui 实现侧边栏导航栏折叠收起
qq_44830060的博客
01-20 1万+
首页布局如下 要求点击按钮,将侧边栏收缩, 通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。 methods: { // 点击按钮，切换菜单的折叠与展开 toggleCollapse() { this.isCollapse = !this.isCollapse; }, } 侧边栏代码 <!-- //侧边栏 --> <el-col :span="isCollap
vue---element实现收缩展开的侧边导航栏
热门推荐
maidu_xbd的博客
11-26 1万+
需求描述： 如下图，可收缩、可展开的侧边导航栏，当收缩时，鼠标悬停在一级菜单时，出现二级菜单。 解决方法： 设置标志【isCollapse】来控制展开和收缩图标的显示，当【isCollapse=true】时，侧标导航栏收缩，且标题“通讯录管理”不显示。当【isCollapse=false】时，侧标导航栏展开，且标题“通讯录管理”显示。 在展开和收缩...
vue2+element-ui,el-aside侧边栏容器收缩与展开
im_api的博客
02-16 5992
vue2+element-ui,el-aside侧边栏容器收缩与展开效果
Vue界面添加收缩和展开导航栏图标按钮
qq_54657526的博客
06-09 2201
此时我们考虑到：当点击收缩之后，收缩的图标应该变成展开的图标，点击展开图标之后，边栏会展开。collapseBtnClass:'el-icon-s-fold',//这里写想要的按钮的名称el-icon-s-fold。collapseBtnClass:'el-icon-s-fold',//这里写想要的按钮的名称el-icon-s-fold。this.collapseBtnClass='el-icon-s-unfold'//图标变成展开的图标。this.sideWidth=64//边栏宽度变成64。
vuex结合elementUi实现收缩侧边栏
m0_56658629的博客
01-03 689
vuex
vue处理侧边栏的展开和收起功能
weixin_56056054的博客
04-14 1519
>(第一步:在vuex的state里面定义侧边栏的宽度)->(第二步:引入到Header.vue组件中)->(第三步:在引入到Menu.vue组件中)->(第四步:改变主屏的大小)
elementplus实现左侧菜单栏收缩与展开
黎小小的博客
08-28 5644
Home.vue下包含aside.vue和menu.vue。
Vue项目侧边栏折叠和展开效果应用
weixin_53277030的博客
10-31 1万+
折叠能使项目功能展示更饱满，处理好事件控制逻辑，就能很好的应用菜单栏的折叠和展开效果。
vue组件实现可搜索下拉框扩展
08-27
主要为大家详细介绍了vue组件实现可搜索下拉框的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用vue实现各类弹出框组件
10-16
主要介绍了使用vue实现各类弹出框组件,文中给大家提到了vue中常用的dialog组件的封装，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
基于vue实现可搜索下拉框定制组件
08-27
主要为大家详细介绍了基于vue实现可搜索下拉框定制组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于Vue的图鸟UI组件库设计源码
最新发布
04-06
本项目是一个基于Vue语言开发的图鸟UI组件库，包含296个文件，主要文件类型包括Vue组件、JavaScript脚本、SCSS样式表、图片、微信小程序的wxs脚本、JSON配置文件、Markdown文档、HTML页面和PNG图片。系统设计旨在为...
侧边栏组件(Vue)
weixin_43294560的博客
08-08 1999
从右侧滑入 使用方法: 外部传入draw的键,且键值为true开启 外部监听@changeShow事件,通过将传入的draw值改为false关闭 代码示例: 侧边栏 <template> <transition name='move'> <div class='draw' v-show='draw'> <button @click="goEdit">返回</button> </div&g
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
weixin_52268321的博客
02-26 1万+
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
vue+element-ui实现Dropdown侧边弹出
fantacyqq的博客
07-19 1887
前端新手，需要实现侧边弹出菜单，在element官网找到dropdown，但其中placement中没有侧边弹出的方法，遂尝试手动填入placement=“left-start”，竟然实现了，说明dropdown里是有内置的弹出方向的，记录学习。
（十）VUE侧边菜单栏导航--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
wdyan297的博客
01-23 5733
VUE侧边菜单栏导航设计（1）理解并逐步掌握VUE组件的含义；（2）深入理解VUE单页面应用；（3）初步掌握VUE路由的概念和使用方法。
Vue3+Ts+Vite项目(第九篇)——基于el-menu封装左侧菜单栏组件，element-plus el-menu二次封装
做笔记/记录遇到的前端bug
08-03 5396
Vue3+Ts+Vite项目基于el-menu封装左侧菜单栏组件，实现根据路由列表动态渲染导航菜单，递归实现多级菜单渲染
vue2写一个简单的横向的D3组件treemap树状图
07-20
当然，以下是一个使用Vue 2和D3.js创建简单横向treemap树状图组件的示例代码： ```vue <template> <div ref="chartContainer"></div> </template> <script> import * as d3 from 'd3'; export default { mounted() { // 数据示例 const data = { name: 'Root', children: [ { name: 'A', value: 10 }, { name: 'B', value: 20 }, { name: 'C', value: 15 }, { name: 'D', value: 25 } ] }; // 创建treemap布局 const treemap = d3.treemap() .size([500, 300]) .padding(1); // 构建层次数据 const root = d3.hierarchy(data) .sum(d => d.value) .sort((a, b) => b.value - a.value); // 计算treemap布局 treemap(root); // 创建SVG容器 const svg = d3.select(this.$refs.chartContainer) .append('svg') .attr('width', 500) .attr('height', 300); // 创建矩形元素 const cells = svg.selectAll('g') .data(root.leaves()) .enter() .append('g') .attr('transform', d => `translate(${d.x0},${d.y0})`); cells.append('rect') .attr('width', d => d.x1 - d.x0) .attr('height', d => d.y1 - d.y0) .style('fill', 'steelblue'); cells.append('text') .attr('x', 5) .attr('y', 15) .text(d => d.data.name) .style('fill', 'white'); } }; </script> <style scoped> svg { background-color: #f2f2f2; } </style> ``` 这个组件会创建一个大小为500x300的横向treemap树状图，其中矩形表示数据的层次结构，矩形的大小和颜色表示数据的值。你可以根据需要修改数据和样式。 希望这个简单的示例能帮到你！如果有任何问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值