经销商 Picker

picker 选择器：【m端日历，无依赖性】 1: 支持单组，多组模式 2: 支持 联动滚动(控件提供change事件自行实现) 备注: 使用插件前请确认是否满足业务需求，如有合理的个性化需求，控件会考虑后期整理迭代 体积: 19K

git 地址：

https://git.corpautohome.com/gp_rd_fe_dealer/Dealer_Components/commits/picker

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/picker/picker.min.0.0.2.js"></script>

demo 页

http://10.168.66.123:9090/out/dealerUI/demo/components/picker

node 环境引入

1:安装 
  npm install dlrpicker (如指定版本号：npm install [email protected])

2：引入并注册
  import Vue from 'vue'
  import dlrPicker from 'dlrpicker'
  Vue.use(dlrPicker)

例子

代码示例

<template>
  <section>
    <Button @click="showPicker()">联动Picker</Button>
    </br></br></br>
    <Button @click="showPicker2()">单组Picker</Button>
    </br></br></br>
    <Button @click="showPickerUnit()">带单位 Picker</Button>
  <!-- start picker -->
  <dlr-picker ref="picker"
      v-model="ui.show"
      :data="pcikerData"
      :title="'选择'"
      @on-change="pcikerChangeHandler"
      @on-select="pickerSelectHandler">
  </dlr-picker>
  <!-- end picker -->

  <!-- start picker -->
  <dlr-picker ref="picker2"
      v-model="ui.show2"
      :data="pcikerData2"
      :title="'选择'"
      @on-change="pcikerChangeHandler2"
      @on-select="pickerSelectHandler2">
  </dlr-picker>
  <!-- end picker -->


  <!-- start picker 带单位-->
  <dlr-picker ref="picker3"
      v-model="ui.show3"
      :data="pcikerData3"
      title="公里数"
      :unit-style="{'margin-left':'0px'}"
      @on-change="pcikerChangeHandlerUnit"
      @on-select="pickerSelectHandlerUnit">
  </dlr-picker>
  <!-- end picker -->

</section>
</template>

<script>
export default {
  data () {
    return {
      pcikerData: [
        { defaultIndex: 1, values: [{ text: '北京', value: 'beijing' }, { text: '山东', value: 'shandong' }] },
        { defaultIndex: 1, values: [{ text: '北京市', value: 'beijing' }, { text: '济南', value: 'shandong' }, { text: '青岛', value: 'shandong' }] },
        { defaultIndex: 0, values: [{ text: '北京', value: 'beijing' }] }
      ],
      pcikerData2: [
        { defaultIndex: 4,
          values: [{ text: '2015', value: 2015 },
            { text: '2016', value: 2016 },
            { text: '2017', value: 2017 },
            { text: '2018', value: 2018 },
            { text: '2019', value: 2019 },
            { text: '2020', value: 2020 }] }
      ],
      pcikerData3: [
        { 
          defaultIndex: 4,
          unit:'万',
          values: [{ text: '1', value: 1 },
            { text: '2', value: 2 },
            { text: '3', value: 3 },
            { text: '4', value: 4 },
            { text: '5', value: 5 },
            { text: '16', value: 6 }] 
        },
        { 
          defaultIndex: 1,
          unit:'千公里',
          values: [{ text: '5', value: 50550 },
            { text: '6', value: 6 },
            { text: '7', value: 7 },
            { text: '8', value: 8 },
            { text: '9', value: 9 },
            { text: '10', value: 10 }] 
        }
      ],
      ui: { show: false, show2: false ,show3:false}
    }
  },
  mounted () {
  },
  methods: {
    // 显示Picker
    showPicker () {
      this.ui.show = true
    },
    showPicker2 () {
      this.ui.show2 = true
    },
    // 带单位
    showPickerUnit () {
      this.ui.show3 = true
    },
    // 动创建数据
    pcikerChangeHandler (data) {
      const { colIndex, rowIndex } = data
      let values = []
      if (colIndex === 1) {
        if (rowIndex === 0) {
          values = [{ text: '海淀区', value: 'haidian' }, { text: '朝阳区', value: 'chaoyang' }]
        } else if (rowIndex === 1) {
          values = [{ text: '历下区', value: 'lixia' }, { text: '高开区', value: 'gaokai' }]
        }
        if (values.length > 0) {
          this.$refs.picker.setPickerData(2, values) // 设置某组的数据
          this.$refs.picker.scrollTo(2, 0) // 滚动到指定索引位置
        }
      }
      if (colIndex === 0) {
        if (rowIndex === 0) {
          values = [{ text: '北京市', value: 'beijing' }]
        } else if (rowIndex === 1) {
          values = [{ text: '济南', value: 'lixia' }, { text: '青岛', value: 'gaokai' }, { text: '烟台', value: 'gaokai' }]
        }
        if (values.length > 0) {
          this.$refs.picker.setPickerData(1, values) // 设置某组的数据
          this.$refs.picker.scrollTo(1, 0) // 滚动到指定索引位置
        }
      }
    },
    // 确认 回调
    pickerSelectHandler (data) {
      console.log('on-select:', data)
    },
    pcikerChangeHandler2 () {

    },
    pickerSelectHandler2 () {

    },
    // 带单位 change 事件
    /**
    {selectIndex: Array(2), selectData: Array(2)}
      selectIndex: 选中行的索引(所有列)
      selectData： 选中行的数据对象(所有列)
     */
    pcikerChangeHandlerUnit (data) {
      console.log('on-change:', data)
    },

    // 带单位 选中数据事件
    /** 
      {colIndex: 1, rowIndex: 2} 
        colIndex: 列索引， rowIndex：行索引
    */
    pickerSelectHandlerUnit (data) {
      console.log('on-select:', data)
    }
  }
}
</script>

API

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|-------|---------|-------|--------| | v-model | 显示控制，双向绑定 | Boolean | | 见demo | | data | 初始数据 | Object | | 见demo | | title | 标题 | String | | 见demo | | unit-style | 单位 样式,一般用于调整间距，默认不需要 | Object | | |

Event

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|-------|---------|-------|--------| | on-change | 滚轮改变事件 | | | 见demo | | on-select | 确定事件 | | | 见demo |

Methods

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|-------|---------|-------|--------| | setPickerData | 更新某列数据【类型：数组】,参数1：列索引，参数2：更新的数据 | | | | | scrollTo | 指定列滚动到某行索引位置，参数1：列索引，参数2：行索引 | | | 见demo |