vue 字母索引 字母检索 锚点

vue typescript 实现字母锚点

<template>
  <div class="view-container">    
  	  <div class="group-content">
	     <div class="group-list-container" ref="groupRef">
	       <div
	         class="group-list"
	         v-for="(item, index) in groupList"
	         :key="index"
	       >
	         <div class="list-title" ref="titleRef">
	           {{ item.title }}
	         </div>
	         <el-checkbox-group v-model="checkList">
	           <el-checkbox
	             :label="item1.name"
	             v-for="(item1, index1) in item.children"
	             :key="index1"
	           />
	         </el-checkbox-group>
	       </div>
	     </div>
	     <div class="word-list">
	       <div
	         v-for="item in wordList"
	         :key="item"
	         @click="goIndex(item)"
	       >
	         {{ item }}
	       </div>
	     </div>
      </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'App',
})
export default class extends Vue {
  groupList = [
    {
      title: 'A',
      children: [
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' },
        { name: 'A区域' }
      ]
    },
    {
      title: 'B',
      children: [
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' },
        { name: 'B区域' }
      ]
    },
    {
      title: 'C',
      children: [
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' },
        { name: 'C区域' }
      ]
    },
    {
      title: 'D',
      children: [
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' },
        { name: 'D区域' }
      ]
    }
  ]
  checkList = []
  wordList = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z'
  ]

  goIndex(params: any) {
    const groupRef = this.$refs.groupRef as any
    const titleRef = this.$refs.titleRef as any
    titleRef.map((item: any) => {
      if (item.innerText === params) {
        groupRef.scrollTo({
          top: item.offsetTop,
          behavior: 'smooth' // 平滑移动
        })
      }
    })
    // groupRef.scrollTop = offsetTop
  }
}
</script>

<style lang="scss" scoped>
.view-container {
    .group-content {
      height: 500px;
      position: relative;
      .group-list-container {
        height: 100%;
        overflow: auto;
        .group-list {
          margin-bottom: 16px;
          .list-title {
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: bold;
            color: #3e4451;
            margin-bottom: 16px;
          }
          /deep/.el-checkbox {
            margin: 0 56px 16px 0;
          }
        }
      }
      .word-list {
        position: absolute;
        right: 19px;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 500px;
        font-size: 12px;
        font-family: $font;
        font-weight: 400;
        color: #3e4451;
        div {
          text-align: center;
          cursor: pointer;
        }
      }
    }
}
</style>