i-view(view UI)中submenu无法增加点击事件的处理办法

作者 : 开心源码 本文共968个字,预计阅读时间需要3分钟 发布时间: 2022-05-14 共360人阅读

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>
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » i-view(view UI)中submenu无法增加点击事件的处理办法

发表回复