dlrcar

v0.1.20

Published

4 years ago

fixed 定位在ios下兼容性问题

0High
0Medium
0Low

huanghairong

dlrcar

Car 经销商-选车控件

1: 可自定义控制打开品牌列表、车系列表、车型列表中的任意多个、一个。 2: 交互顺序品牌 -> 车系 -> 车型 ,或者车型 -> 车系 -> 品牌, 顺序正反都可以 3: 支持右侧滑出、底部滑出,默认右侧滑出【可对每一层独立设置】 4: 支持控件 fixed 锁定，默认为false 5: 开放api 可通过控件获取某个id(品牌、车系、车型)数据备注: 使用控件前请确认是否满足业务需求，如有合理的个性化需求，控件会考虑后期整理迭代体积: 57K 大版本升级0.1.x: 当前最新版：npm install [email protected] --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 [email protected])

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 | |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Car 经销商-选车控件

demo 下载: dlrCar.zip

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

dlr-car-brand ：品牌