Package Exports

best-city

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (best-city) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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分支为例。