ElementUI中el-dropdown-item點(diǎn)擊事件無效問題
更新時(shí)間：2023年04月23日 10:13:13 作者：樹洞菇?jīng)?
這篇文章主要介紹了ElementUI中el-dropdown-item點(diǎn)擊事件無效問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
ElementUI中el-dropdown-item點(diǎn)擊事件無效
若直接在el-dropdown-item上添加click事件，點(diǎn)擊后沒有任何反應(yīng)。
在click后添加native修飾符，則可解決問題。
代碼如下：
<el-dropdown> ? ? <span class="user"></span> ? ? <el-dropdown-menu slot="dropdown"> ? ? ? ? <el-dropdown-item @click.native="changePassword">修改密碼</el-dropdown-item> ? ? </el-dropdown-menu> </el-dropdown>
在給Vue組件（el-dropdown-item就是一個(gè)組件）綁定事件的時(shí)候，必須加上navtive修飾符才能生效，navtive可以監(jiān)聽根元素的原生事件
el-dropdown-item添加點(diǎn)擊事件
問題
Vue引入Element-ui框架，使用其DropDown組件時(shí)，發(fā)現(xiàn)官網(wǎng)教程并沒有給出el-dropdown-item點(diǎn)擊事件的使用方法。
因此需要自定義點(diǎn)擊事件，也就是需要添加原生的點(diǎn)擊事件。
添加點(diǎn)擊事件
使用 @click.native=“”，此時(shí)就可以實(shí)現(xiàn)點(diǎn)擊事件了。
<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>了解一下@click.native
@click
@click 常見于其用在Vue中的事件綁定，而@實(shí)際上是 v-on 的簡(jiǎn)寫，而 v-on 則是對(duì) vue 的事件體系封裝之后的 API接口。
native
native修飾符用于處理DOM原生事件，在本文中由于組件 DropDown并沒有封裝點(diǎn)擊事件，因此需要添加原生的點(diǎn)擊事件，因此使用@click.native。
擴(kuò)展@click的其他用法
@click.stop： 阻止事件冒泡@click.prevent： 阻止事件的默認(rèn)行為 （提交事件不再重載頁面）@click.capture： 優(yōu)先觸發(fā)@click.self： 只有自己能觸發(fā)，子元素?zé)o法觸發(fā)@click.once： 只能提交一次（. o n c e .once.once 修飾符還能被用到自定義的組件事件上。）
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何實(shí)現(xiàn)接口統(tǒng)一管理
這篇文章主要介紹了vue如何實(shí)現(xiàn)接口統(tǒng)一管理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue2.0在table中實(shí)現(xiàn)全選和反選的示例代碼
這篇文章主要介紹了vue2.0在table中實(shí)現(xiàn)全選和反選的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Electron相當(dāng)于一個(gè)瀏覽器的外殼，可以把網(wǎng)頁程序嵌入到殼里面，可以運(yùn)行在桌面上的一個(gè)程序，可以把網(wǎng)頁打包成一個(gè)在桌面運(yùn)行的程序。這篇文章主要介紹了electron-vue多顯示屏下將新窗口投放是其他屏幕 ,需要的朋友可以參考下2019-07-07
下面小編就為大家分享一篇Vue cli 引入第三方JS和CSS的常用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了在Vue中實(shí)現(xiàn)添加全局store方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
sass是css的預(yù)處理器,擴(kuò)展了css語言,提供了規(guī)則、變量、混入、選擇器、繼承、內(nèi)置函數(shù)等特性,有助于減少CSS重復(fù)的代碼,節(jié)省開發(fā)時(shí)間,下面這篇文章主要給大家介紹了關(guān)于vue3安裝配置sass的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue子組件created方法不執(zhí)行問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue2.0+Vux搭建一個(gè)完整的移動(dòng)webApp項(xiàng)目的示例
這篇文章主要介紹了Vue2.0+Vux搭建一個(gè)完整的移動(dòng)webApp項(xiàng)目的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
本文通過圖文并茂的形式給大家介紹了Vue組件之自定義事件的功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-02-02