drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update TimePicker & BackTop

Browse source 
update TimePicker & BackTop
This commit is contained in:
梁灏 2016-12-27 12:00:45 +08:00
parent 36628acaab
commit 2d94873892
9 changed files with 179 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/back-top/back-top.vue
View file

@ -8,6 +8,7 @@
</div>
</template>
<script>
import { scrollTop } from '../../utils/assist';
const prefixCls = 'ivu-back-top';
export default {
@ -23,6 +24,10 @@
right: {
type: Number,
default: 30
},
duration: {
type: Number,
default: 1000
}
},
data () {
@ -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');
}
}

52
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';
@ -60,7 +60,7 @@
hoursList () {
let hours = [];
const hour_tmpl = {
text: '',
text: 0,
selected: false,
disabled: false,
hide: false
@ -74,6 +74,7 @@
hour.disabled = true;
if (this.hideDisabledOptions) hour.hide = true;
}
if (this.hours === i) hour.selected = true;
hours.push(hour);
}
@ -82,7 +83,7 @@
minutesList () {
let minutes = [];
const minute_tmpl = {
text: '',
text: 0,
selected: false,
disabled: false,
hide: false
@ -96,6 +97,7 @@
minute.disabled = true;
if (this.hideDisabledOptions) minute.hide = true;
}
if (this.minutes === i) minute.selected = true;
minutes.push(minute);
}
@ -104,7 +106,7 @@
secondsList () {
let seconds = [];
const second_tmpl = {
text: '',
text: 0,
selected: false,
disabled: false,
hide: false
@ -118,6 +120,7 @@
second.disabled = true;
if (this.hideDisabledOptions) second.hide = true;
}
if (this.seconds === i) second.selected = true;
seconds.push(second);
}
@ -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);
}
}
}
};

5
src/components/date-picker/panel/time.vue
View file

@ -63,7 +63,7 @@
minutes: newVal.getMinutes(),
seconds: newVal.getSeconds()
});
this.$nextTick(() => this.scrollTop());
// this.$nextTick(() => this.scrollTop());
}
}
},
@ -81,9 +81,6 @@
this.date.setSeconds(date.seconds);
this.seconds = this.date.getSeconds();
}
},
scrollTop () {
}
}
};

3
src/styles/components/index.less
View file

@ -32,4 +32,5 @@
@import "dropdown";
@import "tabs";
@import "menu";
@import "date-picker";
@import "date-picker";
@import "time-picker";

64
src/styles/components/time-picker.less Normal file
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
src/utils/assist.js
View file

@ -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) {
@ -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);
}