vue-barousel
网易云音乐同款 轮播图 组件
——简单易用
Install
npm install vue-barousel --save
yarn add vue-barousel
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 配置项
| 选项名 | 是否必须 | 默认值 | 介绍 |
|---|---|---|---|
| :list | true | 无 | 选项数组{src: '图片路径', title: '图片title'} |
| @barousel | false | 无 | 返回触发元素序号 |
| :width | false | 100% | 容器宽度(默认父级100%) |
| :height | false | 100% | 容器高度(默认父级100%) |
| :arrow | false | true | 是否开启前后箭头 |
| :imgType | false | full | 图片显示模式 |
| :autoBegin | false | true | 是否自动播放 |
| :mask | false | true | 前后图片遮罩 |
| :interval | false | 5000 | 播放间隔 (ms) |
| :tab | false | true | 是否开启底部导航 |
| :color | false | rgb(248, 85, 85) | 底部 tab 激活时颜色 |
详细介绍：
-
数组格式如下
[{ title: '一张图片', //可选 src: 'xx.jpg' //图片地址 }]
-
imgType
等同于 background-size
可选项 full cover contain
full 宽高皆为 100%
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
-
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>