Skip to content

Commit

Permalink
update TimePicker & BackTop
Browse files Browse the repository at this point in the history 
update TimePicker & BackTop
  • Loading branch information
@icarusion
icarusion committed Dec 27, 2016
1 parent 36628ac commit 2d94873
Show file tree
Hide file tree
Showing 9 changed files with 179 additions and 98 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.json
View file
Expand Up @@ -13,6 +13,6 @@
"indent": ["error", 4, { "SwitchCase": 1 }],
"quotes": ["error", "single"],
"semi": ["error", "always"],
"no-console": ["off"]
"no-console": ["error"]
}
}
7 changes: 6 additions & 1 deletion src/components/back-top/back-top.vue
View file
Expand Up @@ -8,6 +8,7 @@
</div>
</template>
<script>
import { scrollTop } from '../../utils/assist';
const prefixCls = 'ivu-back-top';
export default {
Expand All @@ -23,6 +24,10 @@
right: {
type: Number,
default: 30
},
duration: {
type: Number,
default: 1000
}
},
data () {
Expand Down Expand Up @@ -62,7 +67,7 @@
this.backTop = window.pageYOffset >= this.height;
},
back () {
window.scrollTo(0, 0);
scrollTop(window, document.body.scrollTop, 0, this.duration);
this.$emit('on-click');
}
}
Expand Down
52 changes: 39 additions & 13 deletions src/components/date-picker/base/time-spinner.vue
View file
@@ -1,25 +1,25 @@
<template>
<div :class="classes">
<div :class="[prefixCls+ '-wrapper']">
<ul :class="[prefixCls + '-list']">
<li :class="getCellCls(item)" v-for="item in hoursList" v-show="!item.hide">{{ item.text }}</li>
<div :class="[prefixCls+ '-list']" v-el:hours>
<ul @click="handleClickHours">
<li :class="getCellCls(item)" v-for="item in hoursList" v-show="!item.hide" :index="$index">{{ item.text < 10 ? '0' + item.text : item.text }}</li>
</ul>
</div>
<div :class="[prefixCls+ '-wrapper']">
<ul :class="[prefixCls + '-list']">
<li :class="getCellCls(item)" v-for="item in minutesList" v-show="!item.hide">{{ item.text }}</li>
<div :class="[prefixCls+ '-list']" v-el:minutes>
<ul @click="handleClickMinutes">
<li :class="getCellCls(item)" v-for="item in minutesList" v-show="!item.hide" :index="$index">{{ item.text < 10 ? '0' + item.text : item.text }}</li>
</ul>
</div>
<div :class="[prefixCls+ '-wrapper']" v-show="showSeconds">
<ul :class="[prefixCls + '-list']">
<li :class="getCellCls(item)" v-for="item in secondsList" v-show="!item.hide">{{ item.text }}</li>
<div :class="[prefixCls+ '-list']" v-show="showSeconds" v-el:seconds>
<ul @click="handleClickSeconds">
<li :class="getCellCls(item)" v-for="item in secondsList" v-show="!item.hide" :index="$index">{{ item.text < 10 ? '0' + item.text : item.text }}</li>
</ul>
</div>
</div>
</template>
<script>
import Options from '../time-mixins';
import { deepCopy } from '../../../utils/assist';
import { deepCopy, scrollTop } from '../../../utils/assist';
const prefixCls = 'ivu-time-picker-cells';
Expand Down Expand Up @@ -60,7 +60,7 @@
hoursList () {
let hours = [];
const hour_tmpl = {
text: '',
text: 0,
selected: false,
disabled: false,
hide: false
Expand All @@ -74,6 +74,7 @@
hour.disabled = true;
if (this.hideDisabledOptions) hour.hide = true;
}
if (this.hours === i) hour.selected = true;
hours.push(hour);
}
Expand All @@ -82,7 +83,7 @@
minutesList () {
let minutes = [];
const minute_tmpl = {
text: '',
text: 0,
selected: false,
disabled: false,
hide: false
Expand All @@ -96,6 +97,7 @@
minute.disabled = true;
if (this.hideDisabledOptions) minute.hide = true;
}
if (this.minutes === i) minute.selected = true;
minutes.push(minute);
}
Expand All @@ -104,7 +106,7 @@
secondsList () {
let seconds = [];
const second_tmpl = {
text: '',
text: 0,
selected: false,
disabled: false,
hide: false
Expand All @@ -118,6 +120,7 @@
second.disabled = true;
if (this.hideDisabledOptions) second.hide = true;
}
if (this.seconds === i) second.selected = true;
seconds.push(second);
}
Expand All @@ -133,6 +136,29 @@
[`${prefixCls}-cell-disabled`]: cell.disabled
}
];
},
handleClickHours (event) {
this.handleClick('hours', event);
},
handleClickMinutes (event) {
this.handleClick('minutes', event);
},
handleClickSeconds (event) {
this.handleClick('seconds', event);
},
handleClick (type, event) {
const target = event.target;
if (target.tagName === 'LI') {
const cell = this[`${type}List`][parseInt(event.target.getAttribute('index'))];
if (cell.disabled) return;
const data = {};
data[type] = cell.text;
this.$emit('on-change', data);
const from = this.$els[type].scrollTop;
const to = 24 * cell.text;
scrollTop(this.$els[type], from, to, 500);
}
}
}
};
Expand Down
5 changes: 1 addition & 4 deletions src/components/date-picker/panel/time.vue
View file
Expand Up @@ -63,7 +63,7 @@
minutes: newVal.getMinutes(),
seconds: newVal.getSeconds()
});
this.$nextTick(() => this.scrollTop());
// this.$nextTick(() => this.scrollTop());
}
}
},
Expand All @@ -81,9 +81,6 @@
this.date.setSeconds(date.seconds);
this.seconds = this.date.getSeconds();
}
},
scrollTop () {
}
}
};
Expand Down
3 changes: 2 additions & 1 deletion src/styles/components/index.less
View file
Expand Up @@ -32,4 +32,5 @@
@import "dropdown";
@import "tabs";
@import "menu";
@import "date-picker";
@import "date-picker";
@import "time-picker";
64 changes: 64 additions & 0 deletions src/styles/components/time-picker.less
View file
@@ -0,0 +1,64 @@
@time-picker-prefix-cls: ~"@{css-prefix}time-picker";
.@{time-picker-prefix-cls} {
&-cells{
min-width: 112px;
&-with-seconds{
min-width: 168px;
}

&-list{
width: 56px;
float: left;
position: relative;
max-height: 144px;
overflow-y: auto;
border-left: 1px solid @border-color-split;
&:first-child{
border-left: none;
border-radius: @btn-border-radius 0 0 0;
}
&:last-child{
border-radius: 0 @btn-border-radius 0 0;
}
ul{
width: 100%;
margin: 0;
padding: 0 0 120px 0;
list-style: none;
li{
width: 100%;
height: 24px;
line-height: 24px;
margin: 0;
padding: 0 0 0 16px;
box-sizing: border-box;
text-align: left;
user-select: none;
cursor: pointer;
list-style: none;
transition: background @transition-time @ease-in-out;

}
}
}
&-cell{
&:hover{
background: @background-color-select-hover;
}
&-disabled {
color: @btn-disable-color;
cursor: @cursor-disabled;

&:hover {
color: @btn-disable-color;
background-color: #fff;
cursor: @cursor-disabled;
}
}
&-selected ,&-selected:hover{
color: @primary-color;
background: @background-color-select-hover;
}
}
}
}
37 changes: 35 additions & 2 deletions src/utils/assist.js
View file
Expand Up @@ -86,7 +86,7 @@ function firstUpperCase(str) {
export function warnProp(component, prop, correctType, wrongType) {
correctType = firstUpperCase(correctType);
wrongType = firstUpperCase(wrongType);
console.error(`[iView warn]: Invalid prop: type check failed for prop ${prop}. Expected ${correctType}, got ${wrongType}. (found in component: ${component})`);
console.error(`[iView warn]: Invalid prop: type check failed for prop ${prop}. Expected ${correctType}, got ${wrongType}. (found in component: ${component})`); // eslint-disable-line
}

function typeOf(obj) {
Expand Down Expand Up @@ -131,4 +131,37 @@ function deepCopy(data) {
return o;
}

export {deepCopy};
export {deepCopy};

// scrollTop animation
export function scrollTop(el, from = 0, to, duration = 500) {
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 1000/60);
}
)
}
const difference = Math.abs(from - to);
const step = Math.ceil(difference / duration * 50);

function scroll(start, end, step) {
if (start === end) return;

let d = (start + step > end) ? end : start + step;
if (start > end) {
d = (start - step < end) ? end : start - step;
}

if (el === window) {
window.scrollTo(d, d);
} else {
el.scrollTop = d;
}
window.requestAnimationFrame(() => scroll(d, end, step));
}
scroll(from, to, step);
}
13 changes: 11 additions & 2 deletions test/routers/date.vue
View file
@@ -1,3 +1,8 @@
<style>
body{
height: auto !important;
}
</style>
<template>
<row>
<i-col span="12">
Expand All @@ -7,12 +12,16 @@
<date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker>
</i-col>
<i-col span="12">
<time-picker placeholder="选择时间" :hide-disabled-options="false" :disabled-hours="[1,2]" style="width: 200px"></time-picker>
<time-picker :value="value" placeholder="选择时间" format="HH:mm:ss" :hide-disabled-options="false" :disabled-hours="[1,2]" style="width: 168px"></time-picker>
</i-col>
</row>
</template>
<script>
export default {
data () {
return {
value: '2016-12-12 03:03:03'
}
}
}
</script>

0 comments on commit 2d94873

Please sign in to comment.