first commit

src/components/ModelMenuTitle.vue

@@ -0,0 +1,108 @@
+<template>
+  <div
+    class="logical-title"
+    :style="{
+      fontSize: `${fontSize}px`,
+    }"
+  >
+    <div
+      v-for="(item, index) in copyTitle"
+      :key="index"
+      class="logical-title-span"
+      :class="{ 'logical-title-span-active': item.checked }"
+      @click="clickHandle(item)"
+    >
+      {{ item.title }}
+    </div>
+    <div
+      class="logical-title-line"
+      :style="{ left: `${activeIndex * posLeft}px`, width: `${lineWidth}px` }"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { computed, ref } from "@vue/runtime-core";
+export default {
+  name: "LogicalTitle",
+  props: {
+    titles: {
+      type: Array,
+      default: () => [],
+    },
+    fontSize: {
+      type: Number,
+      default: 16,
+    },
+    lineWidth: {
+      type: Number,
+      default: 95,
+    },
+    posLeft: {
+      type: Number,
+      default: 141,
+    },
+  },
+  setup(props, context) {
+    const copyTitle = ref(
+      props.titles.map((x, index) => {
+        return {
+          ...x,
+          checked: index === 0,
+        };
+      })
+    );
+    const activeIndex = computed(() => {
+      const index = copyTitle.value.findIndex((x) => x.checked);
+      return index === -1 ? 0 : index;
+    });
+    const clickHandle = (item) => {
+      copyTitle.value.forEach((x) => {
+        x.checked = false;
+      });
+      item.checked = true;
+      context.emit("check", item);
+    };
+    return {
+      copyTitle,
+      activeIndex,
+      clickHandle,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.logical-title {
+  display: flex;
+  position: relative;
+  font-size: 16px;
+  font-weight: 400;
+  &-span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 0;
+    width: 100px;
+    max-width: 100px;
+    margin-right: 40px;
+    cursor: pointer;
+    &-active {
+      font-weight: 600;
+      color: $yili-default-color;
+    }
+    &:hover {
+      color: $yili-default-color;
+    }
+  }
+  &-line {
+    position: absolute;
+    bottom: 0;
+    width: 64px;
+    height: 3px;
+    background: $yili-default-color;
+    border-radius: 2px;
+    transition: all 0.3s;
+  }
+}
+</style>