教你创建一个灵活的轮播组件

资源分享 2018-06-07 195 次浏览 0 条评论

如何在Vue.js中创建简单,灵活的轮播组件。

 

 

Vue.js轮播组件

Vue.js最近出现了跨越式发展,在撰写本文时成为Github上迄今为止的第六大分支项目,甚至超过Facebook自己的ReactJS。可以肯定地说,它正在迅速成为Web开发的中流砥柱,并成为可靠的用于项目的前往JavaScript框架。

 

在本教程中,我们将使用Vue.js创建一个简单的轮播组件。该组件将接受许多不同的属性,使您能够调整一些基本设置,例如转换速度,转换类型以及转盘是否应自动转换幻灯片。

 

使用Vue.JS加速性能

要开始,请在此处下载项目文件,并在首选文本编辑器中打开“网站模板”目录。同时在终端中,将CD放入'website-template'中,然后运行'npm install'来安装项目Node.js的依赖关系。最后,运行'npm run dev'启动一个开发服务器,以便您可以在浏览器中查看您的项目。通常这将在'localhost:8080'。

 

01.创建轮播幻灯片文件

在'src / components'中,创建一个名为'app-carousel-slide'的新目录,其中包含两个文件:'app-carousel-slide.vue'和'component.app-carousel-slide.scss'。这些将包含我们将要创建的两个新Vue.js组件中的第一个,当它们一起使用时将创建我们的传送带组件。

 

02.添加旋转木马幻灯片SCSS

从filesilo包中,将'/support-files/step-02-slide.scss'的内容复制到'component.app-carousel-slide.scss'中。这是幻灯片组件的SCSS,并使用'flex-grow'属性来确保每张幻灯片都展开以填充其父元素。

 

03.创建幻灯片组件

在空的'app-carousel-slide.vue'文件中,添加下面的代码片段以创建Vue.js组件的结构。我们将以此为基础构建旋转木马幻灯片。

 

<template></template>

<script>

export default {

name: 'app-carousel-slide'

}

</script>

04.为传送带幻灯片图像添加一个模板插槽

在传送带幻灯片的空<template>元素中,我们将添加一个'div'元素来表示幻灯片,以及一个特殊的插槽元素,我们将其命名为'图像'。在Vue.js中,插槽可让您将自己的内容与组件的模板交织在一起,而无需对其进行编辑。在这种情况下,我们可以使用它们,以便稍后可以将图像传递给幻灯片背景,因此最终结果在最终使用时会看起来像'<app-carousel-slide> <img src =''alt =''> </ APP-转盘滑动>”。

 

<div class="c-app-carousel-slide">

<slot name="image"></slot>

</div>

Vue.js轮播组件

 

Vue.js团队最近发布了该框架的样式指南。这是每个Vue.js开发人员都应该检查的有用示例,规则和建议

05.添加幻灯片文本容器

所有剩下的幻灯片组件都是构建文本容器。我们将再次使用插槽,一个用于较大的幻灯片标题,另一个用于常规文本。我们还将使用名为'v-if'的Vue.js指令来添加逻辑,如果至少有一个插槽传递了内容,则这些逻辑仅显示文本容器。将这个片段添加到'c-app-carousel-slide'中,位于'image'插槽之前。

 

<div class="c-app-carousel-slide__text-block"

v-if="this.$slots[‘title’] || this.$slots['text']">

<h1 class="c-app-carousel-slide__title"

v-if="this.$slots['title']">

<slot name="title"></slot>

</h1>

<div class="c-app-carousel-slide__text"

v-if="this.$slots['text']">

<slot name="text"></slot>

</div>

</div>

06.创建轮播文件

回到'src / components'中,创建一个名为'app-carousel'的新目录,然后创建两个新文件:'app-carousel.vue'和'component.app-carousel.scss'。这些将持有两个Vue.js组件的第二个:主旋转木马本身。

 

Vue.js轮播组件

 

