1. Toy模板网首页
  2. > Toy博客

element ui 中轮播图组件样式修改为三列展示轮播

10月前 作者：哈哈西西） 分类：Toy博客 阅读(44) 违法举报

这篇具有很好参考价值的文章主要介绍了element ui 中轮播图组件样式修改为三列展示轮播。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现效果
element轮播,ui,html5,css,javascript,前端框架,elementui
在使用 Element UI 组件库中的跑马灯组件时，需求是三列卡片轮播的实现。虽然 Element UI 中跑马灯组件提供了 type=‘card’ 属性，去设置轮播为卡片类型，但是样式不是我们所期待的，不想要缩放效果，于是便对跑马灯组件源码进行调整。
element轮播,ui,html5,css,javascript,前端框架,elementui
源码主要修改
跑马灯组件主要是 carousel 和 carouselItem 组件。可以单独把源码中的这两个组件文件复制一份进行修改。

其中 carousel 文件不需要修改，只是复制一份即可，在 carouselItem 文件中将 const CARD_SCALE = 0.83 更换为 const CARD_SCALE = 1。接着去修改控制位移的 calcCardTranslate() 函数即可，我这里需要三列轮播，做以下调整，总体上样式还是使用 Element UI 默认样式，只是细节上的调整。

item组件
    calcCardTranslate(index, activeIndex) {
          let parentWidth = this.$parent.$el.offsetWidth;
          //减去左右两边箭头的宽度
            parentWidth = parentWidth - 100;
          if (this.inStage) {
            return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 3;
          } else if (index < activeIndex) {
          //三张卡 除三  原始有缩放和位移是除四
            return -(1 + CARD_SCALE) * parentWidth / 3;
          } else {
            return (3 + CARD_SCALE) * parentWidth / 3;
          }
        },
  

调用组件
        <Carousel  type="card" height="250px" :autoplay="false" indicator-position="none" class="carousel-box">
          <CarouselItem v-for="(item,index) in cardData" :key="index"  style="width:33%;"   >
            <div class="card-box">
        {{item}}
            </div>
          </CarouselItem>
        </Carousel>

主要是main.vue组件ui和css的调整
main.vue文件

