vue element plus Carousel 走马灯

简介: vue element plus Carousel 走马灯

在有限空间内,循环播放同一类型的图片、文字等内容

基础用法#

结合使用 el-carouselel-carousel-item 标签就得到了一个走马灯。 每一个页面的内容是完全可定制的,把你想要展示的内容放在 el-carousel-item 标签内。 默认情况下,在鼠标 hover 底部的指示器时就会触发切换。 通过设置 trigger 属性为 click,可以达到点击触发的效果。

Switch when indicator is hovered (default)

1

2

3

4





Switch when indicator is clicked

1

2

3

4





指示器#

可以将指示器的显示位置设置在容器外部

indicator-position 属性定义了指示器的位置。 默认情况下,它会显示在走马灯内部,设置为 outside 则会显示在外部;设置为 none 则不会显示指示器。

1

2

3

4





切换箭头#

可以设置切换箭头的显示时机

arrow 属性定义了切换箭头的显示时机。 默认情况下,切换箭头只有在鼠标 hover 到走马灯上时才会显示。 若将 arrow 设置为 always,则会一直显示;设置为 never,则会一直隐藏。

1

2

3

4





自动高度#

carousel <code>的<code> height 设置为 auto时, carousel 的高度将根据子内容的高度自动设置

each carousel-item has a different height

height 100px

height 200px

height 300px




卡片模式#

当页面宽度方向空间空余,但高度方向空间匮乏时,可使用卡片风格

type 属性设置为 card 即可启用卡片模式。 从交互上来说,卡片模式和一般模式的最大区别在于,卡片模式可以通过直接点击两侧的幻灯片进行切换。

1

2

3

4

5

6







垂直排列#

默认情况下,方向 direction 为 水平 horizontal。 通过设置 directionvertical 来让走马灯在垂直方向上显示。

normal vertical layout

1

2

3

4





card vertical layout

1

2

3

4





属性名 说明 类型 可选值 默认值
height carousel 的高度 string
initial-index 初始状态激活的幻灯片的索引,从 0 开始 number 0
trigger 指示器的触发方式 string hover/click hover
autoplay 是否自动切换 boolean true
interval 自动切换的时间间隔,单位为毫秒 number 3000
indicator-position 指示器的位置 string outside/none
arrow 切换箭头的显示时机 string always/hover/never hover
type carousel 的类型 string card
loop 是否循环显示 boolean - true
direction 展示的方向 string horizontal/vertical horizontal
pause-on-hover 鼠标悬浮时暂停自动切换 boolean - true
事件名 说明 回调参数
change 幻灯片切换时触发 目前激活的幻灯片的索引,原幻灯片的索引
方法名 说明 参数
setActiveItem 手动切换幻灯片 需要切换的幻灯片的索引,从 0 开始;或相应 el-carousel-itemname 属性值
prev 切换至上一张幻灯片
next 切换至下一张幻灯片
插槽名 说明 子标签
- 自定义默认内容 Carousel-Item
属性名 说明 类型 可选值 默认值
name 幻灯片的名字,可用作 setActiveItem 的参数 string
label 该幻灯片所对应指示器的文本 string
插槽名 说明
自定义默认内容

源代码#

组件文档

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