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
