Vue 模拟通讯录列表用 js-pinyin 获取汉字首字母，形成字母索引

小马大咖

已于 2023-04-12 15:39:58 修改

阅读量885

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-02-09 15:06:43 首次发布

本文链接：https://blog.csdn.net/m0_67063430/article/details/128951993

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

该文章展示了如何在Vue项目中利用Vant的IndexBar组件和js-pinyin库对数据进行处理，通过获取每个条目名称的首字母拼音来实现首字母排序和分组，从而创建一个可滚动的索引栏。在创建过程中，涉及的数据操作包括安装插件、获取全拼、构建分组对象以及最终的数据排序。

摘要由CSDN通过智能技术生成

效果图：

流程：

获取数据
提取首个字的拼音的首个字母
排序并分组

此功能用到Vant组件的 IndexBar 索引栏

1. 安装

js-pinyin npm地址

npm install js-pinyin --save

2. 引入及使用

<template>
  <div class="wrap">
    <van-index-bar>
      <div v-for="item in filterData" :key="item.letter">
        <van-index-anchor :index="item.letter"></van-index-anchor>
        <div
          class="content"
          v-for="row in item.list"
          :key="row.id"
          @click="go(row.id)"
        >
          {{ row.name }}
        </div>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      filterData: [], // 处理后的 待渲染数据
       // 模拟数据
      mapData: [
        {
          id: 1,
          name: "万景千言",
        },
        {
          id: 2,
          name: "八里沟11",
        },
        {
          id: 2,
          name: "八里沟1",
        },
        {
          id: 2,
          name: "八里沟",
        },
        {
          id: 17,
          name: "京华园",
        },
        {
          id: 21,
          name: "平原博物馆",
        },
        {
          id: 38,
          name: "金牛湖野生动物王国",
        },
      ],
    };
  },
  created() {
    this.test();
  },
  methods: {
    test() {
      // 安装使用 js-pinyin 插件，获取待处理字段的拼音
      const pinyin = require("js-pinyin");
      this.mapData.map((item) => {
        item.pinyin = pinyin.getFullChars(item.name);
      });

      let provice = {};
      this.mapData.map((item) => {
        const Initials = item.pinyin[0].toUpperCase();
        // 如果对象里有当前字母项则直接 push 一个对象,如果没有则创建一个新的键并赋值;
        if (provice[Initials]) {
          provice[Initials].push(item);
        } else {
          provice[Initials] = [item];
        }
      });
      // 将数据转为数组，并按字母顺利排列
      this.filterData = [];
      for (let key in provice) {
        const obj = { letter: key, list: provice[key] };
        this.filterData.push(obj);
      }
      this.filterData.sort((a, b) => {
        return a.letter.localeCompare(b.letter);
      });
    },
  },
};
</script>