# vue-city-pinyin

> City selection package

Latest version **2.0.8** (published 2025-04-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-city-pinyin
pnpm add vue-city-pinyin
yarn add vue-city-pinyin
bun add vue-city-pinyin
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.8 |
| Published | 2025-04-05 |
| First published | 2021-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 233.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Saturn |
| Maintainers | saturn |
| Keywords | city-picker, city-select, vue-city, vue-city-pinyin |

## Links

- npm: https://www.npmjs.com/package/vue-city-pinyin
- Repository: https://github.com/vmto/vue-city-pinyin
- Homepage: https://github.com/vmto
- Issues: https://github.com/vmto/vue-city-pinyin/issues
- npm.io page: https://npm.io/package/vue-city-pinyin

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^3.5.13
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [ts-tooltip](https://npm.io/package/ts-tooltip.md) ^1.0.3

## Recent versions

- 2.0.8 (latest) — 2025-04-05
- 2.0.7 — 2025-04-05
- 2.0.6 — 2025-04-05
- 2.0.5 — 2025-04-05
- 2.0.3 — 2025-04-02
- 2.0.2 — 2025-04-02
- 2.0.1 — 2025-04-02
- 2.0.0 — 2025-04-02
- 1.0.2 — 2021-04-26
- 1.0.1 — 2021-04-26
- 1.0.0 — 2021-04-26

## README

# vue-city-pinyin

> Development based on webstorm2023 and volar plugin

## Install

````
pnpm add vue-city-pinyin
````

## Preview
![color](img/demo.png)

## Example

````base
# main.js

// code...

import cityPinyin from 'vue-city-pinyin';
import 'vue-city-pinyin/dist/index.css';

app.use(cityPinyin);
````

````base
<script setup lang="ts">
import { ref } from 'vue'

type CityType = {
  id: string
  name: string
}

const startCity = ref<CityType>({
  id: '',
  name: '',
})

const endCity = ref<CityType>({
  id: '',
  name: '',
})

function onChange(item: CityType, type: string) {
  if (type === 'start')
    startCity.value = item
  else
    endCity.value = item
}

function onSubmit() {
  console.log('出发城市', startCity.value);
  console.log('到达城市', endCity.value);
}
</script>

<template>
  <div class="demo">
    <div style="padding: 10px;">
      <div>出发城市</div>
      <city-select :data="startCity" @on-change="onChange($event, 'start')" hot/>
    </div>
    <div style="padding: 10px;">
      <div>到达城市</div>
      <city-select :data="endCity" @on-change="onChange($event, 'end')"/>
    </div>
    <div style="padding: 10px;">
      <button @click="onSubmit">获取城市</button>
    </div>
  </div>
</template>
````

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