other / mew-iview

Commit 9d844d5318bb6caabff8e32739df8f73fd72e7a8

Authored by 梁灏
1 parent c6fecfd4

fixed Layout bug 

fixed Layout bug
Showing 9 changed files with 281 additions and 23 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/base/time-spinner.vue 0 → 100644
  Show/Hide comments   View file @9d844d5
  1 +<template>
  2 + <div :class="classes">
  3 + <div :class="[prefixCls+ '-wrapper']">
  4 + <ul :class="[prefixCls + '-list']">
  5 + <li v-for="item in hoursList"></li>
  6 + </ul>
  7 + </div>
  8 + <div :class="[prefixCls+ '-wrapper']">
  9 + <li v-for="item in minutesList"></li>
  10 + </div>
  11 + <div :class="[prefixCls+ '-wrapper']" v-show="showSeconds">
  12 + <li v-for="item in secondsList"></li>
  13 + </div>
  14 + </div>
  15 +</template>
  16 +<script>
  17 + const prefixCls = 'ivu-time-picker-cells';
  18 +
  19 + export default {
  20 + props: {
  21 + hours: {
  22 + type: Number,
  23 + default: 0
  24 + },
  25 + minutes: {
  26 + type: Number,
  27 + default: 0
  28 + },
  29 + seconds: {
  30 + type: Number,
  31 + default: 0
  32 + },
  33 + showSeconds: {
  34 + type: Boolean,
  35 + default: true
  36 + }
  37 + },
  38 + data () {
  39 + return {
  40 + prefixCls: prefixCls
  41 + };
  42 + },
  43 + computed: {
  44 + classes () {
  45 + return [
  46 + `${prefixCls}`,
  47 + {
  48 + [`${prefixCls}-with-seconds`]: this.showSeconds
  49 + }
  50 + ];
  51 + },
  52 + hoursList () {
  53 + return [];
  54 + },
  55 + minutesList () {
  56 + return [];
  57 + },
  58 + secondsList () {
  59 + return [];
  60 + }
  61 + },
  62 + methods: {
  63 +
  64 + }
  65 + };
  66 +</script>
0 67 \ No newline at end of file
... ...
src/components/date-picker/panel/time.vue 0 → 100644
  Show/Hide comments   View file @9d844d5
  1 +<template>
  2 + <div :class="[prefixCls + '-body-wrapper']">
  3 + <div :class="[prefixCls + '-body']">
  4 + <div :class="[prefixCls + '-content']">
  5 + <time-spinner
  6 + :show-seconds="showSeconds"
  7 + :hours="hours"
  8 + :minutes="minutes"
  9 + :seconds="seconds"
  10 + @on-change="handleChange"
  11 + @on-pick-click="handlePickClick"></time-spinner>
  12 + </div>
  13 + <Confirm
  14 + @on-pick-clear="handlePickClear"
  15 + @on-pick-success="handlePickSuccess"></Confirm>
  16 + </div>
  17 + </div>
  18 +</template>
  19 +<script>
  20 + import TimeSpinner from '../base/time-spinner.vue';
  21 + import Confirm from '../base/confirm.vue';
  22 +
  23 + import Mixin from './mixin';
  24 +
  25 + const prefixCls = 'ivu-picker-panel';
  26 + const timePrefixCls = 'ivu-time-picker';
  27 +
  28 + export default {
  29 + mixins: [Mixin],
  30 + components: { TimeSpinner, Confirm },
  31 + data () {
  32 + return {
  33 + prefixCls: prefixCls,
  34 + timePrefixCls: timePrefixCls,
  35 + format: 'HH:mm:ss',
  36 + date: new Date(),
  37 + value: '',
  38 + hours: 0,
  39 + minutes: 0,
  40 + seconds: 0
  41 + };
  42 + },
  43 + computed: {
  44 + showSeconds () {
  45 + return (this.format || '').indexOf('ss') !== -1;
  46 + }
  47 + },
  48 + watch: {
  49 + value (newVal) {
  50 + if (!newVal) return;
  51 + newVal = new Date(newVal);
  52 + if (!isNaN(newVal)) {
  53 + this.handleChange({
  54 + hours: date.getHours(),
  55 + minutes: date.getMinutes(),
  56 + seconds: date.getSeconds()
  57 + });
  58 + this.$nextTick(_ => this.scrollTop());
  59 + }
  60 + }
  61 + },
  62 + methods: {
  63 + handleChange (date) {
  64 + if (date.hours !== undefined) {
  65 + this.date.setHours(date.hours);
  66 + this.hours = this.date.getHours();
  67 + }
  68 + if (date.minutes !== undefined) {
  69 + this.date.setMinutes(date.minutes);
  70 + this.minutes = this.date.getMinutes();
  71 + }
  72 + if (date.seconds !== undefined) {
  73 + this.date.setSeconds(date.seconds);
  74 + this.seconds = this.date.getSeconds();
  75 + }
  76 + },
  77 + scrollTop () {
  78 +
  79 + }
  80 + }
  81 + };
  82 +</script>
