Merge branch 'master' of github.com:yutent/doui
宇天
commit
c60cb14576
|
|
@ -1,57 +0,0 @@
|
||||||
# 幻灯片组件文档
|
|
||||||
|
|
||||||
## 配置说明
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
sliderList: [{src: '', title: '', link: '', elm: ''}], //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); elm: 幻灯片中的dom元素
|
|
||||||
autoSlide: boolean, //true: 自动轮播; false: 停止轮播
|
|
||||||
time: int, //自动轮播间隔时间
|
|
||||||
preview: boolean //是否缩略有图(不适用于全屏)
|
|
||||||
skin: int, //4种,默认0(0,1,2,3)
|
|
||||||
sliderType: int, //幻灯片动画效果,目前有1: 水平滑动;2: 水平渐进渐出;3: 垂直滑动;4: 垂直渐进渐出
|
|
||||||
$onSuccess: function(vm){
|
|
||||||
slider = vm
|
|
||||||
}, //初始化回调
|
|
||||||
vm.$setSliderList(list), //赋值数据给幻灯片数组
|
|
||||||
}
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## 用法
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="slider" :controller="test">
|
|
||||||
<template name="sliders" config="sliderOpts"></template>
|
|
||||||
</div>
|
|
||||||
<!--
|
|
||||||
其中config属性是指定分页组件的配置，会自动从上一层controller里找;
|
|
||||||
其他的属性（除$id, config, id, class, tabindex, style, ms-*属性,data-*属性外，也可以用以配置组件，且优先级最高）;
|
|
||||||
name属性可以设定组件的$id值，方便各模块之间进行通讯
|
|
||||||
-->
|
|
||||||
<!-- 引入幻灯片组件 -->
|
|
||||||
<script src="//dist.doui.cc/js/yua.js"></script>
|
|
||||||
<script>
|
|
||||||
require(['//dist.doui.cc/js/lib/sliders/main.js'],function(){
|
|
||||||
var vm = yua({
|
|
||||||
$id: "test",
|
|
||||||
sliderOpts: {
|
|
||||||
sliderList: [{src: '', link: '', title: '', elm: ''}],
|
|
||||||
autoSlide: false,
|
|
||||||
time: 0,
|
|
||||||
// preview: true,
|
|
||||||
fullScreen: true,
|
|
||||||
skin: 1,
|
|
||||||
sliderType: 4,
|
|
||||||
$onSuccess: function(vm){
|
|
||||||
slider = vm
|
|
||||||
slider.$setSliderList(list)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
yua.scan()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<template>
|
||||||
|
<label></label>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
:host {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default class Slider {
|
||||||
|
props = {
|
||||||
|
value: 0,
|
||||||
|
max: 100
|
||||||
|
}
|
||||||
|
|
||||||
|
__init__() {
|
||||||
|
/* render */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -1,95 +0,0 @@
|
||||||
<div class="do-sliders" :class="{fullscreen: fullScreen}">
|
|
||||||
<div class="skin" :class="{{skin}}">
|
|
||||||
|
|
||||||
<div class="slider-content" :class="{'h-83': preview && !fullScreen, 'h-100': !preview || fullScreen}" :if="sliderList.length" :mouseenter="$stopSlide()" :mouseleave="$startSlide()">
|
|
||||||
<a class="do-ui-font slider-btn" href="javascript:;"
|
|
||||||
:if="sliderType < 3"
|
|
||||||
:click="$go(-1)"></a>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="box"
|
|
||||||
:if="sliderType == 1"
|
|
||||||
:css="{width: sliderList.length * 100 + '%', transform: animation}">
|
|
||||||
<a class="page" target="_blank"
|
|
||||||
:repeat="sliderList"
|
|
||||||
:css="{width: currWidth + '%'}"
|
|
||||||
:attr="{href: el.link || 'javascript:;'}">
|
|
||||||
<img :if="el.src && el.src != ''" :attr-src="el.src">
|
|
||||||
<p :if="el.title"
|
|
||||||
:html="el.title"
|
|
||||||
class="title-class"></p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="box"
|
|
||||||
:if="sliderType == 2">
|
|
||||||
<a target="_blank"
|
|
||||||
class="page fadeType"
|
|
||||||
:repeat="sliderList"
|
|
||||||
:css="{opacity: curr != $index ? 0 : 1}"
|
|
||||||
:attr="{href: el.link || 'javascript:;'}">
|
|
||||||
<img :if="el.src && el.src != ''" :attr-src="el.src">
|
|
||||||
|
|
||||||
<p :if="el.title"
|
|
||||||
:html="el.title"
|
|
||||||
class="title-class"></p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="box"
|
|
||||||
:if="sliderType == 3"
|
|
||||||
:css="{height: sliderList.length * 100 + '%', transform: animation}">
|
|
||||||
<a class="page" target="_blank"
|
|
||||||
:repeat="sliderList"
|
|
||||||
:css="{width: '100%', height: (100 / sliderList.length) + '%'}"
|
|
||||||
:attr="{href: el.link || 'javascript:;'}">
|
|
||||||
<img :if="el.src && el.src != ''" :attr-src="el.src">
|
|
||||||
<p :if="el.title"
|
|
||||||
:html="el.title"
|
|
||||||
class="title-class"></p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="box"
|
|
||||||
:if="sliderType == 4">
|
|
||||||
<a target="_blank"
|
|
||||||
class="page fadeType"
|
|
||||||
:repeat="sliderList"
|
|
||||||
:css="{opacity: curr != $index ? 0 : 1}"
|
|
||||||
:attr="{href: el.link || 'javascript:;'}">
|
|
||||||
<img :if="el.src && el.src != ''" :attr-src="el.src">
|
|
||||||
{{el.elm | html}}
|
|
||||||
<p :if="el.title"
|
|
||||||
:html="el.title"
|
|
||||||
class="title-class"></p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a class="do-ui-font slider-btn" href="javascript:;"
|
|
||||||
:if="sliderType < 3"
|
|
||||||
:click="$go(1)"></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="slider-preview-btn"
|
|
||||||
:class="{'slider-preview-btn-vertical': sliderType > 2}"
|
|
||||||
:css="{padding: !preview && sliderType < 3 ? '2%' : ''}" >
|
|
||||||
<span href="javascript:;"
|
|
||||||
:if="!preview || fullScreen"
|
|
||||||
:class="{'no-preview-act': curr === $index}"
|
|
||||||
:repeat="sliderList"
|
|
||||||
:click="$jump($index)">
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<a class="btn-img" href="javascript:;"
|
|
||||||
:if="preview && !fullScreen"
|
|
||||||
:class="{act: curr === $index || (curr >= maxNum && $index == maxNum - 1), 'default-btn': !el.src}"
|
|
||||||
:click="$jump($index)"
|
|
||||||
:repeat="sliderBtnList">
|
|
||||||
<img
|
|
||||||
:class="{'preview-act': curr === $index || (curr >= maxNum && $index == maxNum - 1)}"
|
|
||||||
:if="el.src && el.src != ''"
|
|
||||||
:attr-src="el.src" />
|
|
||||||
<div class="btn-background" ms-if="el.src"></div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,163 +0,0 @@
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @authors linteng (875482941@qq.com)
|
|
||||||
* @date 2017-09-07 19:53:18
|
|
||||||
*/
|
|
||||||
|
|
||||||
define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
|
|
||||||
|
|
||||||
var dom;
|
|
||||||
var sliderNum = 0;
|
|
||||||
var skin = ['skin-0','skin-1','skin-2','skin-3']
|
|
||||||
|
|
||||||
/**
|
|
||||||
* [根据当前幻灯片索引获取填充底下按钮数据]
|
|
||||||
* @param {Object} vm [vm对象]
|
|
||||||
* @return {[Array]} [填充到按钮的数据]
|
|
||||||
*/
|
|
||||||
function getBtnList(vm, el){
|
|
||||||
if(el){
|
|
||||||
dom = el
|
|
||||||
}
|
|
||||||
vm.maxNum = Math.floor(dom.offsetWidth / 90)
|
|
||||||
var curr = vm.curr + 1
|
|
||||||
let res = []
|
|
||||||
if(!vm.preview)
|
|
||||||
res = vm.sliderList
|
|
||||||
|
|
||||||
if(vm.maxNum >= vm.sliderList.length){
|
|
||||||
res = vm.sliderList
|
|
||||||
}else{
|
|
||||||
if(curr > vm.maxNum){
|
|
||||||
res = vm.sliderList.slice(curr - vm.maxNum, curr)
|
|
||||||
}else if(curr <= vm.maxNum){
|
|
||||||
res = vm.sliderList.slice(0, vm.maxNum)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return res
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* [设置自动轮播]
|
|
||||||
* @param {[type]} vm [description]
|
|
||||||
* @return {[type]} [description]
|
|
||||||
*/
|
|
||||||
function autoSlide(vm){
|
|
||||||
vm.timer = setTimeout(function(){
|
|
||||||
vm.$go(1)
|
|
||||||
autoSlide(vm)
|
|
||||||
}, vm.time <= 0 ? 3000 : vm.time)
|
|
||||||
}
|
|
||||||
|
|
||||||
return yua.component("sliders", {
|
|
||||||
$template: tpl,
|
|
||||||
$init: function(vm){
|
|
||||||
vm.$go = function(num){
|
|
||||||
vm.curr += num
|
|
||||||
if(vm.curr < 0){
|
|
||||||
vm.curr = vm.sliderList.length - 1
|
|
||||||
}else if(vm.curr > vm.sliderList.length - 1){
|
|
||||||
vm.curr = 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
vm.$jump = function(i){
|
|
||||||
var curr = vm.curr + 1
|
|
||||||
if(curr > vm.maxNum && vm.preview){
|
|
||||||
var distance = vm.maxNum - (i + 1)
|
|
||||||
vm.curr -= distance
|
|
||||||
}else{
|
|
||||||
vm.curr = i
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
vm.$stopSlide = function(){
|
|
||||||
if(vm.autoSlide){
|
|
||||||
clearTimeout(vm.timer)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
vm.$startSlide = function(){
|
|
||||||
if(vm.autoSlide)
|
|
||||||
autoSlide(vm)
|
|
||||||
}
|
|
||||||
|
|
||||||
vm.$setSliderList = function(list){
|
|
||||||
vm.sliderBtnList.removeAll()
|
|
||||||
vm.sliderList.pushArray(list)
|
|
||||||
}
|
|
||||||
|
|
||||||
vm.$onSuccess(vm)
|
|
||||||
},
|
|
||||||
$ready: function(vm, el){
|
|
||||||
vm.skin = skin[vm.skin]
|
|
||||||
vm.currWidth = (100 / vm.sliderList.length)
|
|
||||||
if(vm.autoSlide)
|
|
||||||
autoSlide(vm)
|
|
||||||
|
|
||||||
if(vm.preview){
|
|
||||||
vm.sliderBtnList.removeAll()
|
|
||||||
vm.sliderBtnList.pushArray(getBtnList(vm, el))
|
|
||||||
}
|
|
||||||
|
|
||||||
vm.$watch('curr', function(val, old) {
|
|
||||||
|
|
||||||
vm.animation = vm.sliderType > 2 ? 'translate(0, ' + (-vm.currWidth * val) + '%)' : 'translate(' + (-vm.currWidth * val) + '%, 0)'
|
|
||||||
if(vm.preview && vm.maxNum < vm.sliderList.length){
|
|
||||||
vm.sliderBtnList.removeAll()
|
|
||||||
vm.sliderBtnList.pushArray(getBtnList(vm, el))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
window.addEventListener('resize', function(){
|
|
||||||
|
|
||||||
vm.animation = vm.sliderType > 2 ? 'translate(0, ' + (-vm.currWidth * vm.curr) + '%)' : 'translate(' + (-vm.currWidth * vm.curr) + '%, 0)'
|
|
||||||
if(vm.preview && vm.maxNum < vm.sliderList.length){
|
|
||||||
vm.sliderBtnList.removeAll()
|
|
||||||
vm.sliderBtnList.pushArray(getBtnList(vm, el))
|
|
||||||
}
|
|
||||||
}, false)
|
|
||||||
|
|
||||||
if(vm.sliderType >= 3){
|
|
||||||
var now = 0
|
|
||||||
var mouseWheelEv = /Firefox/i.test(navigator.userAgent) ? "DOMMouseScroll": "mousewheel"
|
|
||||||
var direction = /Firefox/i.test(navigator.userAgent) ? "detail": "deltaY"
|
|
||||||
window.addEventListener(mouseWheelEv, function(ev){
|
|
||||||
if(Date.now() - now > 500 || now == 0){
|
|
||||||
|
|
||||||
if(ev[direction] > 0){
|
|
||||||
vm.$go(1)
|
|
||||||
}else{
|
|
||||||
vm.$go(-1)
|
|
||||||
}
|
|
||||||
now = Date.now()
|
|
||||||
}
|
|
||||||
}, false)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
currWidth: 0,
|
|
||||||
animation: '',
|
|
||||||
curr: 0,
|
|
||||||
sliderBtnList: [],
|
|
||||||
maxNum: 0,
|
|
||||||
timer: yua.noop,
|
|
||||||
sliderType: 1,
|
|
||||||
|
|
||||||
sliderList: [],
|
|
||||||
autoSlide: '',
|
|
||||||
time: 3000,
|
|
||||||
preview: false,
|
|
||||||
skin: 0,
|
|
||||||
fullScreen: false,
|
|
||||||
|
|
||||||
$onSuccess: yua.noop,
|
|
||||||
$setSliderList: yua.noop,
|
|
||||||
$jump: yua.noop,
|
|
||||||
$stopSlide: yua.noop,
|
|
||||||
$startSlide: yua.noop,
|
|
||||||
$go: yua.noop,
|
|
||||||
})
|
|
||||||
|
|
||||||
yua.scan(dom)
|
|
||||||
|
|
||||||
})
|
|
||||||
Reference in New Issue