Element UI学习5--Tabs 标签页

朱雀 2023-01-07 14:29 432阅读 0赞

在很多网页中都运用了标签页，也就是选项卡的功能。

之前介绍了用 jquery和 vant组件实现tab栏切换的方法，接下来介绍一下Element UI中Tabs 标签页的使用。

## 1、基础用法 ##

示例如下：

<template>
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="推荐" name="first">推荐</el-tab-pane>
                <el-tab-pane label="百货" name="second">百货</el-tab-pane>
                <el-tab-pane label="食品" name="third">食品</el-tab-pane>
                <el-tab-pane label="水果" name="fourth">水果</el-tab-pane>
                <el-tab-pane label="电器" name="fifth">电器</el-tab-pane>
                <el-tab-pane label="运动" name="sixth">运动</el-tab-pane>
            </el-tabs>
        </div>
    </template>
    <script>
      export default { 
        data() { 
          return { 
            activeName: 'first'
            // 默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。
          };
        },
        methods: { 
          handleClick(tab, event) { 
            console.log(tab, event);
          }
        }
      };
    </script>

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]

## 2、选项卡样式 ##

设置 type 属性

**1、type="card"**

如图：  
![在这里插入图片描述][20210118112430246.PNG_pic_center]  
**2、type=“border-card” 卡片化**

如图·：  
![在这里插入图片描述][20210118112649545.PNG_pic_center]

## 3、改变位置 ##

可以通过 tab-position 设置标签的位置  
tabPosition=“left|right|top|bottom”

<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
                <el-radio-button label="top">top</el-radio-button>
                <el-radio-button label="right">right</el-radio-button>
                <el-radio-button label="bottom">bottom</el-radio-button>
                <el-radio-button label="left">left</el-radio-button>
    </el-radio-group>
    <el-tabs :tab-position="tabPosition" style="height: 200px;">
                <el-tab-pane label="推荐" name="first">推荐</el-tab-pane>
                <el-tab-pane label="百货" name="second">百货</el-tab-pane>
                <el-tab-pane label="食品" name="third">食品</el-tab-pane>
                <el-tab-pane label="水果" name="fourth">水果</el-tab-pane>
                <el-tab-pane label="电器" name="fifth">电器</el-tab-pane>
                <el-tab-pane label="运动" name="sixth">运动</el-tab-pane>
    </el-tabs>
    <script>
      export default { 
        data() { 
          return { 
            activeName: 'first',
            tabPosition: 'left'
          };
        },
        methods: { 
          handleClick(tab, event) { 
            console.log(tab, event);
          }
        }
      };
    </script>

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/e6eb40c6f33641af8dc8bb6f3f8e7b11.png
[20210118112430246.PNG_pic_center]: /images/20221119/a48f242163894d7980b112c3c14421bd.png
[20210118112649545.PNG_pic_center]: https://img-blog.csdnimg.cn/20210118112649545.PNG#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20210118142107124.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA==,size_16,color_FFFFFF,t_70#pic_center