vue创建微信索引条完全代码

下面是使用Vue创建微信索引条的完整代码示例：

<template>
  <div>
    <div class="index-bar">
      <div
        v-for="(letter, index) in letters"
        :key="index"
        class="index-letter"
        @click="scrollTo(letter)"
      >
        {{ letter }}
      </div>
    </div>
    <div class="contact-list">
      <div v-for="contact in filteredContacts" :key="contact.id" class="contact">
        <!-- 根据联系人的首字母，添加相应的索引标签 -->
        <div v-if="isLetterVisible(contact.letter)" class="contact-letter">
          {{ contact.letter }}
        </div>
        <div class="contact-name">{{ contact.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      letters: [], // 索引条的字母数组
      contacts: [ // 联系人数据
        { id: 1, name: 'Alice', letter: 'A' },
        { id: 2, name: 'Bob', letter: 'B' },
        { id: 3, name: 'Charlie', letter: 'C' },
        // 更多联系人...
      ]
    };
  },
  computed: {
    filteredContacts() {
      // 根据选中的索引字母过滤联系人数据
      return this.contacts.filter(contact => contact.letter === this.selectedLetter);
    }
  },
  methods: {
    isLetterVisible(letter) {
      // 判断当前字母是否在索引条中可见
      return this.letters.includes(letter);
    },
    scrollTo(letter) {
      // 滚动到指定字母的位置
      const targetElement = document.querySelector(`.contact-letter:contains(${letter})`);
      if (targetElement) {
        targetElement.scrollIntoView();
      }
    }
  },
  mounted() {
    // 获取联系人列表中的所有字母，并去重排序
    this.letters = Array.from(new Set(this.contacts.map(contact => contact.letter))).sort();
  }
};
</script>

<style>
.index-bar {
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}

.index-letter {
  cursor: pointer;
}

.contact-list {
  margin-top: 50px;
}

.contact-letter {
  font-weight: bold;
}

.contact-name {
  margin-left: 20px;
}
</style>

以上代码实现了一个简单的微信索引条效果。通过`letters`数组存储索引字母，然后使用`v-for`指令渲染索引条的字母，并绑定点击事件`@click`实现滚动到相应字母的功能。联系人列表根据首字母动态显示相应的索引标签，并根据选中的索引字母进行过滤显示。