国际化：手机、区号插件记录

1.Vue-Tel-Input：这个插件下载下来之后使用报错，找不到css文件什么的，不知道什么原因直接弃用。

2.后续使用以下两个插件，vue2项目使用：

 "vue-country-intl": "^1.1.9", // 输入框

"google-libphonenumber": "^3.2.4", // 验证手机号是否符合区号对应的规则

 

npm i 最好直接加上版本，使用没问题。

 

使用：

// template

<VueCountryIntl
            id="mesDiv-Country"
            v-model="selectedCountry"
            schema="input"
            type="phone"
            :searchAble="true"
            :showAreaCode="true"
            :onlyValue="true"
          >
          </VueCountryIntl>


// 引入
import VueCountryIntl from 'vue-country-intl'
import 'vue-country-intl/lib/vue-country-intl.css'
import { PhoneNumberUtil } from "google-libphonenumber"

components: { VueCountryIntl }

// 验证使用
// 区号+手机号验证
     function validatePhoneNumber(phoneNumber) {
      const phoneUtil = PhoneNumberUtil.getInstance();
      try {
        const parsedPhoneNumber = phoneUtil.parseAndKeepRawInput(phoneNumber);
        return phoneUtil.isValidNumber(parsedPhoneNumber);
      } catch (error) {
        console.error("错误：", error);
        return false;
      }
    },

　　

 

记录进步！