快捷導(dǎo)航

淺談Vue.js 關(guān)于頁面加載完成后執(zhí)行一個方法的問題

更新時間：2019年04月01日 11:13:48 作者：ITKouSyou

這篇文章主要介紹了Vue.js 關(guān)于頁面加載完成后執(zhí)行一個方法的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

首先我們會想著在mounted或者created里面加入想要執(zhí)行的方法，但是有的時候會遇到在你執(zhí)行這個方法的時候，頁面還并沒有被渲染完成，所以就會出現(xiàn)這個方法在匹配頁面標(biāo)簽報錯的情況。

解決思路：

1.通過子頁面調(diào)用父頁面的方法，因?yàn)樵谧禹撁骈_始渲染的時候，你的父頁面肯定是已經(jīng)渲染好了的，前提這里的方法中是去找尋父頁面的標(biāo)簽。

2.直接在本頁面監(jiān)視一個參數(shù)，發(fā)現(xiàn)參數(shù)被初始化了，說明頁面也已經(jīng)加載完成，因?yàn)槟愕捻撁嬗玫搅诉@個參數(shù)。

方法1案例：tab頁里的子頁面如果沒有內(nèi)容就隱藏

父頁面代碼

<el-tabs v-model="initTab" type="card">
 <el-tab-pane label="1信息" name="tab1">
  1
 </el-tab-pane>
 <el-tab-pane label="2報告" name="tab2">
  2
 </el-tab-pane>
 <el-tab-pane label="3信息" name="tab3">
  3
 </el-tab-pane>
 <el-tab-pane label="4信息" name="tab4">
  <ziyemian-group @tabShow="tabShow" title="4信息" v-if="detailInfo">
  </ziyemian-group>
 
 </el-tab-pane>
 <el-tab-pane label="5信息" name="tab5">
  5
 </el-tab-pane>
 <el-tab-pane label="其它信息" name="tab6">
  6
 </el-tab-pane>
</el-tabs>
 
import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
 ZiyemianGroup
},
data () {
  return {
    detailInfo: {}，
    initTab：‘tab1'
  }
}
methods: {
 tabShow: (data) => {
  document.getElementsByClassName('el-tabs__item').item(4).style.display = data
 },
}

然后是ZiyemianGroup.vue的代碼，這里主要就是方法調(diào)用，頁面自己搞定

data () {
 return {
  list: []
 }
},
mounted () {
 this.init()
},
methods: {
 init() {
  if (list.length > 0) {
    this.$emit('whiteShow', 'inline')
  } else {
    this.$emit('whiteShow', 'none')
  }
 )
}

list是子頁面的內(nèi)容，這樣如果子頁面沒有內(nèi)容就可以隱藏掉了

方法2案例：我這邊需要tab頁隱藏

<el-tabs v-model="initTab" type="card">
 <el-tab-pane label="1信息" name="tab1">
  1
 </el-tab-pane>
 <el-tab-pane label="2報告" name="tab2">
  2
 </el-tab-pane>
 <el-tab-pane label="3信息" name="tab3">
  3
 </el-tab-pane>
 <el-tab-pane label="4信息" name="tab4">
  <ziyemian-group title="4信息" v-if="detailInfo">
  </ziyemian-group>
 
 </el-tab-pane>
 <el-tab-pane label="5信息" name="tab5">
  5
 </el-tab-pane>
 <el-tab-pane label="其它信息" name="tab6">
  6
 </el-tab-pane>
</el-tabs>
 
import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
 ZiyemianGroup
},
data () {
  return {
    detailInfo: {}，
    initTab：‘tab1'
  }
}
watch: {
 detailInfo: function () {
  this.$nextTick(function () {
   this.tabShow()
  })
 }
},
methods: {
  tabShow () {
    document.getElementsByClassName('el-tabs__item').item(6).style.display = 'none' // 隱藏tab6
  }
}

nextTick方法，意思是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM。

隱藏tab的方法我用了原生js，因?yàn)関ue生成后的頁面和寫的vue頁面有所差別，所以我直接用了最笨的方法進(jìn)行匹配。

以上所述是小編給大家介紹的Vue.js 關(guān)于頁面加載完成后執(zhí)行一個方法的問題詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: