脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Element Carousel 走马灯

Element Carousel 走马灯的具体实现

 更新时间：2020年07月26日 11:15:17   作者：究极死胖兽  
这篇文章主要介绍了Element Carousel 走马灯的具体实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

本文来源于Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component/carousel

基础用法

普通走马灯

<div class="block">
<span class="demonstration">默认 Hover 指示器触发</span>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="block">
<span class="demonstration">Click 指示器触发</span>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>

组件— 走马灯

基础用法

<template>
 <div class="block">
  <span class="demonstration">默认 Hover 指示器触发</span>
  <el-carousel height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
 <div class="block">
  <span class="demonstration">Click 指示器触发</span>
  <el-carousel trigger="click" height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
 }

 .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
   background-color: #d3dce6;
 }
</style>

指示器

<template>
 <div class="block">
  <span class="demonstration">默认 Hover 指示器触发</span>
  <el-carousel height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
 <div class="block">
  <span class="demonstration">Click 指示器触发</span>
  <el-carousel trigger="click" height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
 }

 .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
   background-color: #d3dce6;
 }
</style>

切换箭头

<template>
 <div class="block">
  <span class="demonstration">默认 Hover 指示器触发</span>
  <el-carousel height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
 <div class="block">
  <span class="demonstration">Click 指示器触发</span>
  <el-carousel trigger="click" height="150px">
   <el-carousel-item v-for="item in 4" :key="item">
    <h3 class="small">{{ item }}</h3>
   </el-carousel-item>
  </el-carousel>
 </div>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
 }

 .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
   background-color: #d3dce6;
 }
</style>

卡片化

<template>
 <el-carousel :interval="4000" type="card" height="200px">
  <el-carousel-item v-for="item in 6" :key="item">
   <h3 class="medium">{{ item }}</h3>
  </el-carousel-item>
 </el-carousel>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
 }
 
 .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
 }
</style>

方向

<template>
 <el-carousel height="200px" direction="vertical" :autoplay="false">
  <el-carousel-item v-for="item in 3" :key="item">
   <h3 class="medium">{{ item }}</h3>
  </el-carousel-item>
 </el-carousel>
</template>

<style>
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
 }
 
 .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
 }
 
 .el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
 }
</style>

Carousel Attributes

参数 说明 类型 可选值 默认值
height 走马灯的高度 string — —
initial-index 初始状态激活的幻灯片的索引，从 0 开始 number — 0
trigger 指示器的触发方式 string click —
autoplay 是否自动切换 boolean — true
interval 自动切换的时间间隔，单位为毫秒 number — 3000
indicator-position 指示器的位置 string outside/none —
arrow 切换箭头的显示时机 string always/hover/never hover
type 走马灯的类型 string card —

Carousel Events

事件名称 说明 回调参数
change 幻灯片切换时触发 目前激活的幻灯片的索引，原幻灯片的索引

Carousel Methods

方法名 说明 参数
setActiveItem 手动切换幻灯片 需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值
prev 切换至上一张幻灯片 —
next 切换至下一张幻灯片 —

Carousel-Item Attributes

参数 说明 类型 可选值 默认值
name 幻灯片的名字，可用作 setActiveItem 的参数 string — —
label 该幻灯片所对应指示器的文本 string — —

到此这篇关于Element Carousel 走马灯的具体实现的文章就介绍到这了,更多相关Element Carousel 走马灯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 如何使用yarn创建vite项目+vue3

    如何使用yarn创建vite项目+vue3

    这篇文章主要介绍了如何使用yarn创建vite项目+vue3,详细介绍了使用vite创建vue3过程,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • 如何利用 vue实现鼠标悬停时显示元素或文本

    如何利用 vue实现鼠标悬停时显示元素或文本

    Vue.js 是一种流行的 JavaScript 框架，可以使 Web 应用程序的开发变得更加轻松和高效，这篇文章主要介绍了在 vue 中鼠标悬停时显示元素或文本,需要的朋友可以参考下
    2023-05-05
  • vue3中使用router路由实现跳转传参的方法

    vue3中使用router路由实现跳转传参的方法

    这篇文章主要介绍了vue3中使用router路由实现跳转传参的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-03-03
  • 解决router.beforeEach()动态加载路由出现死循环问题

    解决router.beforeEach()动态加载路由出现死循环问题

    这篇文章主要介绍了解决router.beforeEach()动态加载路由出现死循环问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • Vue.js动态添加、删除选题的实例代码

    Vue.js动态添加、删除选题的实例代码

    这篇文章主要介绍了Vue.js动态添加、删除选题的实例代码,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-09-09
  • VSCode前端Vue项目引入Element-ui组件三步简单操作方法

    VSCode前端Vue项目引入Element-ui组件三步简单操作方法

    elementui相当于一个库,封装好的内容,我们引入到vue项目中,就可用库中的内容,这篇文章主要给大家介绍了关于VSCode前端Vue项目引入Element-ui组件的三步简单操作方法,需要的朋友可以参考下
    2024-07-07
  • Vuex中Store的简单实现

    Vuex中Store的简单实现

    这篇文章主要介绍了Vuex中Store的简单实现,为了在 Vue 组件中访问 this.$store property,你需要为 Vue 实例提供创建好的 store,Vuex 提供了一个从根组件向所有子组件,以 store 选项的方式 注入 该 store 的机制,需要的朋友可以参考下
    2023-11-11
  • Vue3 之 Vue 事件处理指南

    Vue3 之 Vue 事件处理指南

    Vue事件处理是每个Vue项目的必要方面。 它用于捕获用户输入，共享数据以及许多其他创造性方式。在本文中，会介绍基础知识，并提供一些用于处理事件的代码示例。需要的小伙伴可以参考下面文章的具体内容
    2021-09-09
  • 基于Element封装一个表格组件tableList的使用方法

    基于Element封装一个表格组件tableList的使用方法

    这篇文章主要介绍了基于Element封装一个表格组件tableList的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue-cli设置publicPath小记

    vue-cli设置publicPath小记

    这篇文章主要介绍了vue-cli设置publicPath小记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论