0.1.20 • Published 4 years ago
dlrcity v0.1.20
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方法,关闭动画交互 |
0.1.20
4 years ago
0.1.10
4 years ago
0.1.8
4 years ago
0.1.7
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago
0.0.10
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago