uni-app 带国际区号选择的手机号码输入框

做了一个简单版本的可以去看看https://ext.dcloud.net.cn/plugin?id=2176

在处理带有国际区号选择的手机号码输入框时，我们可以利用 uni-app 提供的组件和API来实现这一功能。以下是一个简单的实现示例，包括一个带有国际区号选择器的手机号码输入框。

首先，确保你的 uni-app 项目已经创建并配置好。

1. 页面布局（使用 uni-easyinput 组件作为示例）

在页面的 .vue 文件中，添加以下布局：

<template>
  <view class="container">
    <picker mode="selector" :range="countryCodes" @change="onCountryChange">
      <view class="picker">
        {{ selectedCountryCode }} (+{{ selectedDialCode }})
      </view>
    </picker>
    <uni-easyinput 
      v-model="phoneNumber" 
      placeholder="请输入手机号码" 
      :clearable="true" 
      @input="validatePhoneNumber"
    />
  </view>
</template>

2. 数据和方法

在 <script> 部分，定义国家代码列表、选中的国家代码和拨号代码，以及事件处理方法：

<script>
export default {
  data() {
    return {
      countryCodes: ['中国', '美国', '英国'], // 示例国家列表
      countryCodeMap: {
        '中国': '+86',
        '美国': '+1',
        '英国': '+44'
      },
      selectedCountryCode: '中国',
      selectedDialCode: '+86',
      phoneNumber: ''
    };
  },
  methods: {
    onCountryChange(e) {
      const index = e.detail.value;
      this.selectedCountryCode = this.countryCodes[index];
      this.selectedDialCode = this.countryCodeMap[this.selectedCountryCode];
    },
    validatePhoneNumber(e) {
      // 在这里添加手机号码验证逻辑
      console.log(`输入的手机号码: ${this.selectedDialCode}${this.phoneNumber}`);
    }
  }
};
</script>

3. 样式

在 <style> 部分，添加一些基本的样式：

<style>
.container {
  padding: 20px;
}
.picker {
  border: 1px solid #ddd;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
}
</style>

总结

上述代码展示了如何在 uni-app 中创建一个带有国际区号选择的手机号码输入框。我们使用 picker 组件来选择国家，根据选择更新拨号代码，并在输入框中显示。用户输入手机号码时，可以触发 validatePhoneNumber 方法进行验证。你可以根据实际需求扩展国家列表和验证逻辑。