lunlunshiwo / best-city

A Vue.js project for selecting city

best-city

best-city 是什么

best-city 是一款用于解决移动端选择城市需求的插件。在兼顾体验度如丝般顺滑的同时，做到了市面上大多数插件不曾拥有的交互体验，力求做到如真实的ntive般的体验。

不仅在移动网页端，best-city 在还是雏形阶段时已经被应用到了H5+混合移动app应用中，并成为应用的一大亮点。

在best-city的右边是一条Nav，不仅仅可以点击，还能如丝般顺滑的滑动，手指划过Nav，与城市列表交互的感觉是别的插件无法带给你的。

Attributes

在1.0.1发布的best-city中，用户可以根据设置属性来定制属于自己的移动端城市选择组件。

参数	说明	类型	可选值	默认值
slide	插件页面过渡动画	String	vertical/horizontal	vertical
canSearchSpell	是否支持拼音搜索	Boolean	true/false	true
location	当前定位	Object	——	北京
backStyle	返回键的样式	String	cross/retreat/tilted/fold/return	retreat

Events

在1.0.1发布的best-city中，用户可以根据事件在获得插件的返回值。

事件名称	说明	回调参数
closeChooseCity	关闭城市选择插件的事件	选中的 city 对象 / null

Methods

在1.0.1发布的best-city中，用户可以调用插件的方法达到自己的目的。

方法名称	说明	回调参数
show	打开城市选择插件	——
hide	关闭城市选择插件	——

用法

best-city用法简单，首先下载依赖：

npm install best-city -S

然后添加到你的项目中, 将下列代码加在 main.js中:

import BestCity from 'best-city'

Vue.use(BestCity)

Model

<template>
  <div id="app">
    <button @click="showCity">点击</button>
    <best-city
      ref="vuecity"
      @closeChooseCity="getCity"
    ></best-city>
  </div>
</template>

export default {
  name: 'app',
  methods: {
    getCity(val) {
      console.log(val);
    },
    showCity() {
      this.$refs.vuecity.show();
    }
  }
};

Screenshot

注

代码注释思路以master分支的文档为例,代码的优雅准确以npm0.1分支为例。