el-dropdown-item添加点击事件

2023-03-01 13:53:53 浏览数 (1)

1、问题

Vue引入Element-ui框架,使用其DropDown组件时,发现官网教程并没有给出el-dropdown-item点击事件的使用方法。因此需要自定义点击事件,也就是需要添加原生的点击事件。

2、添加点击事件

使用 @click.native=“”,此时就可以实现点击事件了。

代码语言:javascript复制
<el-dropdown>
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="handleClick('0')">黄金糕</el-dropdown-item>
    <el-dropdown-item @click.native="handleClick('1')">狮子头</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

3、了解一下@click.native

3.1、@click

@click 常见于其用在Vue中的事件绑定,而@实际上是 v-on 的简写,而 v-on 则是对 vue 的事件体系封装之后的 API接口。

3.1、native

native修饰符用于处理DOM原生事件,在本文中由于组件 DropDown并没有封装点击事件,因此需要添加原生的点击事件,因此使用@click.native。

4、扩展@click的其他用法

  • @click.stop: 阻止事件冒泡
  • @click.prevent: 阻止事件的默认行为 (提交事件不再重载页面)
  • @click.capture: 优先触发
  • @click.self: 只有自己能触发,子元素无法触发
  • @click.once: 只能提交一次(
.once

修饰符还能被用到自定义的组件事件上。)

0 人点赞