如何在el-tabs右侧空白部分添加搜索框和按钮

最新推荐文章于 2025-04-16 14:48:59 发布

原创最新推荐文章于 2025-04-16 14:48:59 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

1. 需求描述

在el-tabs 顶部添加搜索框和发布按钮。

2.实现方案

使用CSS来实现：

1.外层div容器指定 position: relative;

2.使用position：absolute 绝对定位，寻找上层元素参照

3.代码实现

<template>
<div class="wrapper">
    <div class="btn-area">
      <el-input v-model="searchKeyword" style="max-width: 224px" placeholder="Please input" class="input-with-select">
        <template #append>
          <el-button>
            <svg-icon name="search"></svg-icon>
          </el-button>
        </template>
      </el-input>
      <el-button type="primary">发布</el-button>
    </div>
    <el-tabs v-model="activeName" class="pubtabs" @tab-click="handleClick">
        <el-tab-pane label="测试1" name="1">Config</el-tab-pane>
        <el-tab-pane label="测试2" name="2">Config</el-tab-pane>
    </el-tabs>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const activeName = ref("1");
const searchKeyword = ref("");
</script>
<style scoped lang="scss">

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  .footer {
    padding: 0 20px 10px 20px;
  }
  .btn-area {
    width: 300px;
    position: absolute;
    top: 0;
    right: 10px;
    display: flex;
    justify-content: space-between;
  }
  .pubtabs {
    width: 100%;
    .pub-container {
      min-width: 1280px;
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>