1.1.3 • Published 5 years ago
vue-ui-slide v1.1.3
Installation
npm i vue-ui-slide --save
使用前须知
1.0.0以上,1.1.0以下版本 导出的是.vue文件,使用及配置如下:
使用npm安装以后,安装包目录中package.json有两个出口,jsnext:main,main,出口文件为.vue组件文件
如果你的webpack配置包含如下配置,则可以正常引用
module.exports = { resolve: { // 针对 Npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件 mainFields: ['jsnext:main', 'main'] }, };
否则需要babel对其进行转换配置
module.exports = { module: { rules: [{ test: /\.vue$/, loader: 'vue-loader', include: [ resolve('src'), resolve('node_modules/vue-ui-slide'), ], options: vueLoaderConfig }] } }
1.1.0及以上版本支持vue ssr,无需配置,直接使用,如下:
import 'vue-ui-slide/dist/component.css';
import Slide from 'vue-ui-slide';
Usage
<template>
<div class="example">
<slide
v-if="pics.length > 0"
:duration="300"
effect="ease"
:init-index="1"
:loop="false"
:auto="false"
:show-page-index="false"
:bound-rate="0.1">
<div class="slide-item" v-for="item in pics">
<img :src="item">
</div>
</slide>
</div>
</template>
<script>
import slide from 'vue-ui-slide'
export default {
data() {
return {
pics: [
imgUrl1, imgUrl2, imgUrl3
]
}
},
components: {
slide
}
}
</script>
组件props配置
- auto 自动轮播,默认false
- duration 轮播动画时间,默认400ms
- effect 动画过渡效果,transition-timing-function,默认ease
- delay 开始轮播延迟时间,默认4000ms
- interval 轮播间隔时间,默认4000ms
- loop 支持循环轮播,默认true
- showPage 显示分页,默认true
- showPageIndex 显示分页索引,从1开始,默认true
- showBtn 显示上一页,下一页按钮,默认true
- slideChange 轮播切换回调函数,function
- isFullscreen 支持全屏显示,默认false,如果全屏显示,内部会停止自动轮播
- initIndex 轮播初始化索引,从1开始,默认1
- boundRate 轮播边界值(小数),如果触摸距离占轮播适口的比率大于该值,则轮播到上一屏或下一屏
更新说明
version 1.0.0之前版本不建议使用 version 1.0.0版本更新如下:
- 内部代码采用最新(18/03/06)vue-cli脚手架测试;
- 优化性能:首屏滑动,webkitTransitionEnd/transitionend事件监听,非循环轮播首屏向左/尾屏向右 计算滑动值优化,优化了小部分代码
- 解决了获取css属性代码bug