vue-barousel v1.0.3

vue-barousel

网易云音乐同款 轮播图 组件

——简单易用

demo: http://boenfu.cn/vue-barousel/demo.html

Install

npm install vue-barousel --save

Use

  1.Import 导入

// 方法1.通过use挂载
import VueBarousel from 'vue-barousel
Vue.use(VueBarousel)


//  方法2.通过require 导入
var VueBarousel = require('VueBarousel')



// 方法3.或者直接导入js文件
<script src="./dist/vue-barousel.js"></script>

  2.Usage 用法

<barousel :list="[{src: '图片路径', title: '图片title'}]"></barousel>

3.Options 配置项

详细介绍：

1. 数组格式如下

   [{
         title: '一张图片', //可选
         src: 'xx.jpg'  //图片地址
   }]

   ​

2. imgType

   等同于 background-size

   可选项 full cover contain

   full 宽高皆为 100%

   cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

   contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

   ​

3. barousel--> 回调函数

   解释：返回触发的序号，便于触发相应逻辑

   ​

   *数值参数均无需带单位

4.Develop 开发

进入 vue-barousel 目录

// 开发模式
npm run dev

// 打包
npm run build

Demo Code

<template>
  <div id="app">
    <barousel :list="setList()"
              :width="800"
              :height="280"
              :imgType="'full'"
              @barousel="cb">
    </barousel>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    setList() {
      let list = [];
      for(let i =1 ; i<= 8;i++){
        list.push({
          title: i,
          src: 'static/img/'+i+'.jpg'
        })
      }
      return list;
    },
    cb (i) {
      alert(i);
    }
  }
}
</script>