0.1.0 • Published 4 years ago
dlrpicker v0.1.0
经销商 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 dlrpicker@0.0.6)
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 |