风格指南分为四个部分,提供了被认为是基本,强烈推荐,推荐和小心使用的规则。通过vuejs.org/v2/style-guide 了解更多信息

07.添加Carousel CSS

将'/support-files/step-07-slide.scss'的内容复制到空的'component.app-carousel.scss'中。这是主旋转木马组件的SCSS。

 

08.创建轮播组件

接下来在'app-carousel.vue'中,我们将构建轮播组件的结构。我们正在导入'appIcon'组件和'箭头'svg,以便以后在轮播的下一个和上一个图标中使用。这些工作与'svg-sprite-loader'依赖一起生成一个基本的SVG图标系统,它使用SVG'符号'和'use'元素。

 

<template></template>

<script>

import appIcon from

'@/components/app-icon/app-icon'

import arrow from

'./../../assets/img/arrow.svg'

export default {

name: 'app-carousel',

components: {

appIcon

},

data() {

return {

arrow

}

}

}

</script>

09.构建传送带模板

我们开始向空模板元素添加内容。这里主要关注的是'c-app-carousel__container'元素,我们将根据其中发现的幻灯片数量很快计算宽度。然后,我们将使用CSS转换来移动容器:translateX和转换以模拟幻灯片移动。

<div class="c-app-carousel">

<div class="c-app-carousel__wrapper">

<div class="c-app-carousel__container">

<slot></slot>

</div>

</div>

</div>

10.添加传送带控件和箭头

然后,我们需要为传送带控制容器和上一个和下一个箭头添加HTML; 后者使用步骤8中导入的图标系统和svg。将这些添加到'c-app-carousel__wrapper'元素后面。

 

<app-icon class="c-app-icon-arrow-prev c-app-carousel__arrow" use="arrow" />

<div class="c-app-carousel__controls">

</div>

<app-icon class="c-app-icon-arrow-next c-app-carousel__arrow" use="arrow" />

11.创建轮播数据存储并添加属性

我们将向组件的数据存储添加三个新属性:'slideTotal'将保存幻灯片的总数; 'activeSlideIndex'将记录可见幻灯片的索引,以便它可以用来计算容器的位置; 而autoInterval将记录将触发自动幻灯片转换的间隔计时器。所有这些都设置为空,除了'activeSlideIndex',其中'0'值表示第一张幻灯片应该是默认幻灯片。

 

data() {

return {

arrow,

slideTotal: null,

activeSlideIndex: 0,

autoInterval: null

}

}

12.计算slideTotal

将'ref ='container''添加到模板中的'c-app-carousel__container'元素,然后添加下面的代码片段作为组件对象本身的一个属性。'ref'用于方便地访问元素,在这种情况下,它是容器,因此我们可以计算它有多少个子元素(又名幻灯片)。这个逻辑在'mounted()'函数中的存在意味着它在组件第一次被渲染时自动运行。

 

mounted() {

this.slideTotal =

this.$refs.container.children.length;

}

13.计算容器宽度

在组件中,创建一个名为'computed'的新对象属性,并在其中创建一个名为'containerWidth()'的新函数。我们将根据'slideTotal'图来计算轮播容器的宽度。

 

computed: {

containerWidth() {

return this.slideTotal * 100 + '%';

}

}

14.创建方法

接下来,创建另一个名为'methods'的对象属性来存储我们的轮播功能。'goToSlide()'是从第11步设置'activeSlideIndex'的简单方法,'当控件的索引匹配'activeSlideIndex'时,'isControlActive()'返回true,而'nextSlide()'和'prevSlide()'只是循环遍历幻灯片。

 

methods: {

goToSlide(slideIndex) {

this.activeSlideIndex = slideIndex;

},

isControlActive(controlIndex) {

return controlIndex - 1

=== this.activeSlideIndex;

},

nextSlide() {

this.activeSlideIndex === this.

slideTotal - 1 ? this.activeSlideIndex

= 0 : this.activeSlideIndex++;

},

prevSlide() {

this.activeSlideIndex === 0 ? this.

activeSlideIndex = this.slideTotal - 1

: this.activeSlideIndex--;

}

}

