153 lines
3.4 KiB
JavaScript
153 lines
3.4 KiB
JavaScript
|
/**
|
|||
|
|
*
|
|||
|
|
* @authors yutent (yutent@doui.cc)
|
|||
|
|
* @date 2016-08-19 10:38:25
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
"use strict";
|
|||
|
|
|
|||
|
|
|
|||
|
|
define(['avalon'], function(av){
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
av.component('do:count', {
|
|||
|
|
$replace: true,
|
|||
|
|
$template: '<ul class="do-ui-count"><li class="num-box" ms-repeat-obj="list" ms-class="split:obj.opt === 0"><span class="num" ms-repeat="obj.val">{{el}}</span></li></ul>',
|
|||
|
|
maxLen: 8,
|
|||
|
|
speed: 1,
|
|||
|
|
update: av.noop,
|
|||
|
|
list: [],
|
|||
|
|
$list: [],
|
|||
|
|
total: 0,
|
|||
|
|
style: 2,
|
|||
|
|
$construct: function(opt, a, b){
|
|||
|
|
var vm = av.mix(a, b)
|
|||
|
|
document.head.insertAdjacentHTML('afterBegin', '<style>' +
|
|||
|
|
'.do-ui-count {width: 100%;height: 50px;text-align:center;}' +
|
|||
|
|
'.do-ui-count li.num-box {overflow:hidden;display: inline-block;position: relative;width: 40px;height: 50px;margin:0 15px;line-height: 50px;background: #09f;font-size: 30px;}' +
|
|||
|
|
'.do-ui-count li.num-box .num {display: block;width: 100%;height: 50px;margin-top: 0;transition: .3s ease-in-out}' +
|
|||
|
|
'.do-ui-count li.num-box.split {width: auto;margin:0;background: none;}' +
|
|||
|
|
'</style>')
|
|||
|
|
|
|||
|
|
vm.total = vm.total >> 0
|
|||
|
|
vm.maxLen = vm.maxLen || 8
|
|||
|
|
|
|||
|
|
return av.mix(opt, vm)
|
|||
|
|
},
|
|||
|
|
$ready: function(vm, ele){
|
|||
|
|
|
|||
|
|
function updateList(val){
|
|||
|
|
val = numberFormat(val, vm.maxLen)
|
|||
|
|
|
|||
|
|
vm.$list = []
|
|||
|
|
vm.$list = val.split('')
|
|||
|
|
if(vm.style === 2){
|
|||
|
|
vm.$list = vm.$list.reverse()
|
|||
|
|
val = vm.$list.join('').replace(/([\d,]{3})/g, '$1,')
|
|||
|
|
val = val.replace(/^,|,$/g, '')
|
|||
|
|
vm.$list = val.split('').reverse()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
vm.$list.forEach(function(it, i){
|
|||
|
|
|
|||
|
|
if(it === ','){
|
|||
|
|
if(!vm.list[i])
|
|||
|
|
vm.list.push({opt: 0, val: [it]})
|
|||
|
|
|
|||
|
|
}else{
|
|||
|
|
if(vm.list[i]){
|
|||
|
|
if(it !== vm.list[i].last){
|
|||
|
|
vm.list[i].last = it
|
|||
|
|
vm.list[i].val.push(it)
|
|||
|
|
var curr = ele.querySelectorAll('.num-box')[i]
|
|||
|
|
curr.querySelector('.num').style.marginTop = vm.speed * 50 + 'px'
|
|||
|
|
setTimeout(function(){
|
|||
|
|
vm.list[i].val.shift()
|
|||
|
|
}, 300)
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
vm.list.push({opt: 1, last: it, val: [it]})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateList(vm.total)
|
|||
|
|
|
|||
|
|
vm.update = function(val){
|
|||
|
|
if(val < 0) //确定滚动方向
|
|||
|
|
vm.speed = 1
|
|||
|
|
else
|
|||
|
|
vm.speed = -1
|
|||
|
|
|
|||
|
|
|
|||
|
|
vm.total = (vm.total - 0) + val
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
vm.$watch('total', function(n, o){
|
|||
|
|
|
|||
|
|
if(n === o)
|
|||
|
|
return
|
|||
|
|
|
|||
|
|
updateList(n)
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//数字长度补全（前面加0）
|
|||
|
|
function numberFormat(num, len){
|
|||
|
|
num += ''
|
|||
|
|
if(num.length >= len)
|
|||
|
|
return num
|
|||
|
|
|
|||
|
|
while(num.length < len)
|
|||
|
|
num = '0' + num
|
|||
|
|
return num
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
return av
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
})
|