1.0.6 • Published 5 years ago

mobile-city v1.0.6

Weekly downloads
3
License
MIT
Repository
github
Last release
5 years ago

best-city

npm downloads

best-city 是什么

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

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

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

Attributes

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

参数说明类型可选值默认值
slide插件页面过渡动画Stringvertical/horizontalvertical
canSearchSpell是否支持拼音搜索Booleantrue/falsetrue
location当前定位Object——北京
backStyle返回键的样式Stringcross/retreat/tilted/fold/returnretreat

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

npm.io

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

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago