@horanuu/country-phone-select

@horan/country-phone-select

基于 Vue 2 + Element UI 的国际区号 + 手机号选择组件，各项目统一依赖此包，避免重复维护。

安装

npm install @horan/country-phone-select

宿主项目需自行提供 vue（2.6 / 2.7）与 element-ui（>=2.15），二者已声明为 peerDependencies。

使用

全局注册

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

import CountryPhoneSelect from "@horan/country-phone-select";

Vue.use(ElementUI);
Vue.use(CountryPhoneSelect);

局部引入

<template>
  <CountryPhoneSelect
    :phone="phone"
    country-code="CN"
    :is-required="true"
    :style-width="200"
    @getPhone="onPhone"
  />
</template>

<script>
import { CountryPhoneSelect } from "@horan/country-phone-select";

export default {
  components: { CountryPhoneSelect },
  data() {
    return { phone: "" };
  },
  methods: {
    onPhone(payload) {
      // payload: { countryCode, isValid, phoneNumber, countryCallingCode }
    },
  },
};
</script>

接入宿主项目的 i18n（可选）

组件默认使用内置列表中的中文 areaName。若宿主项目需要走自己的语言包，传入 countryNameFormatter 即可，组件不再直接依赖任何 i18n key：

<CountryPhoneSelect :phone="phone" :country-name-formatter="formatCountry" @getPhone="onPhone" />

<script>
methods: {
  formatCountry(item) {
    return this.$t("country." + item.domainAbbreviation);
  },
}
</script>

Props

Events

开发

npm install
npm run build   # 产物输出到 dist/

发布

npm run build
npm publish --access public

npm run release        # patch 版本
npm run release:minor  # minor 版本
npm run release:major  # major 版本