ant-design-vue/components/grid/demo/playfround.md

102 lines
2.4 KiB
Markdown
Raw Normal View History

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