vue实现字母选择

Vue 实现字母选择功能

在 Vue 中实现字母选择功能通常用于联系人列表、城市选择等场景。以下是几种常见实现方式：

基础实现（固定字母列表）

<template>
  <div class="letter-selector">
    <div 
      v-for="letter in letters" 
      :key="letter"
      class="letter"
      @click="selectLetter(letter)"
    >
      {{ letter }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      letters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
      selectedLetter: null
    }
  },
  methods: {
    selectLetter(letter) {
      this.selectedLetter = letter
      this.$emit('letter-selected', letter)
    }
  }
}
</script>

<style>
.letter-selector {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.letter {
  padding: 2px 5px;
  cursor: pointer;
}
.letter:hover {
  color: #409EFF;
}
</style>

动态字母列表（基于数据）

当需要根据实际数据动态生成字母列表时：

data() {
  return {
    items: [
      {name: 'Apple', initial: 'A'},
      {name: 'Banana', initial: 'B'},
      // ...
    ]
  }
},
computed: {
  letters() {
    const initials = this.items.map(item => item.initial)
    return [...new Set(initials)].sort()
  }
}

结合滚动定位

实现点击字母后滚动到对应位置：

methods: {
  scrollToLetter(letter) {
    const element = document.getElementById(`section-${letter}`)
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' })
    }
  }
}

触摸滑动选择（移动端优化）

添加触摸事件支持：

<div 
  class="letter-selector"
  @touchstart="handleTouchStart"
  @touchmove="handleTouchMove"
></div>

<script>
methods: {
  handleTouchStart(e) {
    this.touchY = e.touches[0].clientY
    this.handleTouch(e)
  },
  handleTouchMove(e) {
    this.handleTouch(e)
  },
  handleTouch(e) {
    const y = e.touches[0].clientY
    const index = Math.floor((y - this.touchY) / 18)
    if (index >= 0 && index < this.letters.length) {
      this.selectLetter(this.letters[index])
    }
  }
}
</script>

完整组件示例

<template>
  <div class="letter-container">
    <div class="content" ref="content">
      <div v-for="letter in letters" :key="letter" :id="`section-${letter}`">
        <h3>{{ letter }}</h3>
        <div v-for="item in itemsByLetter[letter]" :key="item.id">
          {{ item.name }}
        </div>
      </div>
    </div>

    <div class="letter-nav">
      <div 
        v-for="letter in letters" 
        :key="letter"
        @click="scrollToLetter(letter)"
      >
        {{ letter }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: Array
  },
  computed: {
    letters() {
      const initials = this.items.map(item => item.initial)
      return [...new Set(initials)].sort()
    },
    itemsByLetter() {
      const grouped = {}
      this.letters.forEach(letter => {
        grouped[letter] = this.items.filter(item => item.initial === letter)
      })
      return grouped
    }
  },
  methods: {
    scrollToLetter(letter) {
      const element = document.getElementById(`section-${letter}`)
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' })
      }
    }
  }
}
</script>

<style>
.letter-container {
  position: relative;
  height: 100%;
}
.content {
  height: 100%;
  overflow-y: auto;
}
.letter-nav {
  position: fixed;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: #666;
}
.letter-nav div {
  padding: 2px 5px;
  cursor: pointer;
}
.letter-nav div:hover {
  color: #409EFF;
}
</style>

这些实现方式可以根据具体需求进行组合和调整，核心思路是通过字母导航快速定位到对应内容区域。