Gathering detailed insights and metrics for vue-country-intl
Installations
npm install vue-country-intlDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
20.12.0
NPM Version
7.24.2
Score
48
Supply Chain
91.3
Quality
78.5
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
4
JavaScript
Vue
CSS
HTML
JavaScript (43.99%)
Vue (26.52%)
CSS (18.99%)
HTML (10.49%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
941477276
Download Statistics
Total Downloads
27,558
Last Day
18
Last Week
94
Last Month
610
Last Year
8,861
GitHub Statistics
53 Stars
66 Commits
18 Forks
2 Watching
6 Branches
1 Contributors
Bundle Size
66.13 kB
Minified
22.10 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.1.9
Package Id
vue-country-intl@1.1.9
Unpacked Size
686.23 kB
Size
259.71 kB
File Count
260
NPM Version
7.24.2
Node Version
20.12.0
Publised On
03 Dec 2024
Total Downloads
Cumulative downloads
Total Downloads
27,558
Last day
-35.7%
18
Compared to previous day
Last week
-33.3%
94
Compared to previous week
Last month
-18.9%
610
Compared to previous month
Last year
31.6%
8,861
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
20
@vue/cli-plugin-babel@vue/cli-plugin-eslint@vue/cli-servicebabel-eslintbabel-loadercopy-webpack-plugincss-loadereslinteslint-plugin-vueextract-text-webpack-pluginfile-loaderoptimize-css-assets-webpack-pluginstyle-loaderuglifyjs-webpack-pluginurl-loadervue-loadervue-template-compilerwebpackwebpack-clivue
Versions
1 vue-country-intl
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:
- iso2 code: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
- country code: https://en.wikipedia.org/wiki/List_of_country_calling_codes
Effect preview
https://941477276.github.io/vue-country-intl/dist/
1.1 Brother
vue版的国籍/手机区号选择插件(
vue-country-intl)
react版的国籍/手机区号选择插件(
reaxt-country-intl)
微信小程序版的国籍/手机区号选择插件(
wx-country-intl)
基于better-scroll的下拉刷新、上拉加载Vue插件(
vue-scroll-refresh-load)
1.2 Install
npm install vue-country-intl --save
1.3 Usage——.vue Single file
/*****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>
1.4 Usage——Import js files directly
<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: {}
});
1.5 schema=input(default)
<template>
<VueCountryIntl v-model="phoneCountry"></VueCountryIntl>
</template>
effect:
display the nationality name in Chinese
1.6 schema=popover(popover)
<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:
1.7 schema=modal
<template>
<VueCountryIntl schema="modal" v-model="phoneCountry"></VueCountryIntl>
</template>
effect:
1.8 props
1.schema: Display mode
- input: Display as an
inputinput box (default) - popover: Popover pop-up form
- modal: Modal box pop-up form
2.type: Value type
- phone: To select the area code
- country: Select nationality
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.9 Methods(method)
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.10 slot
1.vueCountryNoData：Slot displayed when country data is not found
1.11 Event
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)`
2、country-flag
A Vue-based national flag flag component
Effect preview
2.1、Install
npm install vue-country-intl --save
1.3、Usage
/*****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.4、props
1.value: Nationality code or phone area code value
2.type: value type
- phone: Indicates the selection of the mobile phone area code
- country: Indicates the choice of nationality
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.5、Methods
1.getCountry: Get detailed nationality information
1.6、Event
1.click: click event
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
1 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
50 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
1.3
/10
Last Scanned on 2025-02-03
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More