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

Keywords

dlrcar

FAQs

What is dlrcar?

Is dlrcar well maintained?

Last updated on 14 Jul 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

dlrcar

Car 经销商-选车控件

git 地址：

cdn 地址：

demo 页

node 环境引入

基础 Demo ：

全量属性代码 Demo ：

dlr-car ：选车 api

props

methods

dlr-car-brand ： 品牌

props

event

dlr-car-brand-group: 品牌

props

dlr-car-brand-group-item: 品牌

props

dlr-car-series：车系

props

event

dlr-car-series-group：车系

props

dlr-car-series-group-item：车系

props

dlr-car-spec ：车型

props

event

dlr-car-spec-group：车型

props

dlr-car-spec-group-item：车型

props

Keywords

Related posts

LDAPjs Open Source Project Decommissioned After Maintainer Receives Abusive Email

CISA Launches Vulnrichment Project as NVD Backlog Hits 10,000

dlr-car-brand ：品牌