# vue-country-selector

> A component base on Vue.js for selecting country.

Latest version **1.0.2** (published 2018-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-country-selector
pnpm add vue-country-selector
yarn add vue-country-selector
bun add vue-country-selector
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-09-21 |
| First published | 2018-09-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 467.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 16 |
| Author | luichoy |
| Maintainers | luichooy |
| Keywords | country-selector, vue, component |

## Links

- npm: https://www.npmjs.com/package/vue-country-selector
- Repository: https://github.com/luichooy/country-selector
- Homepage: https://github.com/luichooy/country-selector#readme
- Issues: https://github.com/luichooy/country-selector/issues
- npm.io page: https://npm.io/package/vue-country-selector

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.17

## Recent versions

- 1.0.2 (latest) — 2018-09-21
- 1.0.1 — 2018-09-21
- 1.0.0 — 2018-09-20

## README

# vue-country-selector

# 介绍
vue-country-selector是基于Vue.js开发的一个国家选择器，可用来快速选择、搜索国家。它的样式参考了[Element-ui](https://element.eleme.io/)中el-input的样式。



![example1.png | center | 519x287](https://cdn.nlark.com/yuque/0/2018/png/95048/1537516655380-7593f7ff-7cdf-44ae-a42f-37e8afee308b.png "")




![example2.png | center | 317x298](https://cdn.nlark.com/yuque/0/2018/png/95048/1537516671100-f979767d-81e3-4c35-b2a8-9967f5a94bee.png "")


## 安装
```plain
#npm
npm install vue-country-selector --save

# yarn
yarn add vue-country-selector
```


## 快速开始
```plain
// main.js
import Vue from 'vue';
import CountrySelector from 'vue-country-selector';

// import stylesheet
import 'vue-country-selector/dist/countryselect.css';

// use in template tag
<template>
    <country-selector v-model="selected" width="260" ></country-selector>
</template>
```

## 参数列表


| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| width | 定义组件的宽度 | String/Number | —— | 默认宽度为100% |
| language | 定义组件的默认显示语言 | String | zh/en/auto | auto，即根据浏览器语言来显示 |
| placeholder | 定义文本输入框的placeholder | String | —— | —— |
| size | 组件的size | String | large/medium/small/mini | medium |
| data | 组件的数据源 | Array | —— | 默认值及格式要求见下 |
| value | v-model绑定的值 | String | —— | —— |

### data数据源
vue-country-select组件将根据data数据源中的数据来渲染组件的可选项，你可以根据自己的业务要求，通过data选项灵活的配置数据，如果你没有传入data选项，则vue-country-selector组件将使用内部默认的数据源来渲染组件。

data数据源的格式：
```plain
[
    {
        code: 'CN',             // id
        cnName: '中国'，         // 中文名
        cnSpell: 'zhongguo',    // 中文拼音（大小写均可）
        enName: 'China',        // 英文名
        hot: true               // 是否热门，值为true的国家将显示在HOTtab下
    },
    {
        code: 'us',
        cnName: '美国'，
        cnSpell: 'meiguo',
        enName: 'United States of America',
        hot: false
    },
    ...
]
```

---
_Source: https://npm.io/package/vue-country-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._