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 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">政务云数字农业智慧大屏</section>
    <section class="right_titles_container">
      <section 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';

onMounted(() => {
  handleWidth();
});
const emit = defineEmits(['changeTitle']);
const props = defineProps({
  titles: {
    type: Array,
    default() {
      return [
        { label: '标题1', value: '1' },
        { label: '标题2', value: '2' },
        { label: '标题3', value: '3' },
        { label: '标题4', value: '4' },
        { label: '标题5', value: '5' },
        { label: '标题6', value: '6' },
        { label: '标题7', value: '7' },
        { label: '标题8', value: '8' },
        { label: '标题9', value: '9' },
        { label: '标题10', value: '10' },
        { label: '标题11', value: '11' },
        { label: '标题12', value: '12' },
        { label: '标题13', value: '13' },
        { label: '标题14', value: '14' },
        { label: '标题15', value: '15' },
        { label: '标题16', value: '16' },
        { label: '标题17', value: '17' },
        { label: '标题18', value: '18' },
        { label: '标题19', value: '19' },
      ];
    },
  },
});
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');
  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);
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.header_title {
  background-color: #f5f5f5;
  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: 60px;
    .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>