vue element plus Space 间距

简介: vue element plus Space 间距

虽然我们拥有 Divider 组件,但很多时候我们需要不是一个被 Divider 组件 分割开的页面结构,因此我们会重复的使用很多的 Divider 组件,这在我们的开发效率上造成了一定的困扰。 间距组件就是为了解决这种困扰应运而生的。

基础用法#

最基础的用法,通过这个组件来给组件之间提供统一的间距。

通过间距组件来给多个组件之间提供间距

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

垂直布局#

使用 direction 来控制布局的方式, 背后实际上是利用了 flex-direction 来控制.

我们也提供垂直布局方式。

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

控制间距的大小#

通过调整 size 的值来控制间距的大小

使用内置的 smalldefaultlarge 来设置间距大小,分别对应 8px12px16px 的间距。 默认的间距大小为 small,也就是 8px

您也可以通过自定义的 size 来控制大小, 参见下一个部分。

largedefaultsmall

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

自定义 Size#

很多时候,内建的大小不满足设计师的要求,我们可以通过传入自己定义的大小 (数值类型) 来设置。

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

TIP

不要让 ElSpace 与使用依赖父元素百分比宽度(或高度)的元素一起使用(例如 ElSlider),这样会造成光标不同步。

自动换行#

水平 (horizontal) ** 模式下, 通过控制 wrap(布尔类型)**来控制是否自动换行

利用 wrap 属性控制换行

Text button

Text button

Text button

Text button

Text button

Text button

Text button

Text button

Text button

Text button

Text button

Text button

Text button

Text button

Text button

Text button

Text button

Text button

Text button

Text button

行间分隔符#

有时候,仅仅在行间加空白并不能满足我们的日常需求,此时分隔符 (spacer) 就可以发挥非常好的作用了。

字母数字类型分隔符#

button 1

|

button 2

分隔符还可以是 VNode 类型#

button 1

button 2

对齐方式#

设置该值可以调整所有子节点在容器内的对齐方式,可设置的值与 align-items一致。

使用 alignment 属性来对齐

string

button

header

body

string

button

header

body

string

button

header

body

填充容器#

通过 fill**(布尔类型)**参数,您可以控制子节点是否自动填充容器。

下面的例子中,当设置为 fill 时,子节点的宽度会自动适配容器的宽度。

用 fill 属性让子节点自动填充容器

fill:

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

也可以使用 fillRatio 参数,自定义填充的比例, 默认值为 100,代表基于父容器宽度的 100% 进行填充

需要注意的是,水平布局和垂直布局的表现形式稍有不同,具体的效果可以查看下面的例子

用 fillRatio 自定义填充比例

direction: horizontalvertical

fillRatio:

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

Card nameOperation button

List item 1

List item 2

List item 3

List item 4

API#

Attributes#

属性名 说明 类型 默认值
alignment 对齐的方式 enum align-items center
class 类名 string / object / array
direction 排列的方向 enum horizontal
prefix-cls 给 space-items 的类名前缀 string
style 额外样式 string / object
spacer 间隔符 string / number / VNode
size 间隔大小 enum / number / array small
wrap 设置是否自动折行 boolean false
fill 子元素是否填充父容器 boolean false
fill-ratio 填充父容器的比例 number 100

Slots#

名称 说明
default 需要添加间隔的元素

源代码#

组件文档

相关文章
|
3天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
3天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
8天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
13 2
|
8天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
12 2
|
8天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
10天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
13天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
10天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
29 9
|
9天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
9天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。