Vue中使用jQuery数字增量翻动组件

数字翻牌效果有很多jQuery组件可使用，但在Vue组件中使用时遇到一些问题，在此记录下。

1、js文件引入，百度到的jquery组件中，都是在<script>标签的src属性引入，在vue我是这么引入的

在js文件的底部用  export 导出

在使用的组件在这样引入：

2、组件代码

注意style里面不能加scoped，因为数字是在js文件中动态添加的，加scoped的话css不生效

num是父组件传入的

<template>
  <div>
    <div class="Odometer"></div>
    <div class="Odometer2 OdometerBg"></div>

  </div>


</template>
<script>
  import rollNumber from "../utils/rollNumber";
  
  import $ from 'jquery';
  export default {
    name: 'numberList',
    components: {

    },
    data() {
      return {
      }
    },
    mounted() {
         this.odo1 = new rollNumber('.Odometer',{
            num : this.num
        });
        this.odo2 = new rollNumber('.Odometer2',{
            num : this.num
        });
      
    },
    watch:{
      num(){
        this.odo1.update(this.num);
        this.odo2.update(this.num);
      }
    },
    props:{
      num:{
        type: Number,
        default:0,
        
      }

    },
    methods: {


    }

  }

</script>
<style>
  .Odometer,
  .OdometerBg {
    margin: 40px;
  }

  .OdometerBg .number-animate .number-animate-dom,
  .OdometerBg .number-animate .number-animate-dot {
    width: 40px;
  }

  .OdometerBg .number-animate .number-animate-dot span {
    background: #222;
    color: yellow;
    border-left: 1px solid #fff;
  }

  .OdometerBg .number-animate .number-animate-dom {
    background: #222;
    color: yellow;
    border-left: 1px solid #fff;
  }

  .number-animate {
    line-height: 45px;
    height: 45px;
    font-size: 40px;
    overflow: hidden;
    display: inline-block;
    position: relative;
  }

  .number-animate .number-animate-dot {
    width: 21px;
    float: left;
    text-align: center;
  }

  .number-animate .number-animate-dom {
    width: 27px;
    text-align: center;
    float: left;
    position: relative;
    top: 0;
  }

  .number-animate .number-animate-dom span,
  .number-animate .number-animate-dot span {
    float: left;
    width: 100%;
    height: 45px;
    line-height: 1.1;
  }

</style>

js文件

//数字翻滚

const rollNumber = (function(win,doc) {
    class rollNumber {
        constructor(x, y) {
            this.setting = {
                len : 4, //默认最小位数
                speed : 3000,//动画速度
                num : "", //初始化值
                symbol : '',//默认的分割符号，千，万，千万
                dot : 0 ,//保留几位小数点 
                zero : true,
                oldNum:0,
            }
            this.$parent = doc.querySelector(x);
            this.html = `<div class="number-animate-dom" data-num="{{num}}">
                        <span class="number-animate-span">0</span>
                        <span class="number-animate-span">1</span>
                        <span class="number-animate-span">2</span>
                        <span class="number-animate-span">3</span>
                        <span class="number-animate-span">4</span>
                        <span class="number-animate-span">5</span>
                        <span class="number-animate-span">6</span>
                        <span class="number-animate-span">7</span>
                        <span class="number-animate-span">8</span>
                        <span class="number-animate-span">9</span>
                        <span class="number-animate-span">.</span>
                      </div>`;
            this.extend( this.setting, y );
            this.init(this.$parent,y)
        }
        init (x,y){
            x.innerHTML =  this.setNumDom(this.numToArr(this.setting.num))
            this.animate(x);
        };
        animate ($parent){//执行动画
            let $dom = $parent.querySelectorAll( '.number-animate-dom' );
            for(let o of $dom ){
                let num = o.getAttribute('data-num');
               // if(this.setting.zero) num = (num==0?10:num);
                this._height = o.offsetHeight/11;  
                o.style['transform'] = o.style['-webkit-transform'] = 'translateY(' + (num=="." ? -10 * this._height  : -num * this._height)+'px)';
                o.style['transition'] = o.style['-webkit-transition'] = (num=="." ?  0 : this.setting.speed/1000)+'s'
            }
        }
        setNumDom (arrStr){//分割符号
            let shtml = '<div class="number-animate">';
            arrStr.forEach((o,i)=>{
                if(i != 0 && (arrStr.length-i)%3 == 0 && this.setting.symbol != "" && o!="."){
                    shtml += '<div class="number-animate-dot"><span>'+this.setting.symbol+'</span></div>'+this.html.replace("{{num}}",o);
                }else{
                    shtml += this.html.replace("{{num}}",o);
                }
            });
            shtml += '</div>';
            return shtml;
        }
        update (num){
            let newArr = this.numToArr(num),$dom = this.$parent.querySelectorAll(".number-animate-dom");
            if($dom.length != newArr.length){
                this.$parent.innerHTML = this.setNumDom(this.numToArr(num))
            }else{
                ;[].forEach.call($dom,(o,i)=>{
                    o.setAttribute('data-num',newArr[i]);
                });
            }
            this.animate(this.$parent);
        }
        numToArr (num){
            num = parseFloat(num).toFixed(this.setting.dot);
            let arrStr = typeof(num) == 'number' ? num.toString().split("") : num.split("")
            let arrLen = arrStr.length;
            if(arrStr.length <=this.setting.len){
                for(let _lens = 0;_lens<this.setting.len - arrLen;_lens++){
                    arrStr.unshift(0)
                }
            }
            return arrStr;
        }
        extend (n,n1){ 
            for(let i in n1){n[i] = n1[i]};
        }
    }
    return rollNumber;
})(window,document);
export default rollNumber;

效果截图，样式可自己修改，效果：点击查看效果（自己搭的可能会失效）