drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed Layout bug

Browse source 
fixed Layout bug
This commit is contained in:
梁灏 2016-12-26 14:50:39 +08:00
parent c6fecfd476
commit 9d844d5318
9 changed files with 281 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

3
test/routers/date.vue
View file

@ -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>

97
test/routers/more.vue
View file

@ -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>