drip-public/iview
6
1
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc.json
View file

@ -13,6 +13,6 @@
"indent": ["error", 4, { "SwitchCase": 1 }],
"quotes": ["error", "single"],
"semi": ["error", "always"],
"no-console": ["off"]
"no-console": ["error"]
}
}

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

13
test/routers/date.vue
View file

@ -1,3 +1,8 @@
<style>
body{
height: auto !important;
}
</style>
<template>
<row>
<i-col span="12">
@ -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>

94
test/routers/more.vue
View file

@ -1,82 +1,28 @@
<style scoped>
.demo-row{
margin-bottom: 5px;
background-image: -webkit-linear-gradient(0deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
}
.demo-col{
color: #fff;
padding: 30px 0;
text-align: center;
font-size: 18px;
background: rgba(0, 153, 229, .7);
}
.demo-col.light{
background: rgba(0, 153, 229, .5);
}
.demo-row.light .demo-col{
background: rgba(0, 153, 229, .5);
}
.demo-row.light .demo-col.light{
background: rgba(0, 153, 229, .3);
}
.ivu-col, .ivu-col div{
color: #fff;
padding: 10px 0;
text-align: center;
background: rgba(0, 153, 229, .9);
}
.gutter .ivu-col{
background: transparent !important;
}
.ivu-col:nth-child(odd), .ivu-col:nth-child(odd) div{
background: rgba(0, 153, 229, .7);
}
.code-row-bg{
background: rgba(0,0,0,.05);
<style>
body{
height: 2000px !important;
}
</style>
<template>
<p>子元素向左排列</p>
<Row type="flex" justify="start" class="code-row-bg">
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
</Row>
<p>子元素向右排列</p>
<Row type="flex" justify="end" class="code-row-bg">
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
</Row>
<p>子元素居中排列</p>
<Row type="flex" justify="center" class="code-row-bg">
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
</Row>
<p>子元素等宽排列</p>
<Row type="flex" justify="space-between" class="code-row-bg">
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
</Row>
<p>子元素分散排列</p>
<Row type="flex" justify="space-around" class="code-row-bg">
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
<i-col span="4">col-4</i-col>
</Row>
{{properties|json}}<br>
{{units|json}}
<Checkbox-group :model.sync="properties">
<Checkbox v-for="unit in units" :value="unit.UnitName"></Checkbox>
</Checkbox-group>
<Back-top></Back-top>
</template>
<script>
export default {
data () {
return {
properties: [],
units: []
}
},
ready () {
setTimeout(() => {
this.units = [{UnitName:"件"},{UnitName:"箱"},{UnitName:"双"}];
}, 1000);
}
}
</script>