vue 读取手机通讯录，快速带入联系人、联系电话至地址信息维护页面

在Vue中读取手机通讯录，并快速带入联系人和联系电话至地址信息维护页面，需要结合使用Cordova插件和Vue组件。以下是一些步骤：

1. 安装Cordova插件

在Vue项目中安装Cordova插件，使用以下命令：

cordova plugin add cordova-plugin-contacts

2. 添加获取通讯录权限

在移动端环境下获取通讯录信息需要获取权限，需要在config.xml文件中添加以下代码：

<plugin name="cordova-plugin-contacts" />
<config-file target="AndroidManifest.xml" parent="/manifest">
    <uses-permission android:name="android.permission.READ_CONTACTS" />
</config-file>

3. 创建地址信息维护页面

创建一个Vue组件，用于显示地址信息维护页面。在页面中添加联系人和联系电话的输入框，例如：

<template>
  <div>
    <label for="name">联系人：</label>
    <input type="text" id="name" v-model="name">

    <label for="phone">联系电话：</label>
    <input type="text" id="phone" v-model="phone">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      phone: ''
    }
  }
}
</script>

4. 添加读取通讯录的代码

在Vue组件中添加以下代码，用于读取通讯录并快速带入联系人和联系电话：

import { Toast } from 'vant';

export default {
  data() {
    return {
      name: '',
      phone: ''
    }
  },
  methods: {
    pickContact() {
      if (navigator.contacts) {
        navigator.contacts.pickContact((contact) => {
          this.name = contact.displayName || contact.name.formatted || '';
          this.phone = contact.phoneNumbers && contact.phoneNumbers[0].value || '';
        }, (error) => {
          Toast.fail('读取通讯录失败');
        });
      } else {
        Toast.fail('通讯录插件未找到');
      }
    }
  }
}

以上代码中，`pickContact`方法会打开通讯录页面，用户可以选择一个联系人。选择联系人后，会将联系人和联系电话快速带入到地址信息维护页面的相应输入框中。

注意：以上代码需要在移动端环境下运行才能读取通讯录信息。如果在浏览器中运行，会提示“通讯录插件未找到”错误。同时，需要根据实际需要修改读取通讯录后的处理逻辑。