<template>
    <div class="carouselBox">
        <div  class="leftBth" >
            <i class="el-icon-arrow-left "
            v-show=" (loop || activeIndex > 0)"
            @mouseenter="handleButtonEnter('left')"
            @mouseleave="handleButtonLeave"
            @click.stop="throttledArrowClick(activeIndex - 1)"/>
        </div>
        <div
        :class="carouselClasses "
        class="contentBox"
        @mouseenter.stop="handleMouseEnter"
        @mouseleave.stop="handleMouseLeave">
        <div
            class="el-carousel__container"
            :style="{ height: height }">
            <!-- <transition
            v-if="arrowDisplay"
            name="carousel-arrow-left">
            <button
                type="button"
                v-show="(arrow === 'always' || hover) && (loop || activeIndex > 0)"
                @mouseenter="handleButtonEnter('left')"
                @mouseleave="handleButtonLeave"
                @click.stop="throttledArrowClick(activeIndex - 1)"
                class="el-carousel__arrow el-carousel__arrow--left">
                <i class="el-icon-arrow-left"></i>
            </button>
            </transition>
            <transition
            v-if="arrowDisplay"
            name="carousel-arrow-right">
            <button
                type="button"
                v-show="(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"
                @mouseenter="handleButtonEnter('right')"
                @mouseleave="handleButtonLeave"
                @click.stop="throttledArrowClick(activeIndex + 1)"
                class="el-carousel__arrow el-carousel__arrow--right">
                <i class="el-icon-arrow-right"></i>
            </button>
            </transition> -->
            <slot></slot>
        </div>
        <ul
            v-if="indicatorPosition !== 'none'"
            :class="indicatorsClasses">
            <li
            v-for="(item, index) in items"
            :key="index"
            :class="[
                'el-carousel__indicator',
                'el-carousel__indicator--' + direction,
                { 'is-active': index === activeIndex }]"
            @mouseenter="throttledIndicatorHover(index)"
            @click.stop="handleIndicatorClick(index)">
            <button class="el-carousel__button">
                <span v-if="hasLabel">{{ item.label }}</span>
            </button>
            </li>
        </ul>
        </div>
        <div class="rightBtn">
            <i  class="el-icon-arrow-right"

            v-show=" (loop || activeIndex < items.length - 1)"
            @mouseenter="handleButtonEnter('right')"
            @mouseleave="handleButtonLeave"
            @click.stop="throttledArrowClick(activeIndex + 1)"/>
        </div>
   </div>
  </template>
  
  <script>
  import throttle from 'throttle-debounce/throttle';
  import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
  
  export default {
    name: 'ElCarousel',
  
    props: {
      initialIndex: {
        type: Number,
        default: 0
      },
      height: String,
      trigger: {
        type: String,
        default: 'hover'
      },
      autoplay: {
        type: Boolean,
        default: true
      },
      interval: {
        type: Number,
        default: 3000
      },
      indicatorPosition: String,
      indicator: {
        type: Boolean,
        default: true
      },
      arrow: {
        type: String,
        default: 'hover'
      },
      type: String,
      loop: {
        type: Boolean,
        default: true
      },
      direction: {
        type: String,
        default: 'horizontal',
        validator(val) {
          return ['horizontal', 'vertical'].indexOf(val) !== -1;
        }
      }
    },
  
    data() {
      return {
        items: [],
        activeIndex: -1,
        containerWidth: 0,
        timer: null,
        hover: false
      };
    },
  
    computed: {
      arrowDisplay() {
        return this.arrow !== 'never' && this.direction !== 'vertical';
      },
  
      hasLabel() {
        return this.items.some(item => item.label.toString().length > 0);
      },
  
      carouselClasses() {
        const classes = ['el-carousel', 'el-carousel--' + this.direction];
        if (this.type === 'card') {
          classes.push('el-carousel--card');
        }
        return classes;
      },
  
      indicatorsClasses() {
        const classes = ['el-carousel__indicators', 'el-carousel__indicators--' + this.direction];
        if (this.hasLabel) {
          classes.push('el-carousel__indicators--labels');
        }
        if (this.indicatorPosition === 'outside' || this.type === 'card') {
          classes.push('el-carousel__indicators--outside');
        }
        return classes;
      }
    },
  
    watch: {
      items(val) {
        if (val.length > 0) this.setActiveItem(this.initialIndex);
      },
  
      activeIndex(val, oldVal) {
        this.resetItemPosition(oldVal);
        if (oldVal > -1) {
          this.$emit('change', val, oldVal);
        }
      },
  
      autoplay(val) {
        val ? this.startTimer() : this.pauseTimer();
      },
  
      loop() {
        this.setActiveItem(this.activeIndex);
      },
  
      interval() {
        this.pauseTimer();
        this.startTimer();
      }
    },
  
    methods: {
      handleMouseEnter() {
        this.hover = true;
        this.pauseTimer();
      },
  
      handleMouseLeave() {
        this.hover = false;
        this.startTimer();
      },
  
      itemInStage(item, index) {
        const length = this.items.length;
        if (index === length - 1 && item.inStage && this.items[0].active ||
          (item.inStage && this.items[index + 1] && this.items[index + 1].active)) {
          return 'left';
        } else if (index === 0 && item.inStage && this.items[length - 1].active ||
          (item.inStage && this.items[index - 1] && this.items[index - 1].active)) {
          return 'right';
        }
        return false;
      },
  
      handleButtonEnter(arrow) {
        if (this.direction === 'vertical') return;
        this.items.forEach((item, index) => {
          if (arrow === this.itemInStage(item, index)) {
            item.hover = true;
          }
        });
      },
  
      handleButtonLeave() {
        if (this.direction === 'vertical') return;
        this.items.forEach(item => {
          item.hover = false;
        });
      },
  
      updateItems() {
        this.items = this.$children.filter(child => child.$options.name === 'ElCarouselItem');
      },
  
      resetItemPosition(oldIndex) {
        this.items.forEach((item, index) => {
          item.translateItem(index, this.activeIndex, oldIndex);
        });
      },
  
      playSlides() {
        if (this.activeIndex < this.items.length - 1) {
          this.activeIndex++;
        } else if (this.loop) {
          this.activeIndex = 0;
        }
      },
  
      pauseTimer() {
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      },
  
      startTimer() {
        if (this.interval <= 0 || !this.autoplay || this.timer) return;
        this.timer = setInterval(this.playSlides, this.interval);
      },
  
      resetTimer() {
        this.pauseTimer();
        this.startTimer();
      },
  
      setActiveItem(index) {
        if (typeof index === 'string') {
          const filteredItems = this.items.filter(item => item.name === index);
          if (filteredItems.length > 0) {
            index = this.items.indexOf(filteredItems[0]);
          }
        }
        index = Number(index);
        if (isNaN(index) || index !== Math.floor(index)) {
          console.warn('[Element Warn][Carousel]index must be an integer.');
          return;
        }
        let length = this.items.length;
        const oldIndex = this.activeIndex;
        if (index < 0) {
          this.activeIndex = this.loop ? length - 1 : 0;
        } else if (index >= length) {
          this.activeIndex = this.loop ? 0 : length - 1;
        } else {
          this.activeIndex = index;
        }
        if (oldIndex === this.activeIndex) {
          this.resetItemPosition(oldIndex);
        }
        this.resetTimer();
      },
  
      prev() {
        this.setActiveItem(this.activeIndex - 1);
      },
  
      next() {
        this.setActiveItem(this.activeIndex + 1);
      },
  
      handleIndicatorClick(index) {
        this.activeIndex = index;
      },
  
      handleIndicatorHover(index) {
        if (this.trigger === 'hover' && index !== this.activeIndex) {
          this.activeIndex = index;
        }
      }
    },
  
    created() {
      this.throttledArrowClick = throttle(300, true, index => {
        this.setActiveItem(index);
      });
      this.throttledIndicatorHover = throttle(300, index => {
        this.handleIndicatorHover(index);
      });
    },
  
    mounted() {
      this.updateItems();
      this.$nextTick(() => {
        addResizeListener(this.$el, this.resetItemPosition);
        if (this.initialIndex < this.items.length && this.initialIndex >= 0) {
          this.activeIndex = this.initialIndex;
        }
        this.startTimer();
      });
    },
  
    beforeDestroy() {
      if (this.$el) removeResizeListener(this.$el, this.resetItemPosition);
      this.pauseTimer();
    }
  };
  </script>
  <style lang="scss" scoped>
  .leftBth ,.rightBtn{
    width: 50px;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    > i {
        display: flex;
        color: #0F5AA8;
        font-size: 30px;
        font-weight: bolder;
    }
  }
  .leftBth {
    > i {
        float: left;
    }
  }
  .rightBtn {
    > i {
        float: right;
    }
  }
  .contentBox{
    width:calc(100% - 100px);
    // border: 1px solid blue;
    display: inline-block;
    margin-left: 50px;
  }
  .carouselBox{
    width:100%;
    position: relative;
    // border: 1px solid blue;
  }
  ::v-deep .is-active{
   height: 100% !important;
   width:100%; 
  //  border: 3px #0F5AA8 solid;
  //  border-radius: 4px;
   background-image: url(../../../assets/images/lineControl/border.png);
   background-repeat: no-repeat;
   background-position:right top;
   background-size:100% 100%;
   background-color: transparent !important;
   border: none !important;
   
 }
 ::v-deep  .el-carousel__item {
    background-color: #FFFFFF;
    border: 1px solid #EDEDF2 ;
    height: calc(100% - 10px);
    width: 100%;
   
  }
  
  </style>

