Tabs 標簽頁

本文轉載自查看原文 2018-03-14 07:22 6371 Navigation組件

分隔內容上有關聯但屬於不同類別的數據集合。

基礎用法

基礎的、簡潔的標簽頁。

Tabs 組件提供了選項卡功能，默認選中第一個標簽頁，你也可以通過 value 屬性來指定當前選中的標簽頁。

 1 <template>
 2   <el-tabs v-model="activeName" @tab-click="handleClick">
 3     <el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>
 4     <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
 5     <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
 6     <el-tab-pane label="定時任務補償" name="fourth">定時任務補償</el-tab-pane>
 7   </el-tabs>
 8 </template>
 9 <script>
10   export default {
11     data() {
12       return {
13         activeName: 'second'
14       };
15     },
16     methods: {
17       handleClick(tab, event) {
18         console.log(tab, event);
19       }
20     }
21   };
22 </script>

View Code

選項卡樣式

選項卡樣式的標簽頁。

只需要設置 type 屬性為 card 就可以使選項卡改變為標簽風格。

 1 <template>
 2   <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
 3     <el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>
 4     <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
 5     <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
 6     <el-tab-pane label="定時任務補償" name="fourth">定時任務補償</el-tab-pane>
 7   </el-tabs>
 8 </template>
 9 <script>
10   export default {
11     data() {
12       return {
13         activeName2: 'first'
14       };
15     },
16     methods: {
17       handleClick(tab, event) {
18         console.log(tab, event);
19       }
20     }
21   };
22 </script>

View Code

卡片化

卡片化的標簽頁。

將type設置為border-card。

1 <el-tabs type="border-card">
2   <el-tab-pane label="用戶管理">用戶管理</el-tab-pane>
3   <el-tab-pane label="配置管理">配置管理</el-tab-pane>
4   <el-tab-pane label="角色管理">角色管理</el-tab-pane>
5   <el-tab-pane label="定時任務補償">定時任務補償</el-tab-pane>
6 </el-tabs>

View Code

位置

可以通過 tab-position 設置標簽的位置

自定義標簽頁

可以通過具名 slot 來實現自定義標簽頁的內容

1 <el-tabs type="border-card">
2   <el-tab-pane>
3     <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
4     我的行程
5   </el-tab-pane>
6   <el-tab-pane label="消息中心">消息中心</el-tab-pane>
7   <el-tab-pane label="角色管理">角色管理</el-tab-pane>
8   <el-tab-pane label="定時任務補償">定時任務補償</el-tab-pane>
9 </el-tabs>

View Code

動態增減標簽頁

增減標簽頁按鈕只能在選項卡樣式的標簽頁下使用

 1 <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
 2   <el-tab-pane
 3     :key="item.name"
 4     v-for="(item, index) in editableTabs"
 5     :label="item.title"
 6     :name="item.name"
 7   >
 8     {{item.content}}
 9   </el-tab-pane>
10 </el-tabs>
11 <script>
12   export default {
13     data() {
14       return {
15         editableTabsValue: '2',
16         editableTabs: [{
17           title: 'Tab 1',
18           name: '1',
19           content: 'Tab 1 content'
20         }, {
21           title: 'Tab 2',
22           name: '2',
23           content: 'Tab 2 content'
24         }],
25         tabIndex: 2
26       }
27     },
28     methods: {
29       handleTabsEdit(targetName, action) {
30         if (action === 'add') {
31           let newTabName = ++this.tabIndex + '';
32           this.editableTabs.push({
33             title: 'New Tab',
34             name: newTabName,
35             content: 'New Tab content'
36           });
37           this.editableTabsValue = newTabName;
38         }
39         if (action === 'remove') {
40           let tabs = this.editableTabs;
41           let activeName = this.editableTabsValue;
42           if (activeName === targetName) {
43             tabs.forEach((tab, index) => {
44               if (tab.name === targetName) {
45                 let nextTab = tabs[index + 1] || tabs[index - 1];
46                 if (nextTab) {
47                   activeName = nextTab.name;
48                 }
49               }
50             });
51           }
52           
53           this.editableTabsValue = activeName;
54           this.editableTabs = tabs.filter(tab => tab.name !== targetName);
55         }
56       }
57     }
58   }
59 </script>

