Skip to content

lunlunshiwo/best-city

Repository files navigation

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

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

About

A Vue.js project for selecting city

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages