vue-country-intl
Advanced tools
A vue-based mobile phone area code selection, nationality selection component（一个基于vue的手机区号选择、国籍选择组件）
Vue-based mobile phone area code selection, nationality selection component, compatible with pc, mobile.vue-country-intlThere are 3 modes（
input、popover、modal）
The country data supported by the plugin comes from:
https://941477276.github.io/vue-country-intl/dist/
vue版的国籍/手机区号选择插件(
vue-country-intl)
react版的国籍/手机区号选择插件(
reaxt-country-intl)
微信小程序版的国籍/手机区号选择插件(
wx-country-intl)
基于better-scroll的下拉刷新、上拉加载Vue插件(
vue-scroll-refresh-load)
npm install vue-country-intl --save
/*****main.js****/
import VueCountryIntl from 'vue-country-intl';
// import css
import 'vue-country-intl/lib/vue-country-intl.css'
// Global registration component
Vue.component(VueCountryIntl.name, VueCountryIntl);
/*****Used in components****/
<template>
<vue-country-intl v-model="countryCode"></vue-country-intl>
</template>
<link rel="stylesheet" href="./lib/vue-country-intl.css">
<script src="./lib/vue-country-intl.min.js"></script>
<script>
Vue.component('vue-country-intl', vueCountryIntl);
new Vue({
el: '#app',
data: {}
});
<template>
<VueCountryIntl v-model="phoneCountry"></VueCountryIntl>
</template>
effect:
display the nationality name in Chinese
<template>
<button type="button" id="my_reference">Select phone area code</button>
<VueCountryIntl schema="popover" elId="my_reference" v-model="phoneCountry">
</VueCountryIntl>
</template>
<template>
<VueCountryIntl schema="popover" v-model="phoneCountry">
<button type="button" slot="reference">Select phone area code</button>
</VueCountryIntl>
</template>
effect:
<template>
<VueCountryIntl schema="modal" v-model="phoneCountry"></VueCountryIntl>
</template>
effect:
1.schema: Display mode
input input box (default)2.type: Value type
3.placeholder: The placeholder of the input box when schema=input
4.searchAble: Whether it can be searched (data type: Boolean)
5.disabled: Whether to disable (data type: Boolean)
6.showAreaCode: Whether to display the area code in the input box (data type: Boolean)
7.showLabelImg: Whether to display an image in the input box (data type: Boolean)
8.onlyValue: Whether to display only the selected value without displaying the nationality name (data type: Boolean)
9.listZIndex: z-index for list (data type：Number)
10.maxHeight: The maximum height of the list, pc default 350px, mobile default 240px (data type：Number)
11.selectedText: The copy to the right of the selected item in the list, the default is Selected (data type：String)
12.showSelectedText: Whether the right side of the 'Selected' file is displayed when the list item is selected, the default is true (data type: Boolean)
13.readonly: Read-only, default false (data type: Boolean)
14.offsetTop: The distance from the popover popup window to the reference element. The default is 10.Only valid when schema=popover (data type：Number)
15.popoverClass: Popover pop-up window extra class.Only valid when schema=popover (data type：String)
16.referenceTrigger: Click on whether the reference can display the popover popup. The default is true.Only valid when schema=popover (data type: Boolean)
17.searchInputPlaceholder: Search for the placeholder text in the input box,Only valid in schema=popover, schema=modal (data type：String)
18.elId: Trigger the id of the element displayed by the popover popup,Only valid in schema=popover mode (data type：String)
19.modalClass: Model pop-up extra class. Valid only when schema=modal (data type: String)
20: visible: Control component display and hide, you need to use the sync syntax, such as::visible.sync="show", valid only in schema=modal mode (data type: Boolean)
21: cancelText: Close the text of the button of the popup, default: 'Cancel', valid only in schema=modal mode (data type：String)
22: disableCountry: Disabled countries (can pass country name, country code, mobile area code), can pass strings or pass arrays, pass strings to disable multiple countries, need to be separated by commas（data type：String|Array）
23: onlyCountry: Display only the specified country, can pass a string or pass an array, multiple countries separated by commas when passing a string（data type：String|Array）
24: 'noDataText' : the copywriter displayed when the national data is not searched, if there is' vueCountryNoData 'slot, slot contents will be displayed first (data type: String)
25: iosMobileReadonly: Whether the input box is read-only in the ios mobile terminal (only valid in schema = input mode), the default is true. If it is not in the read-only mode in the ios mobile terminal, the selection box will pop up（data type: Boolean）
26: useChiness: Whether to display the nationality name in Chinese, the default is false.（data type: Boolean）
27: filter: Sorting function, consistent with the callback function in Array.filter. Default is null (data type: Function) new in 1.1.5
28: sort: Sorting function, consistent with the callback function in Array.sort. Default is null (data type: Function) new in 1.1.5
29: transform: Data processing function, you can use this function to deeply customize the data list, such as sorting, filtering, pinning, etc. The return value is a list of processed pairs. Default is null (data type: Function) new in 1.1.6
30: clearable: Whether it can be cleared. If the value is true, the clear button will be displayed. The default value is false (data type: Boolean) New in 1.1.7
1.show: Display list
2.hide: Hidden list
3.getSelected: Get the selected list item
4.terminal: Determine if ios or android terminal. Return data format：{android: true, ios: false}
1.vueCountryNoData：Slot displayed when country data is not found
onChange: Triggered when the user manually selects a list item, it will pass selected, value to onChange.show: Triggered after the drop-down pop-up window is displayed (new in 1.1.4)`hide: Triggered after the drop-down pop-up window is hidden (new in 1.1.4)`A Vue-based national flag flag component
npm install vue-country-intl --save
/*****main.js****/
import VueCountryFlag from 'vue-country-intl/lib/vue-country-flag.min.js';
// import css
import 'vue-country-intl/lib/vue-country-flag.css'
// Introduce svg icons
let flagFilePath = require.context('vue-country-intl/lib/country-flag-svgs', true, /\.svg$/);
Vue.use(VueCountryFlag, flagFilePath);
/*****components used****/
<template>
<VueCountryFlag value="cn"></VueCountryFlag>
<VueCountryFlag value="+86">
<template v-slot="{country}">
<span class="slot-span">国家：<mark>{{country.name}}</mark></span>
</template>
</VueCountryFlag>
</template>
1.value: Nationality code or phone area code value
2.type: value type
3.iso2: Nationality code, the iso2 attribute must be passed when type=phone, otherwise there will be problems when the area code is 212 or 358!
4.useTitle: Whether to add the title attribute to the element, the value of title is the code of the nationality or the area code of the mobile phone (data type: Boolean)
1.getCountry: Get detailed nationality information
1.click: click event
FAQs
A vue-based mobile phone area code selection, nationality selection component（一个基于vue的手机区号选择、国籍选择组件）
We found that vue-country-intl demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.