Need help with best-city?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

lunlunshiwo
129 Stars 20 Forks 46 Commits 3 Opened issues

Description

A Vue.js project for selecting city

Services available

!
?

Need anything else?

Contributors list

best-city

npm downloads

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用法简单,首先下载依赖:

js
npm install best-city -S
然后添加到你的项目中, 将下列代码加在 main.js中: ```js import BestCity from 'best-city'

Vue.use(BestCity) ```

Model

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

Screenshot

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.