Element UI学习5--Tabs 标签页

最新推荐文章于 2023-09-06 00:32:40 发布

原创最新推荐文章于 2023-09-06 00:32:40 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

vue 同时被 2 个专栏收录

10 篇文章

订阅专栏

element ui

8 篇文章

订阅专栏

本文详细介绍了如何在Vue.js项目中使用Element UI的Tabs组件，包括基础用法、不同样式的选项卡（如card和border-card类型）以及如何改变标签的位置（如left、right、top和bottom）。通过实例展示，帮助开发者掌握这一前端组件。

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

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