View Code

自定義增加標簽頁觸發器

 1 <div style="margin-bottom: 20px;">
 2   <el-button
 3     size="small"
 4     @click="addTab(editableTabsValue2)"
 5   >
 6     add tab
 7   </el-button>
 8 </div>
 9 <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
10   <el-tab-pane
11     v-for="(item, index) in editableTabs2"
12     :key="item.name"
13     :label="item.title"
14     :name="item.name"
15   >
16     {{item.content}}
17   </el-tab-pane>
18 </el-tabs>
19 <script>
20   export default {
21     data() {
22       return {
23         editableTabsValue2: '2',
24         editableTabs2: [{
25           title: 'Tab 1',
26           name: '1',
27           content: 'Tab 1 content'
28         }, {
29           title: 'Tab 2',
30           name: '2',
31           content: 'Tab 2 content'
32         }],
33         tabIndex: 2
34       }
35     },
36     methods: {
37       addTab(targetName) {
38         let newTabName = ++this.tabIndex + '';
39         this.editableTabs2.push({
40           title: 'New Tab',
41           name: newTabName,
42           content: 'New Tab content'
43         });
44         this.editableTabsValue2 = newTabName;
45       },
46       removeTab(targetName) {
47         let tabs = this.editableTabs2;
48         let activeName = this.editableTabsValue2;
49         if (activeName === targetName) {
50           tabs.forEach((tab, index) => {
51             if (tab.name === targetName) {
52               let nextTab = tabs[index + 1] || tabs[index - 1];
53               if (nextTab) {
54                 activeName = nextTab.name;
55               }
56             }
57           });
58         }
59         
60         this.editableTabsValue2 = activeName;
61         this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
62       }
63     }
64   }
65 </script>

View Code

Tabs Attributes

參數	說明	類型	可選值	默認值
type	風格類型	string	card/border-card	—
closable	標簽是否可關閉	boolean	—	false
addable	標簽是否可增加	boolean	—	false
editable	標簽是否同時可增加和關閉	boolean	—	false
value	綁定值，選中選項卡的 name	string	—	第一個選項卡的 name
tab-position	選項卡所在位置	string	top/right/bottom/left	top

Tabs Events

事件名稱	說明	回調參數
tab-click	tab 被選中時觸發	被選中的標簽 tab 實例
tab-remove	點擊 tab 移除按鈕后觸發	被刪除的標簽的 name
tab-add	點擊 tabs 的新增按鈕后觸發	—
edit	點擊 tabs 的新增按鈕或 tab 被關閉后觸發	(targetName, action)

Tab-pane Attributes

參數	說明	類型	可選值	默認值
label	選項卡標題	string	—	—
disabled	是否禁用	boolean	—	false
name	與選項卡 activeName 對應的標識符，表示選項卡別名	string	—	該選項卡在選項卡列表中的順序值，如第一個選項卡則為'1'
closable	標簽是否可關閉	boolean	—	false

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue tabs標簽頁的使用 antd源碼分析之——標簽頁（tabs 3.Tabs的滾動效果） elementUI 使用Tabs 標簽頁的巨坑 Bootstrap之javascript插件---Togglable tabs（標簽頁）原生JavaScript寫出Tabs標簽頁 element ui tabs標簽頁動態增加標簽頁，標簽頁引用組件 Vue使用v-for 循環生成tabs 標簽頁 React Antd Tabs標簽頁切換緩存問題 antd源碼分析之——標簽頁（tabs 1.組件結構） vue element-ui Tabs 標簽頁實現【更多】功能