0.1.20 • Published 4 years ago
dlrcar v0.1.20
Car 经销商-选车控件
1: 可自定义控制 打开品牌列表、车系列表、 车型列表中的任意多个、一个。 2: 交互顺序品牌 -> 车系 -> 车型 ,或者 车型 -> 车系 -> 品牌, 顺序正反都可以 3: 支持 右侧滑出、底部滑出,默认右侧滑出 【可对每一层独立设置】 4: 支持控件 fixed 锁定,默认为false 5: 开放api 可通过控件获取某个id(品牌、车系、车型)数据 备注: 使用控件前请确认是否满足业务需求,如有合理的个性化需求,控件会考虑后期整理迭代 体积: 57K 大版本升级0.1.x: 当前最新版:npm install dlrcar@0.1.2 --save (使用方式不变) 0.1.x版本改动说明: 1: 半屏方式更改为全屏方式 2: 多层级模式下,第一屏为底部弹出,其它层为右侧弹出 3: 增加品牌浮动吸顶效果,右侧滑动箭头跟随效果
demo 下载: dlrCar.zip
git 地址:
https://git.corpautohome.com/gp_rd_fe_dealer/Dealer_Components/commits/car_v0.0.2
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/car/car.min.0.1.8.js"></script>
demo 页
http://10.168.66.123:9090/out/dealerUI/demo/components/car
node 环境引入
1:安装
npm install dlrcar (如指定版本号:npm install dlrcar@0.1.8)
2:引入并注册
import Vue from 'vue'
import dlrCar from 'dlrcar'
Vue.use(dlrCar)
基础 Demo :
<template>
<section class="wrap">
<Button class="btn" type="primary" @click="showBrand()">显示品牌 </Button>
<!-- 选车控件 -->
<dlr-car ref="dlrCarBrand" v-model="ui.showBrand" :fixed="true">
<!-- start 选品牌 -->
<dlr-car-brand slot="dlrCarBrand"
:data="brandData"
:selected-id="currentBrandId"
@on-select-brand="selectBrandHandler">
<!-- 分组 for -->
<dlr-car-brand-group slot="dlrCarBrandGroup" v-for="(item) in brandData" :key="item.id"
:alpha="item.alpha">
<!-- 品牌项 for -->
<dlr-car-brand-group-item slot="dlrCarBrandGroupItem" v-for="(si) in item.list" :key="si.id"
:data="si"
:item-id="si.id"
:item-img="si.src"
:item-name="si.name">
</dlr-car-brand-group-item>
</dlr-car-brand-group>
</dlr-car-brand>
<!-- end 选品牌 -->
</dlr-car>
</section>
</template>
<script>
export default {
name: 'dlrCarDemoSingle',
data () {
return {
currentBrandId: 105, // 默认品牌id,若无,请传0
ui: {
showBrand: false
},
brandData: [] // 品牌数据
}
},
methods: {
showBrand () {
this.ui.showBrand = true
this.brandData = [] // 数据请求之前,必需清空
setTimeout(() => {
this.loadBrandData() // 模拟数据异步请求
}, 1000)
},
// 加载品牌数据
loadBrandData () {
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), src: 'http://image.bitautoimg.com/bt/car/default/images/logo/masterbrand/png/100/m_8_100.png' }
p.list.push(item)
}
}
this.brandData = arr
if (arr.length === 0) { // 空数据提示:
this.brandData = []
this.$refs['dlrCarBrand'].showNullText('木有数据啦。。') // 第二个参数可以不传
}
},
// 选中品牌回调
selectBrandHandler (brandData) {
console.log('brand:', brandData)
this.currentBrandId = brandData.data.id // 当前选中品牌id
}
}
}
</script>
全量属性代码 Demo :
<template>
<section class="wrap">
<Button class="btn" type="primary" @click="openAll()">品牌、车系、车型 </Button>
<dlr-car ref="dlrCar" v-model="ui.showCar" :fixed="true">
<!-- start 选品牌 -->
<dlr-car-brand slot="dlrCarBrand"
:data="brandData"
:selected-id="currentBrandId"
@on-select-brand="selectBrandHandler">
<!-- 分组 for -->
<dlr-car-brand-group slot="dlrCarBrandGroup" v-for="(item) in brandData" :key="item.id" :alpha="item.alpha" >
<!-- 品牌项 for -->
<dlr-car-brand-group-item slot="dlrCarBrandGroupItem" v-for="(si) in item.list" :key="si.id"
:data="si"
:lazy="true"
:item-id="si.id"
:item-img="si.src"
:item-name="si.name">
</dlr-car-brand-group-item>
</dlr-car-brand-group>
</dlr-car-brand>
<!-- end 选品牌 -->
<!-- start 选车系 -->
<dlr-car-series slot="dlrCarSeries"
@on-select-series="selectSeriesHandler"
:selected-id="currentSeriesId">
<!-- 分组 for -->
<dlr-car-series-group slot="dlrCarSeriesGroup" v-for="(item) in seriesData" :key="item.id"
:alpha="item.name">
<!-- 车系项 for -->
<dlr-car-series-group-item slot="dlrCarSeriesGroupItem" v-for="(si) in item.list" :key="si.id"
:data="si"
:item-id="si.id"
:item-name="si.name + 'X5'">
</dlr-car-series-group-item>
</dlr-car-series-group>
</dlr-car-series>
<!-- end 选车系 -->
<!-- start 选车型 -->
<dlr-car-spec slot="dlrCarSpec"
@on-select-spec="selectSpecHandler"
:selected-id="currentSpecId">
<!-- 分组 for -->
<dlr-car-spec-group slot="dlrCarSpecGroup" v-for="(item) in specData" :key="item.id"
:alpha="item.name">
<!-- 车型项 for -->
<dlr-car-spec-group-item
slot="dlrCarSpecGroupItem"
v-for="(si) in item.list" :key="si.id"
:data="si"
:item-id="si.id"
:item-price="si.price"
:item-name="si.name + 'X5 运动版'">
</dlr-car-spec-group-item>
</dlr-car-spec-group>
</dlr-car-spec>
<!-- end 选车型 -->
</dlr-car>
</section>
</template>
<script>
export default {
data () {
return {
currentBrandId: 105, // 默认品牌id
currentSeriesId: 102, // 默认车系id
currentSpecId: 108, // 默认车型id
ui: {
showCar: false
},
brandData: [],
seriesData: [],
specData: []
}
},
mounted () {
this.loadBrandData()
},
methods: {
// 加载品牌数据
loadBrandData () {
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), src: 'http://image.bitautoimg.com/bt/car/default/images/logo/masterbrand/png/100/m_8_100.png' }
p.list.push(item)
}
}
this.brandData = arr
if (arr.length === 0) {
this.brandData = []
const step = 1 // step: 1,品牌 2,车系 3,车型
this.$refs['dlrCar'].showNullText(step, '木有数据啦。。') // 第二个参数可以不传
}
},
// 加载车系数据
loadSeriesData () {
let arr = []
for (let i = 1; i < 6; i++) {
let p = { id: i, name: '车系' + 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.seriesData = arr
},
// 加载车型数据
loadSpecData () {
let arr = []
for (let i = 1; i < 6; i++) {
let p = { id: i, name: '车型' + i, list: [] }
arr.push(p)
for (let m = 100; m < 120; m++) {
let item = { id: (i * m + i), name: '宝马' + (i * m + i), price: '45万' }
p.list.push(item)
}
}
this.specData = arr
},
// 打开窗口
openAll () {
this.ui.showCar = true
},
// 选中品牌数据
selectBrandHandler (data) {
console.log('brand:', data)
this.currentBrandId = data.data.id
this.seriesData = []
setTimeout(() => {
this.loadSeriesData()
}, 1500)
},
// 选中车系数据
selectSeriesHandler (data) {
console.log('series:', data)
this.specData = []
setTimeout(() => {
this.loadSpecData()
}, 1000)
},
// 选中车型数据
selectSpecHandler (data) {
console.log('spec:', data)
}
}
}
</script>
dlr-car :选车 api
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 显示、隐藏 | Boolean | false |
fixed | 控件是否fixed | Boolean | false |
methods
name | 描述 | 参数 | 备注 |
---|---|---|---|
openBrand | 打开品牌窗口,如:this.$refs.dlrCarBrand.openBrand() | 无 | |
openSeries | 打开车系窗口,this.$refs.dlrCarSeries.openSeries() | 无 | |
openSpec | 打开车型窗口,this.$refs.dlrCarSpec.openSpec() | 无 | |
getBrandData | 获取品牌数据 | 品牌id | 异步方法 |
getSeriesData | 获取车系数据 | 车系id | 异步方法 |
getSpecData | 获取车型数据 | 车型id | 异步方法 |
showLoading | 数据为填充前,显示loading,this.$refs'dlrCarSpec'.showLoading() | 跟hide成对使用 | |
hideLoading | 数据为填充后,关闭loading,this.$refs'dlrCarSpec'.hideLoading() | 跟show成对使用 | |
showNullText | 自定义空文案,this.$refs'dlrCar'.showNullText('无数据') | ||
hideNullText | 自定义空文案(关闭),this.$refs'dlrCar'.hideNullText() |
dlr-car-brand : 品牌
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
data | 绑定品牌数据集合 | Array | |
slot | 该值必须是:dlrCarBrand | String | |
title | 自定义标题文案 | String | 选品牌 |
screen-type | 全屏、半屏 | String | half, half,full |
direct | 右侧、底部 滑出 | String | right, right,down |
selected-id | 默认选中品牌id | Number | 0 |
event
name | 描述 | 参数 | |
---|---|---|---|
on-select-brand | 当前选中的品牌数据 |
dlr-car-brand-group: 品牌
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
slot | 该值必须是:dlrCarBrandGroup | String | 该值必须是:dlrCarBrandGroup |
alpha | 首字母 分组 | String |
dlr-car-brand-group-item: 品牌
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
slot | 该值必须是:dlrCarBrandGroupItem | String | 该值必须是:dlrCarBrandGroupItem |
data | 原始数据 | Object | null |
item-id | 行数据 id | Number | 0 |
item-name | 行数据 name | String | '' |
item-img | 品牌图片 | String | '' |
lazy | 图片是否懒加载,注:需要在brand层级配置:data 属性才可以 | Boolean | 默认false,因为兼容老版本 |
dlr-car-series:车系
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
data | 绑定车系数据集合 | Array | |
slot | 该值必须是:dlrCarSeries | String | dlrCarSeries |
title | 自定义title文案 | String | |
direct | 弹出方向,right,down | String | |
screen-type | 半屏、全屏,half\full | String | |
selected-id | 默认车系id | Number | 0 |
event
name | 描述 | 参数 | |
---|---|---|---|
on-select-series | 选中车系行事件 |
dlr-car-series-group:车系
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
slot | 该值必须是:dlrCarSeriesGroup | String | dlrCarSeriesGroup |
alpha | 分组名称 | String |
dlr-car-series-group-item:车系
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
slot | 该值必须是:dlrCarSeriesGroupItem | String | dlrCarSeriesGroupItem |
data | 原始数据 | Object | |
item-id | 行数据id | Number | |
item-name | 行数据 名称 | String |
dlr-car-spec :车型
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
data | 绑定车型数据集合 | Array | |
slot | 该值必须是:dlrCarSpec | String | dlrCarSpec |
title | 自定义title文案 | String | |
direct | 弹出方向,right,down | String | |
screen-type | 半屏、全屏,half\full | String | |
selected-id | 默认车型id | Number | 0 |
show-all-spec | ‘全部车型’项,是否显示,默认false | Boolean | 0 |
event
name | 描述 | 参数 | |
---|---|---|---|
on-select-spec | 选中车型行事件 |
dlr-car-spec-group:车型
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
slot | 该值必须是:dlrCarSpecGroup | String | dlrCarSpecGroup |
alpha | 分组name | String |
dlr-car-spec-group-item:车型
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
slot | 该值必须是:dlrCarSpecGroupItem | String | dlrCarSpecGroupItem |
data | 原始数据 | Object | |
item-id | 行数据id | Number | |
item-name | 行数据 名称 | String | |
item-price | 车型价格 | String | |
show-price | 是否显示车型价格 | true |
0.1.20
4 years ago
0.1.10
4 years ago
0.1.9
4 years ago
0.1.8
4 years ago
0.1.7
4 years ago
0.1.6
4 years ago
0.0.15
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.14
5 years ago
0.0.13
5 years ago
0.0.12
5 years ago
0.0.11
5 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