15.计算转盘的容器位置

旋转木马使用transform:translateX和CSS动画来模拟幻灯片切换时使用百分比值。将下面的代码片段添加到'computed'对象中,以便我们可以计算出这个值。

 

activeSlidePosition() {

return '-' + (100 / this.slideTotal)

* this.activeSlideIndex + '%';

}

Vue.js轮播组件

 

在这个测试轮播Vue应用中,每个组件都有文档记录。对于某些应用按钮组件,文档很少。与其他人一样,例如应用程序 - 传送带 - 幻灯片组件,开发人员需要知道的信息还有很多

 

16.编写内联CSS

现在我们有了所有的值来正确定位旋转木马幻灯片容器,我们需要构建我们将添加到其“样式”属性的CSS。我们将这个逻辑作为'计算'对象中的另一个函数来添加。

 

containerStyle() {

return 'width:${this.containerWidth};

transform:translateX(${this

.activeSlidePosition});`

17.绑定内联CSS

将下面的代码片段添加到模板中的'c-app-carousel__container'元素。这会将上一步中返回的'containerStyle()'值绑定到传送带容器的'style'属性,这意味着它的CSS以及它的位置将在事情发生变化时自动更新。

 

v-bind:style="containerStyle"

18.连接下一个/上一个箭头

我们现在需要为下一个/上一个箭头添加逻辑,以便在单击各个箭头时调用步骤14中的正确方法。'prevSlide()'片段属于'c-app-icon-arrow-prev'元素,而'nextSlide()'属于'c-app-icon-arrow-next'元素。'v-on'指令只是在Vue.js中设置事件监听器的一种简单方法,'click'是我们定位的DOM事件。

 

// Prev

v-on:click.native="prevSlide()"

// Next

v-on:click.native="nextSlide()"

19.生成旋转木马控件

 

 

让我们生成控件元素,并让它们在单击时显示相应的幻灯片。在'c-app-carousel__controls'中添加下面的元素。'v-for'指令用于创建大量匹配'slideTotal'变量的控制元素,而'v-bind'指令只有当来自步骤14的'isControlActive'方法返回时才启用'is-active'类真正。最后,我们通过'v-on'创建另一个事件监听器,当单击时,控件调用'goToSlide'方法并传递其索引,该索引应与相应幻灯片的索引相匹配。

 

<div v-for="n in slideTotal"

:key="n" v-bind:class=

"{'is-active': isControlActive(n)}"

class="c-app-carousel__control"

v-on:click="goToSlide(n - 1)" ></div>

Vue.js轮播组件

 

如果与其他开发人员一起开发Vue.js项目,则需要正确记录组件,以便其他人可以了解如何使用它。包括其目的的简要概述,示例用法代码段和属性信息

 

20.导入组件

现在让我们回到顶层'app.vue'组件并导入所有内容。刚刚打开<script>标记后,导入组件'.vue'。文件:

 

import appCarousel from '@/components/app-carousel/app-carousel'

import appCarouselSlide from '@/components/app-carousel-slide/app-carousel-slide'

接下来,修改'组件'对象,以便它引用这些新导入的组件。

 

components: {

appButton,

appCarousel,

appCarouselSlide

}

最后,在<style>标签中,将我们的新SCSS导入其余的组件导入。

 

@import "/components/app-carousel/

component.app-carousel";

@import "/components/app-carousel-slide/

component.app-carousel-slide";

21.添加旋转木马和幻灯片

最后,让我们将新的轮播组件和一些幻灯片添加到主应用中。仍然在'app.vue'中,用下面的代码片替换'Under Construction'。每个<app-carousel-slide>元素代表一张幻灯片。根据需要添加尽可能多的文字或图片。包括'test-photo-01.jpg'到'test-photo-05.jpg'。一旦完成编译,现在一切都应该起作用。好哇!

 

<app-carousel>

<app-carousel-slide>

<template slot="title">My Slide

</template>

<template slot="text">

<p>This is a carousel slide.</p>

<app-button>Let's Go</app-button>

</template>

<img slot="image"

src="./assets/img/test-photo-01.jpg"

alt="My Carousel Photo">

</app-carousel-slide>

</app-carousel>

22.为传送带增加灵活性

现在我们有一个工作的Vue.js轮播,让我们添加一些额外的功能,以便我们可以轻松定制幻灯片转换的持续时间,其时间属性,声明幻灯片是否应该自动滑动,如果有的话,频率。重新打开'app-carousel.vue'并将下面代码片段中的属性添加到组件对象。

 

props: {

transitionDuration: {

type: String,

default: '0.5s'

},

transitionTiming: {

type: String,

default: 'ease'

}

}

23.修改containerStyle()

传递给这些属性的值应该从步骤17开始回到传送带的内联CSS。现在让我们修改'containerStyle'计算函数以确保发生这种情况。

 

containerStyle() {

return `width:${this.containerWidth};

transform:

translateX(${this.activeSlidePosition});

transition-timing-function:

${this.transitionTiming};

transition-duration:

${this.transitionDuration};`

}

24.将数据传递给传送带属性

下面的代码片段说明了我们如何将数据传递给这些新的属性到'App.vue'中的<app-carousel>元素。一旦添加,你应该能够传递你想要的任何值。例如,“3.0秒”持续时间会导致幻灯片转换非常缓慢!

 

<app-carousel

transition-duration="0.25s"

transition-timing="ease-in-out">

25.添加自动滑动道具

对于自动滑动,我们需要在'app-carousel.vue'中添加两个额外的对象到'道具'。'auto'可以是'true'或'false',这对应于传送带应该继续自动滑动。'autoTiming'控制自动滑动触发前的时间,默认值为5000毫秒。

 

auto: {

type: String,

default: 'false'

},

autoTiming: {

type: String,

default: 5000

}

26.开始自动滑动

现在我们需要启动组件加载的自动滑动。在传送带的“挂载()”功能中,在现有内容之后,检查'auto'属性是否设置为'true'。如果是这样,创建一个间隔,一旦'autoTiming'值通过,将重复触发'nextSlide()'方法。

 

if(this.auto === 'true') {

this.autoInterval = setInterval(() => {

this.nextSlide();

}, parseInt(this.autoTiming));

}

 

旋转木马如何工作:简单地说,诀窍是滑梯本身不会移动,但将滑梯固定在位的容器元件的确如此

 

27.取消自动滑动方法

显然,如果用户表示希望手动操作转盘,我们需要一些方法让用户禁用自动滑动。实现这一目标的第一步是一种名为'cancelAutoSlide'的新轮播方法。这将简单地取消在上一步中创建的时间间隔。

 

cancelAutoSlide() {

clearInterval(this.autoInterval);

}

28.触发cancelAutoSlide

如果用户点击箭头或控件元素,则可以假设他们希望手动操作轮播,所以如果单击这些元素的任何一个,我们就调用'cancelAutoSlide'方法。为此,只需将'+ cancelAutoSlide()'添加到每个元素的'v-on'指令中。查看下面的代码片段,查看使用'上一个'幻灯片箭头的示例。

 

v-on:click.native="prevSlide() + cancelAutoSlide()"

29.将值传递给自动滑动道具

最后,让我们将一些值传递给我们创建的自动滑动属性。回到'app.vue',将下面的代码片段添加到<app-carousel>元素中,以便每三秒钟启用一次自动滑动。

 

auto="true" auto-timing="3000"

30.完成构建传送带组件

取消开发服务器或打开一个新的终端窗口,然后运行“npm run build”,在'dist'目录中为Vue.js动力传送带组件创建一个已编译的生产就绪版本。

0

【飞龙网.COM】不一样的IT资讯网,艺术,设计,插画,资源技巧分享!

发表评论