update TimePicker & BackTop

update TimePicker & BackTop

update TimePicker & BackTop
梁灏
1 parent 36628aca
Showing 9 changed files with 179 additions and 98 deletions Show diff stats
.eslintrc.json
src/components/back-top/back-top.vue
src/components/date-picker/base/time-spinner.vue
src/components/date-picker/panel/time.vue
src/styles/components/index.less
src/styles/components/time-picker.less
src/utils/assist.js
test/routers/date.vue
test/routers/more.vue
@@ -13,6 +13,6 @@
         "indent": ["error", 4, { "SwitchCase": 1 }],
         "quotes": ["error", "single"],
         "semi": ["error", "always"],
-        "no-console": ["off"]
+        "no-console": ["error"]
     }
 }
@@ -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');
             }
         }
 <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);
+                }
             }
         }
     };
@@ -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 () {
-
             }
         }
     };
@@ -32,4 +32,5 @@
 @import "dropdown";
 @import "tabs";
 @import "menu";
-@import "date-picker";
 \ No newline at end of file
+@import "date-picker";
+@import "time-picker";
 \ No newline at end of file
+@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;
+            }
+        }
+    }
+}
 \ No newline at end of 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};
 \ No newline at end of file
+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);
+}
 \ No newline at end of file
+<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>
-<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>