vue 图片自适应排列插件_基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能...

VueSliderShow故名思意，vue的轮播图组件插件，该插件：

1、支持浏览器任意放缩，兼容移动端，

2、支持自动切换，鼠标经过停止切换，分页/任意页点击切换，左右切换，

3、支持文字介绍(超过一行自动省略)

本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程，包含发布到npm，构建自己的npm包，供下载安装使用的技巧，阅读本文需要些Vue的语法糖(自定义标签、计算属性、父子组件通信等)，以及ES6、npm等基础知识。先来看下Demo

Install

npm i vueslideshow

使用示例

in vue2.x:

//轮播组件的位置

(2)在components文件夹里，创建index.vue，sliderShow.vue(因为是示例项目，规范上欠佳)让router文件夹里的index.js启动页指向index.vue

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',component: Index

}

]

})

开发项目：

(1)index.vue作为父组件,通过es6的方式引用轮播组件，声明使用轮播sliderShow组件，然后给sliderShow组件传递两个 invTime、slides属性参数࿰