首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

记一个“奇葩”需求的实现

1、前言 我们这边没有专门的产品经理,UI对产品的设计基本具有决定权,说实话,是有那么一点可怖的(前后改了很多次,差一点就改回原版了,我自己都觉得不好意思了)。...2、需求: 导航菜单(el-menu组件)竖向展示的 鼠标移入一级菜单展示下面的子菜单,移出则收起来(手风琴模式,正常状态下只保持一个菜单处于展开状态,手动鼠标悬浮展开的不算) 选中某个子菜单时高亮对应的一级菜单...(只能自己修改了) unique-opened 参数可以控制是否只保持一个子菜单展开,但是在没有子菜单的情况下失效(需要手动修改) 4、思路分析: 导航菜单使用递归el-submenu组件实现...) 只保持一个菜单处于展开状态 先配置 unique-opened 参数为 false ,以保证 openedMenus 只有一个( openedMenus 是el-menu内部维护的属性, 可以自行打印看一下...$emit('handleOpen', this.basePath) } } menuLeave() { // 存在子菜单,并且不是打开状态的菜单,鼠标离开的时候需要合起来 if (!

71510

Spring Boot+Vue3 动态菜单实现思路梳理

整体上,可以点击的菜单的 path 都是父菜单的 path + 子菜单的 path,如果菜单项有父有子,那就正常拼接就行了;如果只有一个子菜单,那么父菜单的 path 就是 /;如果是一个外链,那就只有父菜单的...hasOneShowingChild 主要是判断这个菜单项是否只有一个需要渲染的子菜单,如果有多个子菜单,但是大部分都是隐藏,只有一个需要渲染出来,那也算只有一个子菜单,如果一个菜单项都没有子菜单,那也算一个子菜单...在判断的过程中,将唯一需要渲染的菜单的数据赋值给 onlyOneChild 变量,那么最终,如果当前菜单项只有一个子菜单,且这个子菜单没有子菜单(或者有子菜单但是子菜单不用显示),并且当前菜单也不是必须要渲染的...如果当前组件是一级菜单并且是 M 型并且不是外链,那么就在原有的 path 上加上 / 前缀(对应菜单 1 的一级菜单的 path 情况)。d....如果不是一级菜单(是一个子菜单),并且是一个在当前系统展示的外链,那么就使用 InnerLink 这个组件(这个组件中有一个 iframe 标签可以把外链展示出来,如菜单 4 的子菜单情况)。d.

1.2K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Chrome设置断点的各种姿势

    但如果遇到一些特殊情况,断点添加起来不是那么的舒服的时候要肿么办呢? 比如说我写了一个循环,该循环会执行10次,可是我发现程序在第8次执行时的结果并不是我想要的。...禁用断点的方式,选择菜单栏中的Disable breakpoint 或者直接在设置了断点的行号上单击即可。 或者我们也可以通过debugger模块来统一管理所有的断点。...以及一些对断点的其他操作也可以通过右键菜单来实现,禁用激活所有的断点之类的。 ?...同时我们还可以通过debugger模块来管理所有的DOM断点, 可以看到所有的DOM断点,以及他们所监听的类型, 也可以进行一键删除之类的操作。 ?...点击➕新增一个断点,我们可以选择输入一个链接地址,当一个XHR请求的链接与所输入的值匹配时,便会中断进程进入断点。 ? 或者我们可以选择直接回车,监听所有的XHR请求 ?

    16.1K80

    【译】W3C WAI-ARIA最佳实践 -- 表单

    当用户激活菜单中的选项时,菜单通常会关闭,除非是打开子菜单。 持续可见的菜单是 menubar。...子菜单,也称为弹出菜单,是具有 menu 角色的元素。 4. 除了需要注意的情况外,通过menubutton打开的菜单与从菜单栏打开的菜单表现一致。...包含在菜单中的项目是包含menu或menubar的子元素,并且具有一下任意角色: menuitem menuitemcheckbox menuitemradio 如果激活一个 menuitem 会打开一个子菜单...一个子菜单的菜单元素被它的父级 menuitem 包含或拥有。 父级menu的aria-haspopup 设置为 true。...WAI-ARIA角色,状态和属性 按钮具有的角色 button。 button 有一个可访问的标签 默认情况下,可访问名称是从按钮元素内部的所有内容计算得来。

    8.3K30

    Sketch 插件开发官方文档合集插件基础您的第一个插件开发环境调试ActionAPI发布插件插件捆绑插件,脚本和命令插件位置更多关于CocoaScriptSketchTool参考资源

    在这里,我们展示Sketch可扩展性文档的概要以及如何快速构建您的第一个Sketch插件。 如果您只想使用现有的插件,请参阅插件目录。 你可以用插件做什么?...我如何注册我的插件来“聆听”一个操作? 简单:你只需在manifest.json你的插件已有的文件中添加一个处理程序。...将此文件进一步解压缩,以下是支持的密钥及其用途: name 这个插件的名称。默认情况下,它将用作插件菜单命令出现的子菜单的名称。 description 描述此插件的命令(或命令)所做的字符串。...它在名为“My Plugin Menu”的菜单中定义了三个命令。菜单的前两项对应于插件的两个命令,但第三项是名为“My Plugin Submenu”的子菜单。...Alt,方法是打开插件菜单并选择“显示插件文件夹”。

    6.4K90

    【机组】单元模块的软件简介和安装

    4.2 查看菜单 如图所示的查看菜单,该菜单项包含LCPT显示有关的操作,包括哪个窗口在打开,状态栏的显示等。...1、数据区窗口:该菜单项包括2个子菜单,分别是程序空间窗口和微指令空间窗口,点选程序空间窗口,出现一个程序代码窗口,这个窗口中是指令的二进制代码,点击鼠标右键,选择上下文菜单,使得窗口内容可修改,可直接修改二进制代码...4.8 LCPT软件子窗口描述 LCPT软件总共包括如图所示7个子窗口,分别是:程序调试窗口,源代码编辑窗口,程序结构图子窗口,程序指令空间窗口,微指令空间窗口,历史窗口和信号状态窗口。...另一种综合实验,主要由软件完成,后面有详细的叙述。 6.1 启动LCPT 用户双击桌面上的LCPT软件的图标,即可直接进入本软件。软件的主界面如图5-13所示。...输入完毕,选择“文件—另存为”菜单项,把该文件保存为demo.asm。因为编译器支持长文件名,用户也可以把该文件保存在如“我的文档”之类的目录夹中。用户可以直接选择“文件—打开”菜单项打开该文件。

    13010

    通过案例带你轻松玩转JMeter连载(57)

    通过右键在弹出菜单中选择“添加->逻辑控制器->交替控制器”,如图4所示。...Interleave across threads:如果选中,交替控制器将在每个循环迭代的每个子控制器之间交替,但会跨越所有线程。 打开本书的配套程序Interleave.jmx。...图12 随机控制器 忽略子控制器:如果选中,随机控制器将像处理单个请求元素一样处理子控制器,并且一次只允许每个控制器一个请求。 打开本书的配套代码,random.jmx。运行,每次的结果是随机的。...如图13所示。 图13 random.jmx及运行3次后的结果 1.7随机顺序控制器 随机顺序控制器很像一个简单的控制器,因为它最多执行一次每个子元素,但是节点的执行顺序是随机的。...通过右键在弹出菜单中选择“添加->逻辑控制器->随机控制器”,如图14所示。 图14 随机顺序控制器 打开本书的配套代码,randomOrder.jmx。运行,每次的结果是随机的。如图15所示。

    28720

    Vue 里,多级菜单要如何设计才显得专业?

    路由设计 有的小伙伴做过 vhr,知道 vhr 里的动态菜单实现方式,松哥和大家一样,也是在不断学习不断进步中,今天我想和大家探讨 TienChin 项目中动态菜单的实现方案,看看是否是一种更佳的解决方案...alwaysShow:如果这个属性设置为 false,那么当当前菜单只有一个子菜单的时候,默认情况下就只会显示子菜单,而忽略父菜单(如 1.1 小节所述),但是如果将该属性设置为 true,则无论当前菜单有几个子菜单...再来看第二个角色管理这个菜单项,由于它的父菜单中只有一个子菜单项,并且父菜单中也没有 alwaysShow 属性,所以这个菜单项在最终展示的时候,就只展示里边的角色管理,父菜单则不会展示出来(正好,生成的...点击外链,在当前项目中打开一个新的选项卡,选项卡中展示新的内容。 对于第一种情况我就不和大家演示了,对于第二种情况,我截个图给大家看下: 就是在当前项目的选项卡中,展示一个外部链接的内容。...,在菜单渲染的时候,也是只渲染一个子菜单。

    1.1K20

    优秀的网站加速插件 – WP rocket详细设置教程

    actions 有三个子菜单 Remove all cached files 清除所有的缓存文件,需要的时候点击 Start cache preloading 开始预加载缓存,需要的时候点击 Purge...,取消相关设置 这里面有三个菜单 Basic settings 基本设置里面有三个子菜单 minfiy html 压缩html网页 Combine Google Fonts files 合并google...字体文件 Remove query strings from static resources删除资源的查询字符串 CSS files有2个子菜单 Minify CSS files 压缩CSS文件大小...,如果有的话就填到下面的框里面 Cache Query String(s) 缓存查询的字体串,如果有的话就填到下面的框里面 对于企业网站,一般是没有特别需要设置的,所以以上的菜单我都是留空的。...分析代码的浏览器缓存,需要就打开 varnish是一种服务器上面的缓存软件,很少人用到,不用管 Rocket Add-ons 这个是cloudflare的扩展功能,如果你使用了cloudflare的CDN

    1.8K30

    看我如何躺在床上黑掉自家智能电视

    转载来自:FreeBuf.COM 编译:Alpha_h4ck 那是一个慵懒的夜晚,经过了一天忙碌的工作之后,我只想躺在床上静静地看会儿电视。...在用手机Google了一番之后,我发现这个牌子的智能电视有一个控制代码可以打开隐藏菜单。 接下来, 我通过远程控制在电视的设置菜单中输入了这段控制代码,然后屏幕左侧便弹出了一个菜单。...除此之外,还有一个名叫“info”(信息)的选项,打开它之后我发现了一件非常有意思的事情:我可以给我家的智能电视设置一个名字。...智能电视中的安全漏洞 如果你也是信息安全从业者,那么你可能会不由自主地在其他地方测试你平时所使用的payload,可以是路由器Web接口的一个GET参数,也可以是你打印机的控制面板,而我现在遇到的是一台智能电视...更重要的是,反向Shell可以绕过所有的防火墙规则(阻止进入的连接)。但是在此之前,我还需要更加深入地了解这台智能电视。

    89190

    Windows常用命令一览表

    虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行安全、稳定,有的用户还在使用,所以一般Windows 的各种版本都与其兼容,用户可以在Windows...Enter执行活选项动或按钮所对应的命令。 空格键如果活选项动是复选框,则选中或清除该复选框。 箭头键活选项动是一组选项按钮时,请选中某个按钮。 F1显示帮助。 F4显示当前列表中的项目。...F4显示“我的电脑”和“Windows资源管理器”中的“地址”栏列表。 Shift+F10显示所选项的快捷菜单。 Alt+空格键显示当前窗口的“系统”菜单。...右箭头键打开右边的下一菜单或者打开子菜单。 左箭头键打开左边的下一菜单或者关闭子菜单。 F5刷新当前窗口。 BackSpace在“我的电脑”或“Windows资源管理器”中查看上一层文件夹。...左箭头键当前所选项 处于展开状态时折叠该项,或选定其父文件夹。 右箭头键当前所选项处于折叠状态时展开该项,或选第一个子文件夹

    1.1K10

    C#学习笔记—— 常用控件说明及其属性、事件

    菜单项有的是变灰显示的,表示该菜单项当前是被禁止使用的。...有的菜单项的提示文字中有带下划线的字母,该字母称为热键(或访问键),若是顶层菜单,可通过按“ALT+热键”打开该菜单,若是某个子菜单中的一个选项,则在打开子菜单后直接按热键就会执行相应的菜单命令。...有的菜单项后面有一个按键或组合键称快捷键,在不打开菜单的情况下按快捷键,将执行相应的命令。在图 10-9 中,【保存文件】菜单项是加粗显示的,该菜单项称为默认项。...MDI程序中的应用程序窗口称为父窗口,应用程序内部的窗口称为子窗口。虽然 MDI应用程序可以具有多个子窗口, 但是每个子窗口却只能有一个父窗口。此外,处于活动状态的子窗口最大数目是 1。...一个子窗口在功能上可能与父窗口的其他子窗口不同,例如,一个子窗口可能用于编辑图像,另一个子窗口可能用于编辑文本,第 3 个子窗口可以使用图形来显示数据,但是所有的窗口都属于相同的MDI父窗口。

    9.9K20

    Windows常用命令一览表

    [TOC] 0x00 快速入门 描述:CMD是command的缩写.即命令行 虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行安全、稳定,有的用户还在使用...Enter执行活选项动或按钮所对应的命令。 空格键如果活选项动是复选框,则选中或清除该复选框。 箭头键活选项动是一组选项按钮时,请选中某个按钮。 F1显示帮助。 F4显示当前列表中的项目。...F4显示“我的电脑”和“Windows资源管理器”中的“地址”栏列表。 Shift+F10显示所选项的快捷菜单。 Alt+空格键显示当前窗口的“系统”菜单。...右箭头键打开右边的下一菜单或者打开子菜单。 左箭头键打开左边的下一菜单或者关闭子菜单。 F5刷新当前窗口。 BackSpace在“我的电脑”或“Windows资源管理器”中查看上一层文件夹。...左箭头键当前所选项 处于展开状态时折叠该项,或选定其父文件夹。 右箭头键当前所选项处于折叠状态时展开该项,或选第一个子文件夹

    2.6K32

    Unity Odin从入门到精通(二):创建编辑器窗口「建议收藏」

    大家好,又见面了,我是你们的朋友全栈君。 前言:开发者可以使用Odin来快速地创建编辑器窗口,从而更加高效的组织项目中的数据。...3.16.ChildMenuItems:获取菜单项的子菜单项列表。 3.17.Toggled:菜单项的切换状态。其中,true表示展开状态,false表示收缩状态。...3.6.EnumerateTree(Action action):使用深度优先搜索算法来将根菜单项下面的每一个子菜单项都以参数的形式传递给指定的回调函数。...:否)包含根菜单项参数来将菜单树下面满足条件的每一个子菜单项都以参数的形式传递给指定的回调函数。...然后当该菜单项具有的对象为空或者类型不为T的话就直接跳过;否则就将该菜单项具有的对象作为参数来调用getIcon参数值代表的委托,进而获取一个图标实例。

    3.7K30

    接口测试平台代码实现9:菜单常显

    把菜单作为后台唯一能返回的html,也就是唯一的render函数内的那个html参数。然后在菜单welcome.html 中 把其他各个页面都当作一个子页面 一个来引入。...进行思考:后台以后所有的函数,返回的renede函数中的html 都是welcome.html菜单了,那么自己本身的页面要怎么传入呢?这里就需要我们再加一个参数,来作为真正要访问的页面html了。...现在让我们来修改home函数,因为现在除了child函数外,所有的后台函数都要返回的是welcome.html,而原来的真正目标页面home.html则变成了区区字典里的一个值,它的key是 whichHTML...我们打开home.html,发现我们设置居中的属性在body中,但是作为一个子页面加入了welcome.html后,body中的css设置被无视了 既然body不行了,那我弄个div 装这些东西吧,div...一切正常了~ 之后的所有页面,都会和home.html的出现形势一样,都是作为子页面嵌入到welcome.html这个菜单页面中去。后面我就不会再详细关于这里的细节了。 好了今天分享到这里了。

    84320

    【原型设计】如何利用Axure实现下拉子菜单?

    在本次的下拉子菜单功能实现中,我们主要用到了动态面板(当然不用动态面板也能实现,只是效果和效率上没有那么好),动态面板是Axure中的一款高级组件,可以有效帮助我们实现隐藏/显示、滑动、拖动、状态切换等效果...我们先来看一下最终效果图,此示例主要靠动态面板的状态切换来实现子菜单的下拉和收起的效果: ? 下面我们一起来看下实现的过程: Step 1 从元件库中拉取3个动态面板到画布中,按如下图示进行排列。...Step 3 双击第一个状态【菜单收起】,进入该状态的编辑中,添加一个矩形并输入菜单的名字【模板管理】。 ?...Step 4 重新双击动态面板打开状态管理页面,双击第二个状态【菜单下拉】,把第一个状态的矩形框负责过来,同时增加几个子菜单用的小矩形框,并且填入菜单名。 ?...Step 12 截止目前的配置,已经完成了第一个菜单的下拉效果了:鼠标点击【模板管理菜单】会把子菜单展开,鼠标移出时,子菜单则自动收回。 ?

    5.2K20

    WinForm企业应用框架设计【三】框架窗体设计;动态创建菜单;

    最上面的Panel是存放顶级菜单用的 (top menu) 最下面的panel是存放状态信息和系统版本用的 左边的Panel又分为两个panel 上面的是sub menu header  下面的是sub...menu 当点击一个top menu之后,sub menu中将出现所有此top menu下的子菜单 sub menu header就是这个top menu的名字 (因为我们的top menu没有选中状态...;所以这里做一个sub menu header;让用户知道他点的是哪个顶菜单;sub menu就有选中状态了) 右侧的Panel也分为两个Panel   上面的是tabs   下面的是child form...   tabs是为了存放用户打开过的业务窗体的标题;当用户点击某个tab,将激活该窗体(在child form中显示)   child form是当前正在操作的业务窗体   (这里有例子会容易理解一些...SubMenuP.Controls.Add(ctl); } } /// /// 创建一个子菜单

    92530

    Android 酷炫自定义 View:高仿 QQ 窗帘菜单

    (2)获取子 View 通过上面的分析我们知道一共有三个子 View:左侧菜单、中间主体、右侧菜单,但是这三个子 View 不一定全有,如果用户只配置了左侧菜单,那右侧菜单子 View 就不存在。...if (左右菜单都有) { 第0个子View是左侧菜单 第1个子View是中间主体 第2个子View是右侧菜单 } else if (只有左侧菜单) { 第0个子View...是左侧菜单 第1个子View是中间主体 } else if (只有右侧菜单) { 第0个子View是中间主体 第1个子View是中间主体 } 首先我们要定义三种菜单类型常量,代表上面三种菜单类型...获取到了三个子 View,下面就要设置子 View 的宽度。...这里需要两个判断条件:菜单是否打开、是否点击在中间主体区域。 菜单是否打开很简单,我们设置一个变量 isOpen,每次打开菜单置为 true,关闭菜单置为 false。

    85910
    领券