跳到主要内容

创建灵活的轮播组件

Vue.js carousel component

Vue.js最近实现了跨越式发展,成为迄今为止排名第六的分叉项目Github上在撰写本文时,甚至领先于Facebook自己的ReactJS。可以肯定地说,它正迅速成为其中的中流砥柱Web开发,一个可靠的选择JavaScript框架用于项目。

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

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

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

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

03.创建幻灯片组件

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

 

在空