dlrcity

City 经销商-选城市控件

1: 支持 右侧滑出、底部滑出,默认右侧滑出
2: 扩展slot，显示'定位刷新'按钮，
3: 开放api 可通过控件获取某个id数据
备注: 使用控件前请确认是否满足业务需求，如有合理的个性化需求，控件会考虑后期整理迭代
体积: 35K
大版本升级0.1.x: 当前最新版：npm install dlrcity@0.1.1 --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 dlrcity@0.1.7)
 
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方法，关闭动画交互