vue实现手机通讯录
- 2020 年 4 月 2 日
- 笔记
欢迎关注生南星，让代码在青春里翻滚。
在学习vue实现手机通讯录的功能之前，我们首先要了解如何将汉字转为拼音并获取其首字母，以下为汉字转拼音插件：
1. 新建 const.js 文件，定义常量。
代码太长就不贴了，需要的请参考下面原文链接的文章：vue集成汉字转拼音插件
2. 新建 vue-py.js 文件，实现汉字转拼音功能：
import { pinyin } from './const.js' export default { chineseToPinYin: function (l1) { var l2 = l1.length var I1 = '' var reg = new RegExp('[a-zA-Z0-9]') for (var i = 0; i < l2; i++) { var val = l1.substr(i, 1) var name = this.arraySearch(val, pinyin) if (reg.test(val)) { I1 += val } else if (name !== false) { I1 += name } } I1 = I1.replace(/ /g, '-') while (I1.indexOf('--') > 0) { I1 = I1.replace('--', '-') } return I1 }, arraySearch: function (l1, l2) { for (var name in pinyin) { if (pinyin[name].indexOf(l1) !== -1) { return this.ucfirst(name) } } return false }, ucfirst: function (l1) { if (l1.length > 0) { var first = l1.substr(0, 1).toUpperCase() var spare = l1.substr(1, l1.length) return first + spare } } }
3. 项目中集成插件：
<script> //引入汉字转拼音插件文件 import vPinyin from '../../utils/vue-py' let salesmanName = '哈哈' //调用汉字转拼音方法 let namePinyin = vPinyin.chineseToPinYin(salesmanName) //获取汉字拼音首字母 let namePinyin = vPinyin.chineseToPinYin(salesmanName.substring(0, 1)); firstPinyin = namePinyin.substring(0, 1).toUpperCase(); console.log(firstPinyin); </script>
原文链接：https://blog.csdn.net/yin4302008/article/details/86698478
vue设置手机通讯录数据循环遍历数据格式。
1. 设置变量。
data(){ return { //根据通讯录名字得到的首字母 contacts:[], //处理过后的相应数据 listData: [], } },
2. 设置数据格式。
this.$post({ data:{ request:'', token: this.$store.getters.token, }, success: res => { if(res.code === 0){ this.listData = []; var resData = res.data.data; if (res.data.data.length !== 0) { var salesmanMap = new Map(); // 构造通讯录数据格式 resData.forEach((item, index) => { let salesmanName = item.manager_name; let firstPinyin = ''; if (salesmanName !== '') { //获取汉字拼音首字母 let namePinyin = vPinyin.chineseToPinYin(salesmanName.substring(0, 1)); firstPinyin = namePinyin.substring(0, 1).toUpperCase(); } let salesmanData = []; // 构造key为业务员名字首字母 value为业务员工列表的map对象 if (salesmanMap.has(firstPinyin)) { salesmanData = salesmanMap.get(firstPinyin); salesmanData.push(item); salesmanMap.set(firstPinyin, salesmanData) } else { salesmanData.push(item); salesmanMap.set(firstPinyin, salesmanData) } }); // 构造name：业务员名字首字母 value:业务员工列表数据 json对象数组 for (let [key, value] of salesmanMap.entries()) { var jsonData = {}; jsonData['name'] = key; jsonData['value'] = value; this.listData.push(jsonData); this.contacts.push(key) } console.log(this.listData); console.log(this.contacts); } } } })
输出结果如下图所示：
3. 在组件中遍历（style自己写哦）。
<template v-for="(item,index) in listData"> <van-index-anchor :index="item.name" style="background:#f4f4f4;" /> <van-cell> <div class="contact-flex" v-for="(user,i) in item.value"> <img class="avatar" src="../assets/acqImg.png" alt=""> <div> <div class="name">{{user.manager_name}}</div> <div class="phone">{{user.phone}}</div> </div> </div> </van-cell> </template>
页面展示效果如下图：
参考文章：https://blog.csdn.net/yin4302008/article/details/87910934
