vue點擊彈窗自動觸發(fā)點擊事件的解決辦法(模擬場景)
更新時間：2021年05月25日 10:35:25 作者：孫叫獸
本文通過案例場景給大家介紹vue點擊彈窗自動觸發(fā)點擊事件的解決辦法，通過兩種方法給大家分享vue 自動觸發(fā)點擊事件的處理方法，對vue自動觸發(fā)點擊事件相關(guān)知識感興趣的朋友一起看看吧
業(yè)務(wù)場景：使用vue +element ui 的el-dialog，點擊彈窗之后，默認加載第一個按鈕的數(shù)據(jù)進行初始化。
div
指令：
// 自動觸發(fā)點擊事件
directives:{
trigger:{
inserted(el,binging){
// console.log("自動觸發(fā)事件")
el.click()
}
}
},
PS：下面看下vue 自動觸發(fā)點擊事件
需要，點擊左邊的列表出詳情，但是都需要點擊事件，頁面進來時，默認觸發(fā)點擊事件
方法一，vue自定義指令
directives:{
trigger:{
inserted(el, binging){
console.log(el.id)
el.id == 'nav0' ? el.click() : null // 只點擊第一個，id是在循環(huán)中手動添加的
// $(el).trigger('click') // 所有都觸發(fā)一次,然后就是最后一個
}
}
},
用法：
<span class="nav-item" :id="'nav' + index" v-trigger :class="{'active': item.stage == activeId}" @click="navClick(item)" v-for="(item, index) in nav" :key="item.stage">{{item.stage_name}}</span>
以上就是vue點擊彈窗自動觸發(fā)點擊事件的解決辦法(模擬場景)的詳細內(nèi)容，更多關(guān)于vue自動觸發(fā)點擊事件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue.js每天必學之指令系統(tǒng)與自定義指令,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
vue是一個單頁面的應(yīng)用,這導致一些爬蟲和百度無法搜索到,如果你想針對你應(yīng)用的其中某些頁面進行SEO優(yōu)化,讓他們可以被爬蟲和百度搜索到,你可以進行預渲染操作,下面這篇文章主要給大家介紹了關(guān)于Vue單頁面應(yīng)用做預渲染的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了Vue項目啟動后如何在瀏覽器自動打開問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue3中的render函數(shù)里定義插槽和使用插槽方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
v-show和v-if的區(qū)別?及應(yīng)用場景
這篇文章主要介紹了v-show和v-if的區(qū)別及應(yīng)用場景，vue中v-show與?v-if的作用效果是相同的，都能控制元素在頁面是否顯示，但是也有一定的區(qū)別，下面文章梳理總結(jié)v-show和v-if的區(qū)別，需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了在vue中實現(xiàn)echarts隨窗體變化，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue3 vite如何讀取文件內(nèi)容問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
今天小編就為大家分享一篇vue給對象動態(tài)添加屬性和值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Vue異步請求導致頁面數(shù)據(jù)渲染錯誤問題解決方法示例
這篇文章主要為大家介紹了Vue中異步請求導致頁面數(shù)據(jù)渲染錯誤問題解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
Vue3如何自定義v-permission權(quán)限指令
這篇文章主要為大家詳細介紹了Vue3如何編寫一個?v-permission?指令來根據(jù)用戶權(quán)限動態(tài)控制元素的渲染,感興趣的小伙伴可以參考一下2024-12-12