caseEditor/src/components/head/index.vue

<template>
  <div class="head-layer">
    <el-tabs
      :modelValue="modelValue"
      @update:modelValue="(str: any) => updateModelValue(str)"
    >
      <el-tab-pane
        v-for="item in options"
        :key="item.value"
        :label="item.name"
        :name="item.value"
      >
      </el-tab-pane>
    </el-tabs>
    <div class="head-content-layer" :class="{ show: show }" v-if="!notContent">
      <div class="head-content">
        <slot />
      </div>
      <div class="display" @click="show = !show" v-if="showCtrl">
        <template v-if="show">
          <span>收起</span>
          <el-icon><ArrowUp /></el-icon>
        </template>
        <template v-else>
          <span>展开</span>
          <el-icon><ArrowDown /></el-icon>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Options } from "./head";

const props = withDefaults(
  defineProps<{
    options: Options;
    modelValue?: any;
    showCtrl?: boolean;
    notContent?: boolean;
  }>(),
  {
    notContent: false,
    showCtrl: false,
  }
);

const activeValue = ref(props.modelValue || props.options[0]?.value);
const emit = defineEmits<{ (e: "update:modelValue", modelValue: string): void }>();
const updateModelValue = (modelValue: string) => {
  if ("modelValue" in props) {
    console.log(modelValue, props);
    emit("update:modelValue", modelValue);
  } else {
    activeValue.value = modelValue;
  }
};
const show = ref(true);
</script>

<style lang="scss" scoped>
.head-layer {
  background-color: #fff;
  border-radius: 4px;
}

.head-content-layer {
  padding: 16px;
  position: relative;

  .head-content {
    overflow: hidden;
    height: 42px;
  }

  &.show {
    padding-bottom: 16px;

    .head-content {
      height: auto;
    }
  }

  .display {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--primaryColor);
    font-size: 0.85rem;
    cursor: pointer;

    i {
      color: currentColor;
      font-size: 1em;
      margin-left: 5px;
    }
  }
}
</style>

<style>
.head-layer .el-tabs__nav-wrap {
  padding: 0 16px;
}

.head-layer .el-tabs__header {
  margin-bottom: 0;
}

.head-layer .el-form-item {
  margin-bottom: 0;
}
</style>