digital-agriculture-screen/src/components/custom-scroll-title/index.vue

<template>
  <section
    class="header_title"
    :style="{
      '--titleContentW': titleContentW + 'px',
      '--itemW': itemW + 'px',
      '--gap': gap + 'px',
    }"
  >
    <el-icon v-if="props.titles.length > 6" icon="el-icon-arrow-left" class="left_btn" @click="handleTitleBtn(1)">
      <ArrowLeftBold />
    </el-icon>
    <el-icon v-if="props.titles.length > 6" icon="el-icon-arrow-right" class="right_btn" @click="handleTitleBtn(-1)"><ArrowRightBold /></el-icon>
    <section class="left_titles_container">
      <section v-if="route.name != 'home'" class="title_content" :style="{ left: `-${position}px` }">
        <section
          v-for="(item, i) in leftTitles"
          :key="`left_title_${i}`"
          :class="['title_item', activeTitle == item.value ? 'active' : '']"
          @click="handleTitleClick(item.value)"
        >
          {{ item.label }}
        </section>
      </section>
    </section>
    <section class="sys_name">{{ route.name != 'home' ? '政务云数字农业智慧大屏' : '数字农业智慧大脑' }}</section>
    <section class="right_titles_container">
      <section v-if="route.name != 'home'" class="title_content" :style="{ left: `${right ? right + 'px' : '-' + position + 'px'}` }">
        <section
          v-for="(item, i) in rightTitles"
          :key="`right_title_${i}`"
          :class="['title_item', activeTitle == item.value ? 'active' : '']"
          @click="handleTitleClick(item.value)"
        >
          {{ item.label }}
        </section>
      </section>
    </section>
  </section>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
onMounted(() => {
  handleWidth();
  activeTitle.value = router.currentRoute.value.name;
});
// const emit = defineEmits(['changeTitle']);
const props = defineProps({
  titles: {
    type: Array,
    default() {
      return [
        { label: '首页', value: '/v2/home' },
        { label: '土地资源', value: '/v2/land' },
        { label: '投入品监管', value: '/v2/inputs' },
        { label: '产出品管理', value: '/v2/entities' },
        // { label: '智慧种植监测', value: 'plant' },
        // { label: '智慧养殖监测', value: 'breed' },
        { label: '生产经营主体', value: '/v2/business' },
        { label: '农产品溯源', value: '/v2/trace' },
        // { label: '产业预警决策', value: 'early' },
      ];
    },
  },
});
const titleContentW = ref('0');
const itemW = ref('1');
const gap = ref(24);
const leftNum = ref(0);
const position = ref(0);
const right = ref(null);
const activeTitle = ref('1');
const leftTitles = ref([]);
const rightTitles = ref([]);

watch(
  () => props.titles,
  (val) => {
    if (val && val.length) {
      activeTitle.value = val[0].value;
      let l = val.length;
      if (l > 6) {
        leftTitles.value = val.slice(0, l - 3);
        rightTitles.value = val.slice(3);
      } else {
        leftTitles.value = val.slice(0, 3);
        if (l > 3) {
          rightTitles.value = val.slice(3);
        }
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
function handleWidth() {
  let ld = document.querySelector('.left_titles_container');
  if (ld) {
    let w = ld.clientWidth;
    itemW.value = (w - 2 * gap.value) / 3;
    titleContentW.value = itemW.value * leftTitles.value.length + leftTitles.value.length * gap.value;
    if (props.titles.length > 3 && props.titles.length < 6) {
      let l = 3 - (props.titles.length - 3);
      right.value = l * itemW.value + (l - 1) * gap.value;
    }
  }
}
function handleTitleBtn(t = -1) {
  if (props.titles.length > 6) {
    if (leftNum.value > -1) leftNum.value = leftNum.value + t;
    if (leftNum.value < 0) leftNum.value = 0;
    if (leftNum.value > leftTitles.value.length - 3) leftNum.value = leftTitles.value.length - 3;
    position.value = leftNum.value * itemW.value + leftNum.value * gap.value;
  }
}
function handleTitleClick(val) {
  activeTitle.value = val;
  // emit('changeTitle', val);
  router.push({ path: val });
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.header_title {
  background-color: #000;
  position: relative;
  padding: 0 68px;
  display: flex;
  justify-content: space-between;
  width: 100vw;
  height: 100%;
  background: url('../../assets/images/basic/headerBG.png') no-repeat;
  background-size: 100% 100%;
  .sys_name {
    padding-bottom: 8px;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    font-family: 'JinBuTi';
  }
  .left_btn,
  .right_btn {
    position: absolute;
    top: 25px;
    padding: 6px 6px;
    width: 30px;
    height: 30px;
    background-color: rgb(6, 155, 118, 0.5);
    border-radius: 8px;
    cursor: pointer;
    z-index: 1;
    user-select: none;
    color: #fff;
    font-weight: bold;
  }
  .left_btn {
    left: 14px;
  }
  .right_btn {
    right: 14px;
  }
  .left_titles_container,
  .right_titles_container {
    position: relative;
    width: 30%;
    height: 100%;
    overflow: hidden;
    line-height: 90px;
    .title_content {
      position: absolute;
      top: 10px;
      width: var(--titleContentW);
      height: 40px;
      transition: all 0.4s ease;
      font-size: 20px;
      font-weight: bold;
      .active {
        color: #fff;
        opacity: 1 !important;
        text-shadow: 0px 4px 10px #fff;
      }
      .title_item {
        margin-right: var(--gap);
        display: inline-block;
        width: var(--itemW);
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #f5fffe;
        cursor: pointer;
        user-select: none;
        background-size: 100% 100%;
        opacity: 0.6;
      }
    }
  }
  .left_titles_container {
    .title_item {
      background: url('../../assets/images/basic/leftTitleBG.png') no-repeat;
    }
  }
  .right_titles_container {
    .title_item {
      background: url('../../assets/images/basic/rightTitleBG.png') no-repeat;
    }
  }
}
</style>