数字滚动插件的使用

数字滚动插件的使用

安装插件

$ npm i vue-count-to

使用数字滚动插件

使用count-to组件来代替要显示的数字

<span>组织总人数</span>
<!-- 起始值 终点值  滚动时间 -->
<count-to
  :start-val="0"
  :end-val="228"
  :duration="1000"
/>
</div>
<div class="todo-item">
<span>正式员工</span>
<count-to
  :start-val="0"
  :end-val="334"
  :duration="1000"
/>
</div>
<div class="todo-item">
<span>合同待签署</span>
<count-to
  :start-val="0"
  :end-val="345"
  :duration="1000"
/>
</div>
<div class="todo-item">
<span>待入职</span>
<count-to
  :start-val="0"
  :end-val="890"
  :duration="1000"
/>            </div>
<div class="todo-item">
<span>本月待转正</span>
<count-to
  :start-val="0"
  :end-val="117"
  :duration="1000"
/>
</div>
<div class="todo-item">
<span>本月待离职</span>
<count-to
  :start-val="0"
  :end-val="234"
  :duration="1000"
/>
</div>
<div class="todo-item">
<span>接口总访问</span>
<count-to
  :start-val="0"
  :end-val="789"
  :duration="1000"
/>

  <span>申报人数</span>
  <count-to
    :start-val="0"
    :end-val="223"
    :duration="1000"
  />

</div>
<div class="info-list">
  <div class="info-list-item">
    <span>待申报(人)</span>
    <count-to
      :start-val="0"
      :end-val="117"
      :duration="1000"
    />
  </div>
  <div class="info-list-item">
    <span>申报中(人)</span>
    <count-to
      :start-val="0"
      :end-val="167"
      :duration="1000"
    />
  </div>
  <div class="info-list-item">
    <span>已申报(人)</span>
    <count-to
      :start-val="0"
      :end-val="24"
      :duration="1000"
    />
 
<div class="panel-title">公积金申报数据</div>
<div class="chart-container">
<div class="chart-info">
<div class="info-main">
  <span>申报人数</span>
  <count-to
    :start-val="0"
    :end-val="335"
    :duration="1000"
  />
</div>
<div class="info-list">
  <div class="info-list-item">
    <span>待申报(人)</span>
    <count-to
      :start-val="0"
      :end-val="345"
      :duration="1000"
    />
  </div>
  <div class="info-list-item">
    <span>申报中(人)</span>
    <count-to
      :start-val="0"
      :end-val="109"
      :duration="1000"
    />
  </div>
  <div class="info-list-item">
    <span>已申报(人)</span>
    <count-to
      :start-val="0"
      :end-val="77"
      :duration="1000"
    />

</template>

//引入插件并使用
<script>
import CountTo from 'vue-count-to'  
export default {
  components: {
    CountTo
  }
}
</script>