dlrcar

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

methods

dlr-car-brand ： 品牌

props

event

| name | 描述 | 参数 | |------|--------|--------|--------| | on-select-brand | 当前选中的品牌数据 | | |

dlr-car-brand-group: 品牌

props

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

props

dlr-car-series：车系

props

event

| name | 描述 | 参数 | |------|--------|--------|--------| | on-select-series | 选中车系行事件 | | |

dlr-car-series-group：车系

props

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

props

dlr-car-spec ：车型

props

event

| name | 描述 | 参数 | |------|--------|--------|--------| | on-select-spec | 选中车型行事件 | | |

dlr-car-spec-group：车型

props

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

props