vue點(diǎn)擊彈窗自動(dòng)觸發(fā)點(diǎn)擊事件的解決辦法(模擬場(chǎng)景)

更新時(shí)間：2021年05月25日 10:35:25 作者：孫叫獸

本文通過案例場(chǎng)景給大家介紹vue點(diǎn)擊彈窗自動(dòng)觸發(fā)點(diǎn)擊事件的解決辦法，通過兩種方法給大家分享vue 自動(dòng)觸發(fā)點(diǎn)擊事件的處理方法，對(duì)vue自動(dòng)觸發(fā)點(diǎn)擊事件相關(guān)知識(shí)感興趣的朋友一起看看吧

業(yè)務(wù)場(chǎng)景：使用vue +element ui 的el-dialog，點(diǎn)擊彈窗之后，默認(rèn)加載第一個(gè)按鈕的數(shù)據(jù)進(jìn)行初始化。

div

指令：

 // 自動(dòng)觸發(fā)點(diǎn)擊事件
  directives:{
        trigger:{
          inserted(el,binging){
            // console.log("自動(dòng)觸發(fā)事件")
            el.click()
          }
        }
  },

PS：下面看下vue 自動(dòng)觸發(fā)點(diǎn)擊事件

需要，點(diǎn)擊左邊的列表出詳情，但是都需要點(diǎn)擊事件，頁(yè)面進(jìn)來時(shí)，默認(rèn)觸發(fā)點(diǎn)擊事件

方法一，vue自定義指令

  directives:{
    trigger:{
     inserted(el, binging){
        console.log(el.id)
        el.id == 'nav0' ? el.click() : null // 只點(diǎn)擊第一個(gè)，id是在循環(huán)中手動(dòng)添加的
       // $(el).trigger('click')  // 所有都觸發(fā)一次,然后就是最后一個(gè)
      }
    }
  },

用法：

 <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點(diǎn)擊彈窗自動(dòng)觸發(fā)點(diǎn)擊事件的解決辦法(模擬場(chǎng)景)的詳細(xì)內(nèi)容，更多關(guān)于vue自動(dòng)觸發(fā)點(diǎn)擊事件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令
Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
Vue單頁(yè)面應(yīng)用做預(yù)渲染的方法實(shí)例
vue是一個(gè)單頁(yè)面的應(yīng)用,這導(dǎo)致一些爬蟲和百度無法搜索到,如果你想針對(duì)你應(yīng)用的其中某些頁(yè)面進(jìn)行SEO優(yōu)化,讓他們可以被爬蟲和百度搜索到,你可以進(jìn)行預(yù)渲染操作,下面這篇文章主要給大家介紹了關(guān)于Vue單頁(yè)面應(yīng)用做預(yù)渲染的相關(guān)資料,需要的朋友可以參考下
2021-10-10
Vue項(xiàng)目啟動(dòng)后如何在瀏覽器自動(dòng)打開
這篇文章主要介紹了Vue項(xiàng)目啟動(dòng)后如何在瀏覽器自動(dòng)打開問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue3中的render函數(shù)里定義插槽和使用插槽
這篇文章主要介紹了vue3中的render函數(shù)里定義插槽和使用插槽方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
v-show和v-if的區(qū)別?及應(yīng)用場(chǎng)景
這篇文章主要介紹了v-show和v-if的區(qū)別及應(yīng)用場(chǎng)景，vue中v-show與?v-if的作用效果是相同的，都能控制元素在頁(yè)面是否顯示，但是也有一定的區(qū)別，下面文章梳理總結(jié)v-show和v-if的區(qū)別，需要的小伙伴可以參考一下
2022-06-06
在vue中實(shí)現(xiàn)echarts隨窗體變化
這篇文章主要介紹了在vue中實(shí)現(xiàn)echarts隨窗體變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue3 vite如何讀取文件內(nèi)容
這篇文章主要介紹了vue3 vite如何讀取文件內(nèi)容問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-05-05
vue給對(duì)象動(dòng)態(tài)添加屬性和值的實(shí)例
今天小編就為大家分享一篇vue給對(duì)象動(dòng)態(tài)添加屬性和值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
Vue異步請(qǐng)求導(dǎo)致頁(yè)面數(shù)據(jù)渲染錯(cuò)誤問題解決方法示例
這篇文章主要為大家介紹了Vue中異步請(qǐng)求導(dǎo)致頁(yè)面數(shù)據(jù)渲染錯(cuò)誤問題解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
Vue3如何自定義v-permission權(quán)限指令
這篇文章主要為大家詳細(xì)介紹了Vue3如何編寫一個(gè)?v-permission?指令來根據(jù)用戶權(quán)限動(dòng)態(tài)控制元素的渲染,感興趣的小伙伴可以參考一下
2024-12-12