City 经销商-选城市控件

1: 支持 右侧滑出、底部滑出,默认右侧滑出 2: 扩展slot，显示'定位刷新'按钮， 3: 开放api 可通过控件获取某个id数据 备注: 使用控件前请确认是否满足业务需求，如有合理的个性化需求，控件会考虑后期整理迭代 体积: 35K 大版本升级0.1.x: 当前最新版：npm install [email protected] --save (使用方式不变) 0.1.x版本改动说明: 1： 半屏方式更改为全屏方式 2： 浮动吸顶、右侧箭头跟随效果 3： 增加重新定位交互功能(具体看demo实现)

demo 下载: dlrCity.zip

git 地址：

https://git.corpautohome.com/gp_rd_fe_dealer/Dealer_Components/commits/city

cdn 地址：

<script src="https://s.autoimg.cn/dealer/m/dealerUI/dlrvue/vue/vue.min.js"></script>
<script src="https://s.autoimg.cn/dealer/m/dealerUI/dlrvue/city/city.min.0.1.7.js"></script>

demo 页

http://10.168.66.123:9090/out/dealerUI/demo/components/city

node 环境引入

1:安装 
  npm install dlrcity (如指定版本号：npm install [email protected])

2：引入并注册
  import Vue from 'vue'
  import dlrCity from 'dlrcity'
  Vue.use(dlrCity)

Demo ：

<template>
  <section class="wrap">
  <!-- start 选城市 -->
  <dlr-city ref="dlrCity"
      v-model="ui.showCity"
      :show-header="true"
      :before-back="onBeforeBack"
      :before-select="onBeforSelect"
      :title-text="'选择城市'"
      :selected-id="currentCityId"
      :show-location="ui.showLocation"
      @on-location="locationHandler"
      @on-select-city="selectCityHandler">
      <!-- 分组 for -->
      <dlr-city-group slot="dlrCityGroup" v-for="(item) in cityData" :key="item.id"
        :alpha="item.alpha" >
        <!-- 城市项 for -->
        <dlr-city-group-item slot="dlrCityGroupItem" v-for="(si,giIndex) in item.list" :key="si.id"
          :data="si"
          :item-id="si.id"
          :item-name="si.name">
        </dlr-city-group-item>
      </dlr-city-group>
  </dlr-city>
  <!-- end 选城市 -->

</section>
</template>

<script>
export default {
  data () {
    return {
      currentCityId: 101, // 默认城市id
      ui: {
        showLocation: true, // 显示定位按钮
        showCity: false
      },
      cityData: []
    }
  },
  mounted () {

  },
  methods: {
    // 返回前 事件，需返回true、false
    onBeforeBack () {
      return true // false
    },
    // 城市选中前事件，需返回true、false
    onBeforSelect (data) {
      console.log('onBeforSelect', data)
      return true // false
    },
    openCity () {
      this.ui.showCity = true
      setTimeout(() => {
        this.loadCityData()
        this.ui.titleSelect = ''
      }, 1500)
    },
    // 加载城市数据
    loadCityData () {
      let arr = []
      for (let i = 1; i < 6; i++) {
        let p = { id: i, name: '市' + i, alpha: i, list: [] }
        arr.push(p)
        for (let m = 100; m < 120; m++) {
          let item = { id: (i * m + i), name: '城市名' + (i * m + i) }
          p.list.push(item)
        }
      }
      this.cityData = arr
    },
    getCityData () {
      this.$refs.dlrCity.getCityData(this.currentCityId, (data) => {
        console.log('city-data:', data)
      })
    },
    // 选中城市
    selectCityHandler (data) {
      this.currentCityId = data.id
      console.log('city-selected-data:', data)
    },
    // 定位交互 -- 定位方法完成后，需要回调 fnCall方法，关闭动画效果
    locationHandler (fnCall) {
      setTimeout(() => {
        fnCall()
      }, 3000)
    }
  }
}
</script>

dlr-city ：API

props

| 参数 | 说明 | 类型 | 默认值 |
|------|-------|-------|----------| | v-model | 显示、隐藏 | Boolean | false | | direct | 右侧、底部 滑出 | String | right, [right,down] |
| screen-type | 显示半屏、全屏 | String | right, [half,full] | | title-text | 标题文案 | String | 选择城市 | | title-select | 选中城市后的 城市名前文案 | String | 当前城市 |
| selected-id | 默认城市id | Number | 默认城市id |
| show-location | 显示定位功能 | Boolean | false |

属性 dlr-city-group

| 参数 | 说明 | 类型 | 默认值 |
|------|-------|-------|----------|
| slot | 该值必须是：dlrCityGroup | String | 该值必须是：dlrCityGroup |
| alpha | 首字母 分组 | String | |

属性 dlr-city-group-item

| 参数 | 说明 | 类型 | 默认值 |
|------|-------|-------|----------|
| slot | 该值必须是：dlrCityGroupItem | String | 该值必须是：dlrCityGroupItem |
| data | 原始数据 | Object | null | | item-id | 行数据 id | Number | 0 | | item-name | 行数据 name | String | '' |

方法

| name | 描述 | 参数 | |------|--------| --------| | getCityData | 获取城市数据，this.$refs['xxx'].getCityData（id,function(item){}） | cityId,注意：数据在异步回调方法中返回！！ |

事件

| name | 描述 | 参数 | |------|--------| --------| | on-select-city | 当前选中的城市数据 | | | on-location | 定位交互-回调事件，需开发者回调 fnCall方法，关闭动画交互 | |