Skip to content

Commit

Permalink
add createDatePicker API
Browse files Browse the repository at this point in the history
  • Loading branch information
AmyFoxFN committed Nov 29, 2017
1 parent cd16df0 commit e39df6f
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 40 deletions.
3 changes: 2 additions & 1 deletion build/webpack.base.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ module.exports = {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue2': 'vue/dist/vue.esm.js',
'@': resolve('src')
'@': resolve('src'),
'example': resolve('example')
}
},
module: {
Expand Down
70 changes: 70 additions & 0 deletions example/components/date-picker.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<template>
<cube-picker
ref="datePicker"
title="Choose Date"
:data="dateData"
@change="change"
@select="select"
@cancel="cancel">
</cube-picker>
</template>

<script>
function range(n, m, polyfill = false) {
let arr = []
for (let i = n; i <= m; i++) {
let value = polyfill && i < 10 ? '0' + i : i
arr.push({
text: value,
value: value
})
}
return arr
}
const year = range(2010, 2020)
const month = range(1, 12)
const COMPONENT_NAME = 'date-picker'
const EVENT_SELECT = 'select'
const EVENT_CANCEL = 'cancel'
export default {
name: COMPONENT_NAME,
data() {
return {
tempIndex: [0, 0, 0]
}
},
computed: {
dateData() {
let day = 30
if ([0, 2, 4, 6, 7, 9, 11].includes(this.tempIndex[1])) {
day = 31
} else {
if (this.tempIndex[1] === 1) {
day = this.tempIndex[0] % 4 ? 28 : 29
}
}
return [year, month, range(1, day)]
}
},
methods: {
show() {
this.$refs.datePicker.show()
},
hide() {
this.$refs.datePicker.hide()
},
change(i, newIndex) {
this.tempIndex.splice(i, 1, newIndex)
this.$refs.datePicker.setData(this.dateData, this.tempIndex)
},
select(selectedVal, selectedIndex) {
this.$emit(EVENT_SELECT, selectedVal, selectedIndex)
},
cancel() {
this.$emit(EVENT_CANCEL)
}
}
}
</script>
63 changes: 24 additions & 39 deletions example/pages/picker.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,27 @@
<cube-page type="picker-view" title="Picker(选择器)" desc="">
<div slot="content">
<cube-button-group>
<cube-button @click="showTimePicker">Picker</cube-button>
<cube-button @click="showTimePickerMuti">Picker - multiple Columns</cube-button>
<cube-button @click="showTimePickerLinkage">Picker - linkage</cube-button>
<cube-button @click="showTimePickerSetData">Picker - setData</cube-button>
<cube-button @click="showDayPicker">Year-Month-Day</cube-button>
<cube-button @click="showPicker">Picker</cube-button>
<cube-button @click="showPickerMuti">Picker - multiple Columns</cube-button>
<cube-button @click="showPickerLinkage">Picker - linkage</cube-button>
<cube-button @click="showPickerSetData">Picker - setData</cube-button>
<cube-button @click="showDatePicker">Year-Month-Day</cube-button>
<cube-button @click="showSecondPicker">HH:MM:SS</cube-button>
</cube-button-group>
</div>
</cube-page>
</template>

<script type="text/ecmascript-6">
import CubePage from '../components/cube-page.vue'
import CubeButtonGroup from '../components/cube-button-group.vue'
import { provinceList, cityList, areaList } from '../data/area'
import { data1, data2, data3 } from '../data/picker'
import CubePage from 'example/components/cube-page.vue'
import CubeButtonGroup from 'example/components/cube-button-group.vue'
import DatePicker from 'example/components/date-picker.vue'
import { provinceList, cityList, areaList } from 'example/data/area'
import { data1, data2, data3 } from 'example/data/picker'
import Vue from 'vue'
import createAPI from '@/modules/create-api'
const year = range(2010, 2020)
const month = range(1, 12)
createAPI(Vue, DatePicker, ['select', 'cancel'], false)
function range(n, m, polyfill = false) {
let arr = []
Expand Down Expand Up @@ -119,17 +121,11 @@
}
})
this.dayPicker = this.$createPicker({
title: 'Year-Month-Day',
data: this.dayData,
onChange: (i, newIndex) => {
this.tempIndexDay.splice(i, 1, newIndex)
this.dayPicker.setData(this.dayData, this.tempIndexDay)
},
onSelect: (selectedText, selectedIndex) => {
this.datePicker = this.$createDatePicker({
onSelect: (selectedVal, selectedIndex) => {
this.$createDialog({
type: 'warn',
content: `Year-Month-Day:${selectedText.join('-')} <br/> selected index: ${selectedIndex.join(',')}`,
content: `Year-Month-Day:${selectedVal.join('-')} <br/> selected index: ${selectedIndex.join(',')}`,
icon: 'cubeic-alert'
}).show()
},
Expand All @@ -146,10 +142,10 @@
title: 'HH:MM:SS',
data: [range(0, 23, true), range(0, 59, true), range(0, 59, true)],
selectedIndex: [10, 20, 59],
onSelect: (selectedText, selectedIndex) => {
onSelect: (selectedVal, selectedIndex) => {
this.$createDialog({
type: 'warn',
content: `HH:MM:SS:${selectedText.join(':')} <br/> selected index: ${selectedIndex.join(',')}`,
content: `HH:MM:SS:${selectedVal.join(':')} <br/> selected index: ${selectedIndex.join(',')}`,
icon: 'cubeic-alert'
}).show()
},
Expand Down Expand Up @@ -184,35 +180,24 @@
const areas = areaList[cities[this.tempIndex[1]].value]
return [provinces, cities, areas]
},
dayData() {
let day = 30
if ([0, 2, 4, 6, 7, 9, 11].includes(this.tempIndexDay[1])) {
day = 31
} else {
if (this.tempIndexDay[1] === 1) {
day = this.tempIndexDay[0] % 4 ? 28 : 29
}
}
return [year, month, range(1, day)]
}
},
methods: {
showTimePicker() {
showPicker() {
this.picker.show()
},
showTimePickerMuti() {
showPickerMuti() {
this.mutiPicker.show()
},
showTimePickerLinkage() {
showPickerLinkage() {
this.linkagePicker.show()
},
showTimePickerSetData() {
showPickerSetData() {
this.setDataPicker.setData([data1, data2, data3], [1, 2, 3])
this.setDataPicker.show()
},
showDayPicker() {
this.dayPicker.show()
showDatePicker() {
this.datePicker.show()
},
showSecondPicker() {
this.secondPicker.show()
Expand Down

0 comments on commit e39df6f

Please sign in to comment.