item文件

<template>
    <div
      v-show="ready"
      class="el-carousel__item"
      :class="{
        'is-active': active,
        'el-carousel__item--card': $parent.type === 'card',
        'is-in-stage': inStage,
        'is-hover': hover,
        'is-animating': animating
      }"
      @click="handleItemClick"
      :style="itemStyle">
      <div
        v-if="$parent.type === 'card'"
        v-show="!active"
        class="el-carousel__mask">
      </div>
      <slot></slot>
    </div>
  </template>
  
  <script>
    import { autoprefixer } from 'element-ui/src/utils/util';
    // const CARD_SCALE = 0.83;
    const CARD_SCALE = 1;
    export default {
      name: 'ElCarouselItem',
  
      props: {
        name: String,
        label: {
          type: [String, Number],
          default: ''
        }
      },
  
      data() {
        return {
          hover: false,
          translate: 0,
          scale: 1,
          active: false,
          ready: false,
          inStage: false,
          animating: false
        };
      },
  
      methods: {
        processIndex(index, activeIndex, length) {
          if (activeIndex === 0 && index === length - 1) {
            return -1;
          } else if (activeIndex === length - 1 && index === 0) {
            return length;
          } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
            return length + 1;
          } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
            return -2;
          }
          return index;
        },
  
        calcCardTranslate(index, activeIndex) {
          let parentWidth = this.$parent.$el.offsetWidth;
          //减去左右两边箭头的宽度
            parentWidth = parentWidth - 100;
          if (this.inStage) {
            return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 3;
          } else if (index < activeIndex) {
            return -(1 + CARD_SCALE) * parentWidth / 3;
          } else {
            return (3 + CARD_SCALE) * parentWidth / 3;
          }
        },
  
        calcTranslate(index, activeIndex, isVertical) {
          const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth'];
          return distance * (index - activeIndex);
        },
  
        translateItem(index, activeIndex, oldIndex) {
          const parentType = this.$parent.type;
          const parentDirection = this.parentDirection;
          const length = this.$parent.items.length;
          if (parentType !== 'card' && oldIndex !== undefined) {
            this.animating = index === activeIndex || index === oldIndex;
          }
          if (index !== activeIndex && length > 2 && this.$parent.loop) {
            index = this.processIndex(index, activeIndex, length);
          }
          if (parentType === 'card') {
            if (parentDirection === 'vertical') {
              console.warn('[Element Warn][Carousel]vertical direction is not supported in card mode');
            }
            this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
            this.active = index === activeIndex;
            this.translate = this.calcCardTranslate(index, activeIndex);
            this.scale = this.active ? 1 : CARD_SCALE;
          } else {
            this.active = index === activeIndex;
            const isVertical = parentDirection === 'vertical';
            this.translate = this.calcTranslate(index, activeIndex, isVertical);
            this.scale = 1;
          }
          this.ready = true;
        },
  
        handleItemClick() {
          const parent = this.$parent;
          if (parent && parent.type === 'card') {
            const index = parent.items.indexOf(this);
            parent.setActiveItem(index);
          }
        }
      },
  
      computed: {
        parentDirection() {
          return this.$parent.direction;
        },
  
        itemStyle() {
          const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX';
          const value = `${translateType}(${ this.translate }px) scale(${ this.scale })`;
          const style = {
            transform: value
          };
          return autoprefixer(style);
        }
      },
  
      created() {
        this.$parent && this.$parent.updateItems();
      },
  
      destroyed() {
        this.$parent && this.$parent.updateItems();
      }
    };
  </script>

