2018-04-03 09:03:32 +00:00
|
|
|
<cn>
|
|
|
|
#### 栅格配置器
|
|
|
|
可以简单配置几种等分栅格和间距。
|
|
|
|
</cn>
|
|
|
|
|
|
|
|
<us>
|
|
|
|
#### Playground
|
|
|
|
A simple playground for column count and gutter.
|
|
|
|
</us>
|
|
|
|
|
2019-10-09 10:32:23 +00:00
|
|
|
```tpl
|
2018-04-03 09:03:32 +00:00
|
|
|
<template>
|
|
|
|
<div id="components-grid-demo-playground">
|
|
|
|
<div style="marginBottom:16px">
|
|
|
|
<span style="marginRight:6px">Gutter (px): </span>
|
|
|
|
<div style="width:50%">
|
|
|
|
<a-slider
|
|
|
|
:min="0"
|
|
|
|
:max="Object.keys(gutters).length - 1"
|
|
|
|
v-model="gutterKey"
|
|
|
|
:marks="this.gutters"
|
|
|
|
:step="null"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<span style="marginRight:6px">Column Count:</span>
|
|
|
|
<div style="width:50%">
|
|
|
|
<a-slider
|
|
|
|
:min="0"
|
|
|
|
:max="Object.keys(colCounts).length - 1"
|
|
|
|
v-model="colCountKey"
|
|
|
|
:marks="this.colCounts"
|
|
|
|
:step="null"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<a-row :gutter="gutters[gutterKey]">
|
2019-09-28 12:45:07 +00:00
|
|
|
<a-col
|
|
|
|
v-for="(item, index) in colCounts[colCountKey]"
|
|
|
|
:key="item.toString()"
|
|
|
|
:span="24/colCounts[colCountKey]"
|
|
|
|
>
|
2018-04-03 09:03:32 +00:00
|
|
|
<div>Column</div>
|
|
|
|
</a-col>
|
|
|
|
</a-row>
|
2019-09-28 12:45:07 +00:00
|
|
|
<pre v-text="rowColHtml"></pre>
|
2018-04-03 09:03:32 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
2019-09-28 12:45:07 +00:00
|
|
|
data() {
|
|
|
|
const gutters = {};
|
|
|
|
const arr = [8, 16, 24, 32, 40, 48];
|
|
|
|
arr.forEach((value, i) => {
|
|
|
|
gutters[i] = value;
|
|
|
|
});
|
|
|
|
const colCounts = {};
|
|
|
|
const arr1 = [2, 3, 4, 6, 8, 12];
|
|
|
|
arr1.forEach((value, i) => {
|
|
|
|
colCounts[i] = value;
|
|
|
|
});
|
2018-04-03 09:03:32 +00:00
|
|
|
return {
|
|
|
|
gutterKey: 1,
|
|
|
|
colCountKey: 2,
|
|
|
|
colCounts,
|
|
|
|
gutters,
|
2019-09-28 12:45:07 +00:00
|
|
|
};
|
2018-04-03 09:03:32 +00:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
rowColHtml() {
|
2019-09-28 12:45:07 +00:00
|
|
|
const colCount = this.colCounts[this.colCountKey];
|
|
|
|
const getter = this.gutters[this.gutterKey];
|
|
|
|
let colCode = '<Row :gutter="' + getter + '">\n';
|
2018-04-03 09:03:32 +00:00
|
|
|
for (let i = 0; i < colCount; i++) {
|
2019-09-28 12:45:07 +00:00
|
|
|
const spanNum = 24 / colCount;
|
|
|
|
colCode += ' <Col :span="' + spanNum + '"/>\n';
|
2018-04-03 09:03:32 +00:00
|
|
|
}
|
2019-09-28 12:45:07 +00:00
|
|
|
colCode += '</Row>';
|
|
|
|
return colCode;
|
|
|
|
},
|
2018-04-03 09:03:32 +00:00
|
|
|
},
|
2019-09-28 12:45:07 +00:00
|
|
|
};
|
2018-04-03 09:03:32 +00:00
|
|
|
</script>
|
|
|
|
<style scoped>
|
2019-09-28 12:45:07 +00:00
|
|
|
#components-grid-demo-playground [class^='ant-col-'] {
|
2018-04-03 09:03:32 +00:00
|
|
|
background: transparent;
|
|
|
|
border: 0;
|
|
|
|
}
|
2019-09-28 12:45:07 +00:00
|
|
|
#components-grid-demo-playground [class^='ant-col-'] > div {
|
|
|
|
background: #00a0e9;
|
2018-04-03 09:03:32 +00:00
|
|
|
height: 120px;
|
|
|
|
line-height: 120px;
|
|
|
|
font-size: 13px;
|
|
|
|
}
|
|
|
|
#components-grid-demo-playground pre {
|
|
|
|
background: #f9f9f9;
|
|
|
|
border-radius: 6px;
|
|
|
|
font-size: 13px;
|
|
|
|
padding: 8px 16px;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
```
|