Vue.js中頁面加載完成后執(zhí)行一個(gè)方法的示例分析

這篇文章給大家分享的是有關(guān)Vue.js中頁面加載完成后執(zhí)行一個(gè)方法的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

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

解決思路：

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

2.直接在本頁面監(jiān)視一個(gè)參數(shù)，發(fā)現(xiàn)參數(shù)被初始化了，說明頁面也已經(jīng)加載完成，因?yàn)槟愕捻撁嬗玫搅诉@個(gè)參數(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報(bào)告" 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報(bào)告" 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ù)之后立即使用這個(gè)方法，獲取更新后的 DOM。

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

感謝各位的閱讀！關(guān)于“Vue.js中頁面加載完成后執(zhí)行一個(gè)方法的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！