Element UI学习5--Tabs 标签页

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

之前介绍了用 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>

如图：

2、选项卡样式

设置 type 属性

1、type="card"

如图：

2、type=“border-card” 卡片化

如图·：

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>

如图：