W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
雖然我們擁有 Divider 組件, 但很多時(shí)候我們需要不是一個(gè)被 Divider 組件 分割開(kāi)的頁(yè)面結(jié)構(gòu), 因此我們會(huì)重復(fù)的使用很多的 Divider 組件, 這在我們的開(kāi)發(fā)效率上造成了一定的困擾, 間距組件就是為了解決這種困擾應(yīng)運(yùn)而生的.
用 fill 讓子節(jié)點(diǎn)自動(dòng)填充容器
<template>
<div>
<div style="margin-bottom:15px">
fill: <el-switch v-model="fill"></el-switch>
</div>
<el-space :fill="fill" wrap>
<el-card class="box-card" v-for="i in 3" :key="i">
<template #header>
<div class="card-header">
<span>Card name</span>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
{{ 'List item ' + o }}
</div>
</el-card>
</el-space>
</div>
</template>
<script>
export default {
data() {
return { fill: true }
},
}
</script>
也可以使用 fillRatio 參數(shù),自定義填充的比例,默認(rèn)值為 100,代表基于父容器寬度的 100% 進(jìn)行填充
需要注意的是,水平布局和垂直布局的表現(xiàn)形式稍有不同,具體的效果可以查看下面的例子
用 ?
fillRatio
?自定義填充比例
<template>
<div>
<div style="margin-bottom: 15px">
direction:
<el-radio v-model="direction" label="horizontal">horizontal</el-radio>
<el-radio v-model="direction" label="vertical">vertical</el-radio>
</div>
<div style="margin-bottom: 15px">
fillRatio:<el-slider v-model="fillRatio"></el-slider>
</div>
<el-space
fill
wrap
:fillRatio="fillRatio"
:direction="direction"
style=" width: 100%"
>
<el-card class="box-card" v-for="i in 5" :key="i">
<template #header>
<div class="card-header">
<span>Card name</span>
<el-button class="button" type="text">Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
{{ 'List item ' + o }}
</div>
</el-card>
</el-space>
</div>
</template>
<script>
export default {
data() {
return { direction: 'horizontal', fillRatio: 30 }
},
}
</script>
參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
alignment | 對(duì)齊的方式 | string | align-items | 'center' |
class | 類名 | string / Array<Object | String> / Object | - | - |
direction | 排列的方向 | string | vertical/horizontal | horizontal |
prefixCls | 給 space-items 的類名前綴 | string | el-space | - |
style | 額外樣式 | string / Array<Object | String> / Object | - | - |
spacer | 間隔符 | string / number / VNode | - | - |
size | 間隔大小 | string / number / [number, number] | - | 'small' |
wrap | 設(shè)置是否自動(dòng)折行 | boolean | true / false | false |
fill | 子元素是否填充父容器 | boolean | true / false | false |
fillRatio | 填充父容器的比例 | number | - | 100 |
name | 說(shuō)明 |
---|---|
default | 需要添加間隔的元素 |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: