跟随Element学习Vue小技巧(48)——Carousel人生啊，一页两页，翻着翻着就...

❝
把每天的小努力累积起来

改变历史
❞

前言

什么年龄就去做什么事情

20岁之前，你最应该做的事情就是好好学习
20岁-30岁，你最好找一个好的老板、好的公司踏踏实实工作
30岁-40岁，你可以去做你自己喜欢的事情了，不断去挑战自己
40岁-50岁，你应该少一些折腾，努力做好自己最为擅长的事情
50岁-60岁，你可以去培养新人了
60岁之后，你可以多陪陪孙子、孙女，因为人生还有生活，而不只是工作
人生啊，一页两页，翻着翻着就...
别怕，不是有轮回吗？还有来生嘛
就像轮播图一样，可以loop，无限循环 O(∩_∩)O哈哈~ O(∩_∩)O哈哈~

1 Carousel

轮播布局

代码片段

<template>
  <div>
    <div>
      <!-- 上一页按钮 -->
      <transition
        v-if="arrowDisplay"
        name="carousel-arrow-left">
        <button>
          <i class="el-icon-arrow-left"></i>
        </button>
      </transition>
      <!-- 下一页按钮 -->
      <transition
        v-if="arrowDisplay"
        name="carousel-arrow-right">
        <button>
          <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">
        <button class="el-carousel__button">
          <span v-if="hasLabel">{{ item.label }}</span>
        </button>
      </li>
    </ul>
  </div>
</template>

技巧解析

❝
整个轮播图由三部分组成：
翻页按钮 + 轮播内容 + 指示器
点击翻页，左右滑动
点击指示器，跳转至对应页

纯js轮播图传送门
❞

工具箱

代码片段

/*
* @{desc} 添加前缀
* @{params} style 样式
*/
export const autoprefixer = function(style) {
  if (typeof style !== 'object') return style;
  const rules = ['transform', 'transition', 'animation'];
  const prefixes = ['ms-', 'webkit-'];
  rules.forEach(rule => {
    const value = style[rule];
    if (rule && value) {
      prefixes.forEach(prefix => {
        style[prefix + rule] = value;
      });
    }
  });
  return style;
};

「在距今已经很久远的那一天」 「我们就约定好了重逢」

跟随Element学习Vue小技巧(48)——Carousel

把每天的小努力累积起来

改变历史

前言

1 Carousel

轮播布局

代码片段

技巧解析

工具箱

工具箱

代码片段

参考链接

往期回顾