fixed Layout bug
fixed Layout bug
This commit is contained in:
梁灏
parent
c6fecfd476
commit
9d844d5318
9 changed files with 281 additions and 23 deletions
66
src/components/date-picker/base/time-spinner.vue
Normal file
66
src/components/date-picker/base/time-spinner.vue
Normal file
|
|
@ -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>
|
||||
82
src/components/date-picker/panel/time.vue
Normal file
82
src/components/date-picker/panel/time.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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];
|
||||
|
|
|
|||
39
src/components/date-picker/picker/time-picker.js
Normal file
39
src/components/date-picker/picker/time-picker.js
Normal file
|
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
2
src/components/time-picker/index.js
Normal file
2
src/components/time-picker/index.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import TimePicker from '../date-picker/picker/time-picker';
|
||||
export default TimePicker;
|
||||
|
|
@ -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
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
<Checkbox-group :model.sync="fruit" @on-change="changed">
|
||||
<Checkbox value="a"></Checkbox>
|
||||
<Checkbox value="b"></Checkbox>
|
||||
<Checkbox value="c"></Checkbox>
|
||||
</Checkbox-group>
|
||||
<i-button @click="change">change</i-button>
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
fruit: ['b']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change () {
|
||||
this.fruit.splice(0, 1);
|
||||
// this.fruit = ['a']
|
||||
},
|
||||
changed (s) {
|
||||
console.log(s)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue