vue3 自主封装类tabs组件

概要

提示：用了scss样式自定义

elementui的tabs不太符合想要的这种效果，不难不想去修改底层样式。所以自己封装一个简单的类tabs组件

组件构思

提示：只是简单的设计，复杂的内容不涉及（自己修改）

定义props传值

titleList:定义左侧选择栏数据，默认为空

  props: {
    titleList: {
      type: Array,
      default: () => []
    }
  },

组件代码展示

难点1：使用scss自定义传值来动态切换颜色（需要自定义其他颜色，加入props传值即可）
难点2：使用父子传值来接收选中的数据

<template>
  <div class="n-container">
    <div class="leftHeader">
      <div
        v-for="(item,index) in titleList"
        :key="index"
        class="title"
        :style="{'--bacColor':colorChange === index? 'white':'rgb(248, 248, 248)',
                 '--textColor':colorChange === index? '#738AFC':'#9B9CA1'}"
        @click="changeTable(item,index)"
      >
        {{ item }}
      </div>
    </div>
    <div class="content">
      <slot name="listTable" />
    </div>
  </div>
</template>
<script>
export default {
  name: "ListTable",
  props: {
    titleList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      colorChange: 0
    };
  },
  methods: {
    changeTable(item, index) {
      this.colorChange = index;
      this.$emit("tableTitle", item);
    }
  }
};
</script>

<style lang="scss" scoped>
.n-container{
    width: 100%;
    height: 100%;
    display: flex;
}
.leftHeader{
    flex: 1 ;
    .title{
        width: 100%;
        height: 3vw;
        text-align: end;
        padding: 10px 10px 0px 0px;
        cursor:pointer; 
        color: var(--textColor);
        background-color: var(--bacColor);
    }
}
.content{
    flex:10;
    background-color: white;
    padding: 20px;
}
</style>

父组件传值

sort传值渲染可以自行优化一下

 <list-table
        :title-list="['页面一', '页面二','页面三']"
        @tableTitle="e => titleBar = e"
      >
        <template #listTable>
          <template v-if="titleBar === '页面一'">
              页面一内容
          </template>
          <template v-if="titleBar === '页面二'">
            页面二内容
          </template>
          <template v-if="titleBar === '页面三'">
              页面三内容
          </template>
        </template>
      </list-table>

													不算很优雅，一般优雅