vue实现手机通讯录

生南星

发布于 2020-04-02 11:30:45

2.9K0

发布于 2020-04-02 11:30:45

文章被收录于专栏：生南星

欢迎关注生南星，让代码在青春里翻滚。

在学习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>

页面展示效果如下图：