新增分销配置

src/views/marketing_center/components/tabHeader.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="tab_wrap">
+    <div class="item_wrap" :style="{ gap: `${gap}px` }">
+      <div class="item" :ref="el => itemRefs[index] = el" v-for="(item, index) in props.list" :key="index"
+        :class="{ modelValue: modelValue == index }" @click="changeHandle(index)">
+        <span>{{ item.label }}</span>
+      </div>
+      <div class="active_wrap" :style="{ '--left': `${leftValue}px`, '--width': `${itemsWidth[modelValue]}px` }">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+
+const props = defineProps({
+  // {label: '设置',value: 1}
+  list: {
+    type: Array,
+    default: []
+  }
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const modelValue = defineModel('modelValue', {
+  type: [String, Number],
+  required: true
+})
+
+// 改变索引
+function changeHandle(index) {
+  modelValue.value = index
+
+  let left = 0
+  itemsWidth.value.forEach((val, i) => {
+    if (i < index) {
+      left += val
+    }
+  })
+  leftValue.value = left + gap.value * index
+}
+
+const itemRefs = ref([])
+const itemsWidth = ref([])
+const gap = ref(24)
+const leftValue = ref(0)
+
+onMounted(() => {
+  nextTick(() => {
+    itemRefs.value.forEach((el, index) => {
+      itemsWidth.value.push(el.offsetWidth)
+    })
+    console.log('itemRefs===', itemRefs.value);
+    console.log('itemsWidth===', itemsWidth.value);
+
+
+    changeHandle(modelValue.value)
+  })
+})
+</script>
+
+<style scoped lang="scss">
+.tab_wrap {
+  padding: 12px;
+  background-color: #F8F8F8;
+  border-radius: 2px;
+
+  .item_wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .item {
+      padding: 0 12px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      z-index: 2;
+      cursor: pointer;
+
+      &.modelValue {
+        span {
+          color: #fff;
+        }
+      }
+
+      span {
+        font-size: 16px;
+        color: #999;
+        transition: all .1s ease-in-out .15s;
+      }
+    }
+
+    .active_wrap {
+      width: var(--width);
+      background-color: var(--el-color-primary);
+      height: 34px;
+      position: absolute;
+      top: 0;
+      left: var(--left);
+      z-index: 1;
+      border-radius: 2px;
+      transition: all .3s ease-in-out;
+    }
+  }
+}
+</style>