This time I will show you how to use the VueSliderShow function of the responsive adaptive carousel component plug-in based on Vue2x_, and how to use the VueSliderShow function of the responsive adaptive carousel component plug-in based on Vue2xNotesThere are Which ones, the following are practical cases, let’s take a look.
VueSliderShow, hence the name, is a carousel component plug-in for vue. The plug-in:
1. Supports any scaling of the browser and is compatible with mobile terminals.
2. Support automatic switching, stop switching when the mouse passes, click to switch on paging/any page, switch left and right,
3. Support text introduction (more than one line will be automatically omitted)
This article talks about the development of a The whole process of a responsive adaptive carousel component plug-in based on Vue2x, including publishing to npm, building your own npm package, and tips for downloading and installing. Reading this article requires some Vue syntax sugar (custom tags, calculated attributes, Parent-child component communication, etc.), as well as basic knowledge of ES6, npm, etc. Let’s take a look at Demo
Sample source code address
Install
npm i vueslideshow
in vue2.x:
//轮播组件的位置
(2) In the components folder, create index.vue, sliderShow.vue (because it is a sample project, according to the specification Poor) Let the index.js startup page in the router folder point to index.vue
import Vue from 'vue' import Router from 'vue-router' import Index from '@/components/index' Vue.use(Router) export default new Router({ routes: [ { path: '/', component: Index } ] })
Development project:
(1) index As the parent component, .vue references the carousel component through es6, declares to use the carousel sliderShow component, and then passes two invTime and slides attribute parameters to the sliderShow component, which are the carousel switching time and data transfer. Here we have the slides array, Static simulation data is used, and the formal environment is data requested through the request interface.
ES6 logical segment code interpretation, sliderShow.vue accepts data passed from the parent component through props
props: { slides: { type: Array, default: [] }, inv: { type: Number, default: 1000 } },
计算属性，前一页，这里就控制nowIndex,在当前数据索引里减一，当是第一条数据的时候，我们要跳到最后一条，所以当第一条数据的时候我们这里判断它并让他赋值最后一条数据，后一页和前一页相似，判断最后一页数据，跳到第一页。
computed: { prevIndex () { if (this.nowIndex === 0) { return this.slides.length - 1 } else { return this.nowIndex - 1 } }, nextIndex () { if (this.nowIndex === this.slides.length - 1) { return 0 } else { return this.nowIndex + 1 } } },
通过Index值,从而改变具体数据
goto (index) { this.isShow = false setTimeout(() => { this.nowIndex = index this.isShows = true }, 10) },
当页面加载完后直接执行runInv()方法，然后自动切换，setInterval（）/ clearInterval()是js内置的定时器，setInterval()里按照父组件里传的时间来调用函数的方法，clearInterval()是结束定时器的循环调用函数
runInv () { this.invId = setInterval(() => { this.goto(this.nextIndex) }, this.inv) }, clearInv () { clearInterval(this.invId) } }, mounted () { this.runInv(); }
轮播组件插件就基本上ok了，下面讲解一下把这个轮播组件插件放到npm里，构建自己的npm包。
分割线 npm！！！！！
构建npm包：
0、在https://www.npmjs.com创建自己的账号
1、新建一个项目文件夹VueSliderShow，把上面的sliderShow.vue文件复制文件。打开cmd进入到VueSliderShow目录，然后命令行执行：npm init(按流程填写相关信息，都可以按照自己的实际情况写)，然后会生成一个package.json，例如下面是我这个组件的基本信息
{ "name": "vueslideshow", "version": "1.0.2", "description": "a slider implement by vuejs", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "https://github.com/HongqingCao/My-Code/tree/master/VueSliderShow" }, "author": "HongqingCao", "license": "ISC" }
2、创建一个index.js
var sliderShow = require('./sliderShow') module.exports = sliderShow
3、创建一个README.md，描述一下这个组件，可以参考一下我写的
# vueslidershow > a slider implement by vuejs >一个vue的响应式自适应轮播图组件 [Demo](https://github.com/HongqingCao/My-Code/tree/master/VueSliderShow) ######  ## Install " bash npm i vueslideshow " ## 应用案例 #### in vue2.x: "html