使用vant的vue3+ts实现一个选择联系人的功能

在Vue3中使用Vant库构建一个选择联系人的功能，首先需要安装`vant`库及其TypeScript支持。你可以通过运行以下命令来安装：

npm install vant typescript

然后，在`.d.ts`文件中（例如`src/main.ts`或全局的`tsconfig.json`），你需要配置Vant的TypeScript支持：

import * as Vant from 'vant';

// 配置Vant的TypeScript类型
declare module 'vant' {
  export interface MessageBoxInstance {
    ok(message?: string | { message: string }, callback?: () => void): Promise<void>;
    confirm(message?: string, callback?: (value: boolean) => void): Promise<void>;
    prompt(message?: string, placeholder?: string, confirmLabel?: string, cancelLabel?: string, value?: any, callback?: (value: any) => void): Promise<any>;
  }
}

Vant.use({
  Alert: Vant.Alert,
  Message: Vant.Message,
  Picker: Vant.Picker, // 如果需要用到Picker组件
});

接下来，我们创建一个组件，比如`ContactPicker.vue`，来展示选择联系人的功能：

<template>
  <div>
    <van-picker v-model="selectedContact" title="选择联系人">
      <van-contact-list :data="contacts"></van-contact-list>
    </van-picker>
    <button @click="selectContact">确认选择</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Picker, ContactList } from 'vant';

export default defineComponent({
  components: {
    ContactList,
    Picker,
  },
  data() {
    return {
      contacts: [], // 这里假设你已经有了一个联系人数组
      selectedContact: '',
    };
  },
  methods: {
    selectContact() {
      const pickedContact = this.selectedContact;
      if (pickedContact) {
        // 这里可以处理选中的联系人，例如发送到其他地方
        console.log('Selected contact:', pickedContact);
      }
    },
  },
});
</script>

在这个例子中，我们使用了`van-picker`组件和其子组件`van-contact-list`来显示联系人列表，并允许用户选择。点击“确认选择”按钮时，会打印出所选的联系人信息。