0 83 \ No newline at end of file
... ...
src/components/date-picker/picker.vue
  Show/Hide comments   View file @9d844d5
... ... @@ -200,7 +200,10 @@
200 200 return this.open === null ? this.visible : this.open;
201 201 },
202 202 iconType () {
203   - return this.showClose ? 'ios-close' : 'ios-calendar-outline';
  203 + let icon = 'ios-calendar-outline';
  204 + if (this.type === 'time') icon = 'ios-clock-outline';
  205 + if (this.showClose) icon = 'ios-close';
  206 + return icon;
204 207 },
205 208 transition () {
206 209 if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
... ... @@ -341,6 +344,12 @@
341 344 this.picker.selectionMode = this.selectionMode;
342 345 if (this.format) this.picker.format = this.format;
343 346  
  347 + // TimePicker
  348 + if (this.disabledHours) this.picker.disabledHours = this.disabledHours;
  349 + if (this.disabledMinutes) this.picker.disabledMinutes = this.disabledMinutes;
  350 + if (this.disabledSeconds) this.picker.disabledSeconds = this.disabledSeconds;
  351 + if (this.hideDisabledOptions) this.picker.hideDisabledOptions = this.hideDisabledOptions;
  352 +
344 353 const options = this.options;
345 354 for (const option in options) {
346 355 this.picker[option] = options[option];
... ...
src/components/date-picker/picker/time-picker.js 0 → 100644
  Show/Hide comments   View file @9d844d5
  1 +import Picker from '../picker.vue';
  2 +import TimePanel from '../panel/time.vue';
  3 +
  4 +export default {
  5 + mixins: [Picker],
  6 + props: {
  7 + value: {},
  8 + disabledHours: {
  9 + type: Array,
  10 + default () {
  11 + return [];
  12 + }
  13 + },
  14 + disabledMinutes: {
  15 + type: Array,
  16 + default () {
  17 + return [];
  18 + }
  19 + },
  20 + disabledSeconds: {
  21 + type: Array,
  22 + default () {
  23 + return [];
  24 + }
  25 + },
  26 + hideDisabledOptions: {
  27 + type: Boolean,
  28 + default: false
  29 + }
  30 + },
  31 + data () {
  32 + return {
  33 + type: 'time'
  34 + };
  35 + },
  36 + created () {
  37 + this.panel = TimePanel;
  38 + }
  39 +};
0 40 \ No newline at end of file
... ...
src/components/layout/row.vue
  Show/Hide comments   View file @9d844d5
... ... @@ -34,8 +34,8 @@
34 34 computed: {
35 35 classes () {
36 36 return [
37   - `${prefixCls}`,
38 37 {
  38 + [`${prefixCls}`]: !this.type,
39 39 [`${prefixCls}-${this.type}`]: !!this.type,
40 40 [`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
41 41 [`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify,
... ...
src/components/time-picker/index.js 0 → 100644
  Show/Hide comments   View file @9d844d5
  1 +import TimePicker from '../date-picker/picker/time-picker';
  2 +export default TimePicker;
0 3 \ No newline at end of file
... ...
src/index.js
  Show/Hide comments   View file @9d844d5
... ... @@ -34,6 +34,7 @@ import Table from &#39;./components/table&#39;;
34 34 import Tabs from './components/tabs';
35 35 import Tag from './components/tag';
36 36 import Timeline from './components/timeline';
  37 +import TimePicker from './components/time-picker';
37 38 import Tooltip from './components/tooltip';
38 39 import Transfer from './components/transfer';
39 40 import { Row, Col } from './components/layout';
... ... @@ -91,6 +92,7 @@ const iview = {
91 92 Tag,
92 93 Timeline,
93 94 TimelineItem: Timeline.Item,
  95 + TimePicker,
94 96 Tooltip,
95 97 Transfer
96 98 };
... ...
test/routers/date.vue
  Show/Hide comments   View file @9d844d5
... ... @@ -6,6 +6,9 @@
6 6 <i-col span="12">
7 7 <date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker>
8 8 </i-col>
  9 + <i-col span="12">
  10 + <time-picker placeholder="选择时间" :disabled-hours="[1,2]" style="width: 200px"></time-picker>
  11 + </i-col>
9 12 </row>
10 13 </template>
11 14 <script>
... ...
test/routers/more.vue
  Show/Hide comments   View file @9d844d5
  1 +<style scoped>
  2 + .demo-row{
  3 + margin-bottom: 5px;
  4 + 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%);
  5 + 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%);
  6 + }
  7 + .demo-col{
  8 + color: #fff;
  9 + padding: 30px 0;
  10 + text-align: center;
  11 + font-size: 18px;
  12 + background: rgba(0, 153, 229, .7);
  13 + }
  14 + .demo-col.light{
  15 + background: rgba(0, 153, 229, .5);
  16 + }
  17 + .demo-row.light .demo-col{
  18 + background: rgba(0, 153, 229, .5);
  19 + }
  20 + .demo-row.light .demo-col.light{
  21 + background: rgba(0, 153, 229, .3);
  22 + }
  23 +
  24 + .ivu-col, .ivu-col div{
  25 + color: #fff;
  26 + padding: 10px 0;
  27 + text-align: center;
  28 + background: rgba(0, 153, 229, .9);
  29 + }
  30 + .gutter .ivu-col{
  31 + background: transparent !important;
  32 + }
  33 + .ivu-col:nth-child(odd), .ivu-col:nth-child(odd) div{
  34 + background: rgba(0, 153, 229, .7);
  35 + }
  36 +
  37 + .code-row-bg{
  38 + background: rgba(0,0,0,.05);
  39 + }
  40 +</style>
1 41 <template>
2   - {{ fruit |json}}
3   - <Checkbox-group :model.sync="fruit" @on-change="changed">
4   - <Checkbox value="a"></Checkbox>
5   - <Checkbox value="b"></Checkbox>
6   - <Checkbox value="c"></Checkbox>
7   - </Checkbox-group>
8   - <i-button @click="change">change</i-button>
  42 + <p>子元素向左排列</p>
  43 + <Row type="flex" justify="start" class="code-row-bg">
  44 + <i-col span="4">col-4</i-col>
  45 + <i-col span="4">col-4</i-col>
  46 + <i-col span="4">col-4</i-col>
  47 + <i-col span="4">col-4</i-col>
  48 + </Row>
  49 + <p>子元素向右排列</p>
  50 + <Row type="flex" justify="end" class="code-row-bg">
  51 + <i-col span="4">col-4</i-col>
  52 + <i-col span="4">col-4</i-col>
  53 + <i-col span="4">col-4</i-col>
  54 + <i-col span="4">col-4</i-col>
  55 + </Row>
  56 + <p>子元素居中排列</p>
  57 + <Row type="flex" justify="center" class="code-row-bg">
  58 + <i-col span="4">col-4</i-col>
  59 + <i-col span="4">col-4</i-col>
  60 + <i-col span="4">col-4</i-col>
  61 + <i-col span="4">col-4</i-col>
  62 + </Row>
  63 + <p>子元素等宽排列</p>
  64 + <Row type="flex" justify="space-between" class="code-row-bg">
  65 + <i-col span="4">col-4</i-col>
  66 + <i-col span="4">col-4</i-col>
  67 + <i-col span="4">col-4</i-col>
  68 + <i-col span="4">col-4</i-col>
  69 + </Row>
  70 + <p>子元素分散排列</p>
  71 + <Row type="flex" justify="space-around" class="code-row-bg">
  72 + <i-col span="4">col-4</i-col>
  73 + <i-col span="4">col-4</i-col>
  74 + <i-col span="4">col-4</i-col>
  75 + <i-col span="4">col-4</i-col>
  76 + </Row>
9 77 </template>
10 78 <script>
11 79 export default {
12   - data () {
13   - return {
14   - fruit: ['b']
15   - }
16   - },
17   - methods: {
18   - change () {
19   - this.fruit.splice(0, 1);
20   -// this.fruit = ['a']
21   - },
22   - changed (s) {
23   - console.log(s)
24   - }
25   - }
  80 +
26 81 }
27 82 </script>
... ...