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 \ No newline at end of file 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 \ No newline at end of file 83 \ No newline at end of file
src/components/date-picker/picker.vue
  Show/Hide comments   View file @9d844d5
@@ -200,7 +200,10 @@ @@ -200,7 +200,10 @@
200 return this.open === null ? this.visible : this.open; 200 return this.open === null ? this.visible : this.open;
201 }, 201 },
202 iconType () { 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 transition () { 208 transition () {
206 if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') { 209 if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
@@ -341,6 +344,12 @@ @@ -341,6 +344,12 @@
341 this.picker.selectionMode = this.selectionMode; 344 this.picker.selectionMode = this.selectionMode;
342 if (this.format) this.picker.format = this.format; 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 const options = this.options; 353 const options = this.options;
345 for (const option in options) { 354 for (const option in options) {
346 this.picker[option] = options[option]; 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 \ No newline at end of file 40 \ No newline at end of file
src/components/layout/row.vue
  Show/Hide comments   View file @9d844d5
@@ -34,8 +34,8 @@ @@ -34,8 +34,8 @@
34 computed: { 34 computed: {
35 classes () { 35 classes () {
36 return [ 36 return [
37 - `${prefixCls}`,  
38 { 37 {
  38 + [`${prefixCls}`]: !this.type,
39 [`${prefixCls}-${this.type}`]: !!this.type, 39 [`${prefixCls}-${this.type}`]: !!this.type,
40 [`${prefixCls}-${this.type}-${this.align}`]: !!this.align, 40 [`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
41 [`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify, 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 \ No newline at end of file 3 \ No newline at end of file
@@ -34,6 +34,7 @@ import Table from &#39;./components/table&#39;; @@ -34,6 +34,7 @@ import Table from &#39;./components/table&#39;;
34 import Tabs from './components/tabs'; 34 import Tabs from './components/tabs';
35 import Tag from './components/tag'; 35 import Tag from './components/tag';
36 import Timeline from './components/timeline'; 36 import Timeline from './components/timeline';
  37 +import TimePicker from './components/time-picker';
37 import Tooltip from './components/tooltip'; 38 import Tooltip from './components/tooltip';
38 import Transfer from './components/transfer'; 39 import Transfer from './components/transfer';
39 import { Row, Col } from './components/layout'; 40 import { Row, Col } from './components/layout';
@@ -91,6 +92,7 @@ const iview = { @@ -91,6 +92,7 @@ const iview = {
91 Tag, 92 Tag,
92 Timeline, 93 Timeline,
93 TimelineItem: Timeline.Item, 94 TimelineItem: Timeline.Item,
  95 + TimePicker,
94 Tooltip, 96 Tooltip,
95 Transfer 97 Transfer
96 }; 98 };
test/routers/date.vue
  Show/Hide comments   View file @9d844d5
@@ -6,6 +6,9 @@ @@ -6,6 +6,9 @@
6 <i-col span="12"> 6 <i-col span="12">
7 <date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker> 7 <date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker>
8 </i-col> 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 </row> 12 </row>
10 </template> 13 </template>
11 <script> 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 <template> 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 </template> 77 </template>
10 <script> 78 <script>
11 export default { 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 </script> 82 </script>