i-view(view UI)中submenu无法添加点击事件的解决办法

iview中的menu很好用,但是有很多需求是,不光点击子菜单需要触发,有时候点击父菜单也是需要触发一些事件的。但是偏偏subMenu添加不了点击事件。
根据官方api


menu整体的触发事件
submenu的api
我们不难发现,submenu确实是没有触发函数的,只有menuitem有。

我在网上找到一些解决办法,感觉不是很贴合我的需求。大体就是F12找到submenu对应的class,然后用类选择器,对所有这种类的element添加click。但是有局限性,假如我是在v-for里面呢?或者需要传v-model里的值呢?

先说menuitem的解决:

<Menu-Item v-if="!item5.fileMenu" :name='index.toString() + "-"' @click.native="leftMenuOnclick(item5.id,false)">
直接onclick,或者@click触发不了,需要在后面加个.native。其实就是对于menuitem,就2种状态,一种是选中,一种是没选中,当我们点击的时候,不就相当于是选中吗,所以加个.native就可以触发了。

submenu的话,也简单

首先看官方的demo是怎样使用submenu的,


官方demo

先看我一开始的尝试


直接放在submenu上,没用

发现并无法触发,然后我F12发现,menu标签会转化成一个ul,而submenu,会转化为一个div


submenu浏览器渲染之后

所以我最后的解决方法是干脆自己包一个div,然后给div加click事件,是不是超级简单,而且在渲染之后,也没有任何区别

            <i-menu width="auto" :theme="leftMenuTheme">
                <!-- first time -->
                <template v-for="(item,index) of leftMenuList">
                    <Submenu :name="index">
                        <template slot="title" >
                            <div @click="leftMenuOnclick(item.id,true)">
                                <i class="ivu-icon ivu-icon-ios-people" style="font-size: 16px;"></i>{{item.name}}
                            </div>
                        </template>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在使用 vue-element-admin 后,我觉得它通过 vue-router 生成导航菜单功能挺有意思的,所...
    七分小熊猫阅读 26,091评论 2 15
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 2,523评论 0 4
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,385评论 0 8
  • 本篇博客源地址 总结: 鼠标事件 1.click与dbclick事件ele.click()ele.click(ha...
    ZombieBrandg阅读 703评论 0 1
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,646评论 2 10