当前位置: 首页> 健康> 母婴 > element-plus的el-space标签的使用

element-plus的el-space标签的使用

时间:2025/7/29 1:30:55来源:https://blog.csdn.net/lucky_ly/article/details/139583949 浏览次数:0次

el-space标签可以很方便的设置标签间距和分隔符,对齐方式,是否拆行等属性。

<script setup lang="ts">
import { onMounted, ref } from 'vue';const size=ref(30)</script><template><el-space wrap :size="size" spacer="" alignment="flex-end" fill="true"><div class="container" v-for="i in 3" :key="i"><p v-for="item in 3" class="item" :key="item">{{ 'i am'+ item  }}</p></div></el-space></template><style scoped>.container{display: flex;flex-direction: column;justify-content: center;align-content: center;}.item{background-color: lightskyblue;margin:10px 10px;text-align: center;border: 1px solid black;}</style>

size:决定子元素间距大小,默认有三个规格small,default,large,还可设置具体的数值。
wrap:是否拆行,
fill:子元素是否自动填充父容器
在这里插入图片描述
https://element-plus.org/zh-CN/component/space.html

关键字:element-plus的el-space标签的使用

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: