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

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

效果图:

流程 :

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

此功能用到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>
相关文章
|
10天前
|
Web App开发 JavaScript 前端开发
解决Vue.js Devtools未检测到Vue实例的问题
解决Vue.js Devtools未检测到Vue实例的问题
|
10天前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
41 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
11天前
|
存储 JavaScript 前端开发
Angular.js 如何绘制列表
Angular.js 如何绘制列表
16 2
|
11天前
|
JavaScript 前端开发 开发者
Vue路由及Node.js环境搭建
Vue.js 和 Node.js 是两个不同的技术,分别用于前端和后端开发,具有不同的用途和功能
7 1
|
11天前
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
58 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
11天前
|
移动开发 前端开发
VUE3一种用户可以设置显示隐藏列表内容的方法
VUE3一种用户可以设置显示隐藏列表内容的方法
12 0
|
12天前
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
|
12天前
|
存储 JavaScript
报错permission.js:41 [Vue warn]: Property “showClose“ must be accessed with “$data.showClose“ because
报错permission.js:41 [Vue warn]: Property “showClose“ must be accessed with “$data.showClose“ because
|
12天前
|
JavaScript
Vue与原生JS中方法调用
Vue与原生JS中方法调用
9 0
|
12天前
|
资源调度 JavaScript 搜索推荐
服务端渲染:使用Nuxt.js构建Vue SSR应用
【4月更文挑战第22天】本文介绍了如何使用Nuxt.js创建Vue SSR应用。首先确保安装Node.js和npm/yarn,然后全局安装Create Nuxt App,创建项目并选择配置。Nuxt.js提供清晰的项目结构,如`pages/`存放Vue页面。编写简单SSR页面后,启动开发服务器预览。完成开发,使用Nuxt.js命令部署到静态文件托管服务,实现首屏加载优化和SEO提升。Nuxt.js简化了SSR开发,助力高效构建高性能Vue应用。