# dlrcar

> fixed 定位在ios下兼容性问题

Latest version **0.1.20** (published 2020-07-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install dlrcar
pnpm add dlrcar
yarn add dlrcar
bun add dlrcar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.20 |
| Published | 2020-07-14 |
| First published | 2019-04-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 0 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | huanghairong |
| Maintainers | huanghairong |
| Keywords | dlrcar |

## Links

- npm: https://www.npmjs.com/package/dlrcar
- npm.io page: https://npm.io/package/dlrcar

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 0.1.20 (latest) — 2020-07-14
- 0.1.10 — 2020-06-08
- 0.1.9 — 2020-06-08
- 0.1.8 — 2020-01-15
- 0.1.7 — 2020-01-15
- 0.1.6 — 2019-12-12
- 0.0.15 — 2019-12-06
- 0.1.5 — 2019-12-06
- 0.1.4 — 2019-11-27
- 0.1.3 — 2019-11-27
- 0.1.2 — 2019-11-25
- 0.1.1 — 2019-11-25
- 0.1.0 — 2019-11-22
- 0.0.14 — 2019-08-28
- 0.0.13 — 2019-07-19
- … 12 more at https://npm.io/package/dlrcar/versions

## README

# Car 经销商-选车控件
<br> 1: 可自定义控制 打开品牌列表、车系列表、 车型列表中的任意多个、一个。
<br> 2: 交互顺序品牌 -> 车系 -> 车型 ,或者 车型 -> 车系 -> 品牌, 顺序正反都可以
<br> 3: 支持 右侧滑出、底部滑出,默认右侧滑出 【可对每一层独立设置】
<br> 4: 支持控件 fixed 锁定，默认为false
<br> 5: 开放api 可通过控件获取某个id(品牌、车系、车型)数据
<br> <span style="color:red">备注:</span> 使用控件前请确认是否满足业务需求，如有合理的个性化需求，控件会考虑后期整理迭代
<br> <span style="color:blue">体积:</span> 57K
<br> <span style="color:red">大版本升级0.1.x: 当前最新版：npm install dlrcar@0.1.2 --save (使用方式不变)</span> 
<br> <span style="color:red">0.1.x版本改动说明:</span>
<br> <span style="color:red"> 1： 半屏方式更改为全屏方式</span>
<br> <span style="color:red"> 2： 多层级模式下，第一屏为底部弹出，其它层为右侧弹出</span>
<br> <span style="color:red"> 3： 增加品牌浮动吸顶效果，右侧滑动箭头跟随效果</span>


------------
## demo 下载: <a href="http://10.168.66.123:9090/out/dealerUI/demo/components/car/demo/dlrCar.zip">dlrCar.zip</a>

## git 地址：
 ```html
 https://git.corpautohome.com/gp_rd_fe_dealer/Dealer_Components/commits/car_v0.0.2
```

## cdn 地址：
```html
<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 页
```html
http://10.168.66.123:9090/out/dealerUI/demo/components/car
```

### node 环境引入
```html
1:安装 
  npm install dlrcar (如指定版本号：npm install dlrcar@0.1.8)

2：引入并注册
  import Vue from 'vue'
  import dlrCar from 'dlrcar'
  Vue.use(dlrCar)
```


## 基础 Demo ：
```html
<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 ：
```html
<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 |  |

---
_Source: https://npm.io/package/dlrcar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._