对element ui组件的二次封装

$attrs

$attrs 是一个内置属性，指父组件传递的、除了自己定义的 props 属性之外的所有属性。

.

$listeners

$listeners 包含了作用在这个组件上所有的监听器，即父组件绑定的全部监听事件，通过 v-on=“$listeners”，可以将这些事件绑定给它自己的子组件。

🌰：

• Tabs.vue文件

<template>
  <el-tabs class="layout-tabs" v-bind="$attrs" v-on="$listeners">
    <slot v-for="(_, name) in $slots" :name="name" />
  </el-tabs>
</template>

<script>
export default {
  name: 'LayoutTabs',
  inheritAttrs: false,
};
</script>

<style lang="scss" scoped>
.layout-tabs :deep() {
  .el-tabs__nav-scroll {
    background: url("@/assets/drawer_images/tabs-bg.png") center / contain no-repeat;
    background-size: 100% 100%;
    padding: 0 15px;
  }

  .el-tabs__nav-wrap::after {
    display: none;
  }

  .el-tabs__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 32%;
    right: 0;
    height: 36%;
    width: 2px;
    background-color: #7aaada;
  }

  .el-tabs__active-bar {
    height: 14px;
    background-color: unset;
  }

  .el-tabs__active-bar::after {
    content: "◣";
    transform: rotateZ(-45deg);
    position: absolute;
    text-align: center;
    color: #38a0ff;
    width: 100%;
  }

  .el-tabs__content {
    padding: 0 15px;
  }
}
</style>

• 使用：

<ElTabs>
	<el-tab-pane label="基础信息">
		<div>1</div>
	</el-tab-pane>
	<el-tab-pane label="基础内容">
		<div>2</div>
	</el-tab-pane>
</ElTabs>

import LayoutTabs from '@/components/Tabs.vue';

components: {
  ElTabs: LayoutTabs,
},