选中样式的带箭头的边框是使用的背景图片，尝试使用css伪类完成箭头，但是会形成竖向滚动条（如下图），过度修改elementui的原生样式，所以选择背景图片方式
element轮播,ui,html5,css,javascript,前端框架,elementui
需要修改被选中的样式，和统一修改其他卡片的高度才能和图片背景边框对齐文章来源地址https://www.toymoban.com/news/detail-757159.html

  ::v-deep .is-active{
   height: 100% !important;
   width:100%; 
  //  border: 3px #0F5AA8 solid;
  //  border-radius: 4px;
   background-image: url(../../../assets/images/lineControl/border.png);
   background-repeat: no-repeat;
   background-position:right top;
   background-size:100% 100%;
   background-color: transparent !important;
   border: none !important;
   
 }
 ::v-deep  .el-carousel__item {
    background-color: #FFFFFF;
    border: 1px solid #EDEDF2 ;
    height: calc(100% - 10px);
    width: 100%;
   
  }

到了这里，关于element ui 中轮播图组件样式修改为三列展示轮播的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Element UI之卡片轮播图实例

    Element UI之卡片轮播图实例

     

    2024年02月17日
    浏览(35)
  • Element UI组件中el-checkbox组件样式的修改

    Element UI组件中el-checkbox组件样式的修改

    Element UI组件仅提供了 按钮 形式的 Checkbox 激活时的文本颜色修改的属性(text-color)以及激活时的填充色和边框色的修改属性（fill)，非按钮形式的如何修改这些样式呢? 提示：直接修改CSS属性，相关代码如下： 我在写style样式的时候并没有加scoped属性，有时候加了该属性修改样

    2024年02月12日
    浏览(52)

  • 用Element-UI框架写轮播图，左右箭头点击轮播，下方小锚点对应轮播

    不好意思视频上传不成功看链接https://www.douyin.com/video/7158792800564235527 注：借鉴官网：链接: https://element.eleme.cn/#/zh-CN/component/carousel这里有更多的我们需要的框架

    2023年04月08日
    浏览(49)
  • element-ui日历组件el-calendar选中特定时间以及样式修改

    element-ui日历组件el-calendar选中特定时间以及样式修改

    项目开发中，有需要用到日历的组件，而且需要把某些日期标注起来，在这边标注的小红点我用了 el-badge 具体效果如下图所示：  页面标签： 变量声明： 样式修改： 参考地址

    2024年02月11日
    浏览(69)
  • 制作轮播图经验分享——element ui走马灯的使用（附源码，效果截图）

    制作轮播图经验分享——element ui走马灯的使用（附源码，效果截图）

    先附上效果图：   element ui链接地址：Carousel 走马灯 | Element Plus (gitee.io) 源码： 这里我使用的是静态图片(本地） 经验分享： 在制作轮播图的时候经常会发现图片大小不一，这时候可以在img标签里加上width：100%；height：100%即可实现图片铺满。 当然，这只是轮播图的一种，还

    2024年02月11日
    浏览(43)

  • vue | element-ui中 如何修改表格Table组件中滚动条的样式

    在Table表格中，当内容超出容器时就会出现滚动条，elemnt-ui自带的滚动条有时无法满足需求，那么我们可以通过css伪类来实现对滚动条的自定义。 滚动条由两部分组成的： 滑块：可以滑动的部分。 轨道：滚动条的轨道，即滑块的轨道。一般来说滑块的颜色比轨道的颜色深一

    2024年02月11日
    浏览(56)
  • 自定义element-ui走马灯（轮播）样式

    自定义element-ui走马灯（轮播）样式

    自定义el-carousel-item指示器样式 把指示器变成圆点 效果图：  

    2024年02月13日
    浏览(42)
  • element Ui对话框样式修改(样式篇)

    element Ui对话框样式修改(样式篇)

    先给对话框添头部和尾部添加边框线 在给对话框添加圆角

    2024年02月14日
    浏览(47)
  • 前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取

    前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取

    目录 1-轮播图模块数据开发 2-floor组件开发 3-抽取全局轮播图组件 轮播图需要用到swiper插件，先安装5.4.5版本的swiper： npm  install --save swiper@^5.4.5 --force 模拟从服务器获取数据； 1-编写mockRequests的js文件和之前编写的request的js文件类似，就修改一下baseURL，我们模拟的数据请求路

    2023年04月08日
    浏览(49)
  • VUE3 修改element ui 的样式

    VUE3 修改element ui 的样式

    之前修改antd组件库的样式，可以用global修改 但是在修改element ui的样式，用global竟然不生效诶。 如何修改element ui 的样式？ 答：用样式穿透 CSS 样式穿透的三种方式 1. 2./deep/ 3.::v-deep 我参与的项目中用的是scss 示例：修改element ui table表的样式 使 element ui的表格变成这样子 注意

    2024年02月09日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包