vue中el-tab如何點(diǎn)擊不同標(biāo)簽觸發(fā)不同函數(shù)的實(shí)現(xiàn)
更新時(shí)間：2024年03月28日 09:14:15 作者：聰明小蘿卜
el-tab本身的功能是點(diǎn)擊之后切換不同頁(yè),本文主要介紹了vue中el-tab如何點(diǎn)擊不同標(biāo)簽觸發(fā)不同函數(shù)的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
介紹
el-tab本身的功能是點(diǎn)擊之后切換不同頁(yè)，但是我希望點(diǎn)擊不同標(biāo)簽就觸發(fā)不同頁(yè)
代碼實(shí)現(xiàn)
<template>
<el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane label="User" name="User">User</el-tab-pane>
<el-tab-pane label="Config" name="Config">Config</el-tab-pane>
</el-tabs>
</template>
<script>
export default{
data() {
return {
clickedTabs: {//這里是希望函數(shù)只被調(diào)用一次
'User': false,
'Config': false,
},
}
},
methods: {
function1(){console.log('function1 was called')},
function2(){console.log('function2 was called')},
handleClick(tab, event) {
if (!this.clickedTabs[tab.props.name]) {//這里是希望函數(shù)只被調(diào)用一次
console.log('Clicked tab name: ' + tab.props.label);
this.clickedTabs[tab.props.name] = true;//這里是希望函數(shù)只被調(diào)用一次
// 根據(jù)tab的名字執(zhí)行相應(yīng)的操作
switch (tab.props.name) {
case "User":
console.log('function1 BEGIN');
this.function1();
break;
case "Config":
console.log('function2 BEGIN');
this.function2();
break;
}
}
else {
console.log(tab.props.name + ' tab was already clicked.');
}
},
}
}
</script>handleClick里面通過(guò)if來(lái)使得點(diǎn)擊標(biāo)簽調(diào)用函數(shù)只被調(diào)用一次，如果不需要這個(gè)操作可以把相關(guān)代碼注釋掉，只留下switch函數(shù)。
到此這篇關(guān)于vue中el-tab如何點(diǎn)擊不同標(biāo)簽觸發(fā)不同函數(shù)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue el-tab點(diǎn)擊標(biāo)簽觸發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
當(dāng)vue路由變化時(shí),改變導(dǎo)航欄的樣式方法
今天小編就為大家分享一篇當(dāng)vue路由變化時(shí),改變導(dǎo)航欄的樣式方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue中前端代理跨域問(wèn)題實(shí)例總結(jié)
前后端分離進(jìn)行項(xiàng)目開(kāi)發(fā),跨域問(wèn)題不可避免,下面這篇文章主要給大家介紹了關(guān)于vue中前端代理跨域問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
VUE v-model表單數(shù)據(jù)雙向綁定完整示例
這篇文章主要介紹了VUE v-model表單數(shù)據(jù)雙向綁定,結(jié)合完整實(shí)例形式分析了vue.js實(shí)現(xiàn)表單數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
VUE組件中的 Drawer 抽屜實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE組件 之 Drawer 抽屜 ，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vuecli+AXdownload下載組件封裝?+css3下載懸浮球動(dòng)畫效果
當(dāng)觸發(fā)下載功能的時(shí)候,會(huì)觸發(fā)一個(gè)下載動(dòng)畫,下載懸浮球會(huì)自動(dòng)彈出,并且閃爍提示有新的下載任務(wù)直到下載任務(wù)完場(chǎng)提示,接下來(lái)通過(guò)本文介紹vuecli+AXdownload下載組件封裝?+css3下載懸浮球動(dòng)畫效果,需要的朋友可以參考下2024-05-05
在Vue 3中,Provide和Inject是一對(duì)用于組件間數(shù)據(jù)傳遞的API,通常用于父組件向其子組件傳遞數(shù)據(jù),但并不通過(guò)props的方式,本文將深入探討Provide和Inject的工作原理,并通過(guò)示例代碼幫助你理解如何在你的Vue應(yīng)用中使用它們,需要的朋友可以參考下2025-02-02
Vue中props組件和slot標(biāo)簽的區(qū)別
props?和?slot?在?Vue?中的作用略有不同，props?更多地用于父子組件之間的數(shù)據(jù)傳遞，而?slot?則更多地用于組件的復(fù)用和擴(kuò)展。感興趣的同學(xué)可以參考閱讀2023-04-04
這篇文章主要介紹了vue之計(jì)算屬性的緩存computed的用法解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
基于Vue.js與WordPress Rest API構(gòu)建單頁(yè)應(yīng)用詳解
這篇文章主要介紹了基于Vue.js與WordPress Rest API構(gòu)建單頁(yè)應(yīng)用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
在Vue3項(xiàng)目中使用VueCropper裁剪組件實(shí)現(xiàn)裁剪及預(yù)覽效果
這篇文章主要介紹了在Vue3項(xiàng)目中使用VueCropper裁剪組件（裁剪及預(yù)覽效果）,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07