fixed Layout bug

fixed Layout bug

src/components/date-picker/base/time-spinner.vue

@@ -0,0 +1,66 @@
+<template>
+    <div :class="classes">
+        <div :class="[prefixCls+ '-wrapper']">
+            <ul :class="[prefixCls + '-list']">
+                <li v-for="item in hoursList"></li>
+            </ul>
+        </div>
+        <div :class="[prefixCls+ '-wrapper']">
+            <li v-for="item in minutesList"></li>
+        </div>
+        <div :class="[prefixCls+ '-wrapper']" v-show="showSeconds">
+            <li v-for="item in secondsList"></li>
+        </div>
+    </div>
+</template>
+<script>
+    const prefixCls = 'ivu-time-picker-cells';
+
+    export default {
+        props: {
+            hours: {
+                type: Number,
+                default: 0
+            },
+            minutes: {
+                type: Number,
+                default: 0
+            },
+            seconds: {
+                type: Number,
+                default: 0
+            },
+            showSeconds: {
+                type: Boolean,
+                default: true
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-with-seconds`]: this.showSeconds
+                    }
+                ];
+            },
+            hoursList () {
+                return [];
+            },
+            minutesList () {
+                return [];
+            },
+            secondsList () {
+                return [];
+            }
+        },
+        methods: {
+
+        }
+    };
+</script>

src/components/date-picker/panel/time.vue

@@ -0,0 +1,82 @@
+<template>
+    <div :class="[prefixCls + '-body-wrapper']">
+        <div :class="[prefixCls + '-body']">
+            <div :class="[prefixCls + '-content']">
+                <time-spinner
+                    :show-seconds="showSeconds"
+                    :hours="hours"
+                    :minutes="minutes"
+                    :seconds="seconds"
+                    @on-change="handleChange"
+                    @on-pick-click="handlePickClick"></time-spinner>
+            </div>
+            <Confirm
+                @on-pick-clear="handlePickClear"
+                @on-pick-success="handlePickSuccess"></Confirm>
+        </div>
+    </div>
+</template>
+<script>
+    import TimeSpinner from '../base/time-spinner.vue';
+    import Confirm from '../base/confirm.vue';
+
+    import Mixin from './mixin';
+
+    const prefixCls = 'ivu-picker-panel';
+    const timePrefixCls = 'ivu-time-picker';
+
+    export default {
+        mixins: [Mixin],
+        components: { TimeSpinner, Confirm },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                timePrefixCls: timePrefixCls,
+                format: 'HH:mm:ss',
+                date: new Date(),
+                value: '',
+                hours: 0,
+                minutes: 0,
+                seconds: 0
+            };
+        },
+        computed: {
+            showSeconds () {
+                return (this.format || '').indexOf('ss') !== -1;
+            }
+        },
+        watch: {
+            value (newVal) {
+                if (!newVal) return;
+                newVal = new Date(newVal);
+                if (!isNaN(newVal)) {
+                    this.handleChange({
+                        hours: date.getHours(),
+                        minutes: date.getMinutes(),
+                        seconds: date.getSeconds()
+                    });
+                    this.$nextTick(_ => this.scrollTop());
+                }
+            }
+        },
+        methods: {
+            handleChange (date) {
+                if (date.hours !== undefined) {
+                    this.date.setHours(date.hours);
+                    this.hours = this.date.getHours();
+                }
+                if (date.minutes !== undefined) {
+                    this.date.setMinutes(date.minutes);
+                    this.minutes = this.date.getMinutes();
+                }
+                if (date.seconds !== undefined) {
+                    this.date.setSeconds(date.seconds);
+                    this.seconds = this.date.getSeconds();
+                }
+            },
+            scrollTop () {
+
+            }
+        }
+    };
+</script>

src/components/date-picker/picker.vue

@@ -200,7 +200,10 @@
                 return this.open === null ? this.visible : this.open;
             },
             iconType () {
-                return this.showClose ? 'ios-close' : 'ios-calendar-outline';
+                let icon = 'ios-calendar-outline';
+                if (this.type === 'time') icon = 'ios-clock-outline';
+                if (this.showClose) icon = 'ios-close';
+                return icon;
             },
             transition () {
                 if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
@@ -341,6 +344,12 @@
                     this.picker.selectionMode = this.selectionMode;
                     if (this.format) this.picker.format = this.format;
 
+                    // TimePicker
+                    if (this.disabledHours) this.picker.disabledHours = this.disabledHours;
+                    if (this.disabledMinutes) this.picker.disabledMinutes = this.disabledMinutes;
+                    if (this.disabledSeconds) this.picker.disabledSeconds = this.disabledSeconds;
+                    if (this.hideDisabledOptions) this.picker.hideDisabledOptions = this.hideDisabledOptions;
+
                     const options = this.options;
                     for (const option in options) {
                         this.picker[option] = options[option];

src/components/date-picker/picker/time-picker.js

@@ -0,0 +1,39 @@
+import Picker from '../picker.vue';
+import TimePanel from '../panel/time.vue';
+
+export default {
+    mixins: [Picker],
+    props: {
+        value: {},
+        disabledHours: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
+        disabledMinutes: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
+        disabledSeconds: {
+            type: Array,
+            default () {
+                return [];
+            }
+        },
+        hideDisabledOptions: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            type: 'time'
+        };
+    },
+    created () {
+        this.panel = TimePanel;
+    }
+};

src/components/layout/row.vue

@@ -34,8 +34,8 @@
         computed: {
             classes () {
                 return [
-                    `${prefixCls}`,
                     {
+                        [`${prefixCls}`]: !this.type,
                         [`${prefixCls}-${this.type}`]: !!this.type,
                         [`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
                         [`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify,

src/components/time-picker/index.js

@@ -0,0 +1,2 @@
+import TimePicker from '../date-picker/picker/time-picker';
+export default TimePicker;

src/index.js

@@ -34,6 +34,7 @@ import Table from './components/table';
 import Tabs from './components/tabs';
 import Tag from './components/tag';
 import Timeline from './components/timeline';
+import TimePicker from './components/time-picker';
 import Tooltip from './components/tooltip';
 import Transfer from './components/transfer';
 import { Row, Col } from './components/layout';
@@ -91,6 +92,7 @@ const iview = {
     Tag,
     Timeline,
     TimelineItem: Timeline.Item,
+    TimePicker,
     Tooltip,
     Transfer
 };

test/routers/date.vue

@@ -6,6 +6,9 @@
         <i-col span="12">
             <date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker>
         </i-col>
+        <i-col span="12">
+            <time-picker placeholder="选择时间" :disabled-hours="[1,2]" style="width: 200px"></time-picker>
+        </i-col>
     </row>
 </template>
 <script>

test/routers/more.vue

@@ -1,27 +1,82 @@
+<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>
 <template>
-    {{ fruit |json}}
+    <p>子元素向左排列</p>
-    <Checkbox-group :model.sync="fruit" @on-change="changed">
+    <Row type="flex" justify="start" class="code-row-bg">
-        <Checkbox value="a"></Checkbox>
+        <i-col span="4">col-4</i-col>
-        <Checkbox value="b"></Checkbox>
+        <i-col span="4">col-4</i-col>
-        <Checkbox value="c"></Checkbox>
+        <i-col span="4">col-4</i-col>
-    </Checkbox-group>
+        <i-col span="4">col-4</i-col>
-    <i-button @click="change">change</i-button>
+    </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>
 </template>
 <script>
     export default {
-        data () {
+
-            return {
-                fruit: ['b']
-            }
-        },
-        methods: {
-            change () {
-                this.fruit.splice(0, 1);
-//                this.fruit = ['a']
-            },
-            changed (s) {
-                console.log(s)
-            }
-        }
     }
 </script>