1、组件封装基础  

  npm install countup@latest

2、组件中使用id值

3、组件中获得dom

如何封装一个组件,在组件中用到需要传入HTML元素ID值的JS库时如何处理,如何获取一个DOM或一个组件实例,插槽、$nextTick、生命周期

<template>
<div>
<slot name="left"></slot><span ref="number" :class="countClass" :id="eleId"></span><slot name="right"></slot>
</div>
</template>
<script>
import CountUp from 'countup'
export default {
name: 'CountTo',
computed: {
eleId () {
return `count_up_${this._uid}`
},
countClass () {
return [
'count-to-number',
this.className
]
}
},
data () {
return {
counter: {}
}
},
props: {
/**
* @description 起始值
*/
startVal: {
type: Number,
default: 0
},
/**
* @description 最终值
*/
endVal: {
type: Number,
required: true
},
/**
* @description 小数点后保留几位小数
*/
decimals: {
type: Number,
default: 0
},
/**
* @description 动画延迟开始时间
*/
delay: {
type: Number,
default: 0
},
/**
* @description 渐变时长
*/
duration: {
type: Number,
default: 1
},
/**
* @description 是否使用变速效果
*/
useEasing: {
type: Boolean,
default: false
},
/**
* @description 是否使用变速效果
*/
useGrouping: {
type: Boolean,
default: true
},
/**
* @description 分组符号
*/
separator: {
type: String,
default: ','
},
/**
* @description 整数和小数分割符号
*/
decimal: {
type: String,
default: '.'
},
className: {
type: String,
default: ''
}
},
methods: {
getCount () {
console.log(this.$refs.number.innerText)
return this.$refs.number.innerText
},
emitEndEvent () {
setTimeout(() => {
this.$nextTick(() => {
this.$emit('on-animation-end', Number(this.getCount()))
})
}, this.duration * 1000 + 20)
}
},
watch: {
endVal (newVal, oldVal) {
this.counter.update(newVal)
this.emitEndEvent()
}
},
mounted () {
this.$nextTick(() => {
this.counter = new CountUp(this.eleId, this.startVal, this.endVal, this.decimals, this.duration, {
useEasing: this.useEasing,
useGrouping: this.useGrouping,
separator: this.separator,
decimal: this.decimal
})
setTimeout(() => {
this.counter.start()
this.emitEndEvent()
}, this.delay)
})
}
}
</script>
<style lang="less">
@import './count-to.less';
</style>

Vue-admin工作整理(十九):从数字渐变组件谈第三方JS库Count-to的使用的更多相关文章

  1. 第三百二十九节,web爬虫讲解2—urllib库爬虫—ip代理—用户代理和ip代理结合应用

    第三百二十九节,web爬虫讲解2—urllib库爬虫—ip代理 使用IP代理 ProxyHandler()格式化IP,第一个参数,请求目标可能是http或者https,对应设置build_opener ...

  2. 在Vue将第三方JS库封装为组件使用

    第三方JS库地址:https://github.com/inorganik/CountUp.js 使用NPM进行安装: npm install --save countup 根据官方回答,CountU ...

  3. Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解

    对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...

  4. Vue-admin工作整理(九): 状态管理Vuex-state和getters

    前提:通过项目结构个人设置创建的项目 store文件下actions.js.mutations.js.state.js都是根级别的状态管理,引用入口是通过index.js来实现,整个Vuex处理逻辑为 ...

  5. Vue-admin工作整理(四):路由组件传参

    路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...

  6. Vue-admin工作整理(八): BUS | | 组件通信

    一.父子组件之间通信 思路:定义一个个人组件,个人组件通常需要在前缀统一命名一下,如:AInput,该组件的作用是将编辑框中的内容获取并通过事件提交出去,然后在目标组件(store)中通过双向交互模式 ...

  7. salesforce零基础学习(七十九)简单排序浅谈 篇一

    我们在程序中经常需要对数据列表进行排序,有时候使用SOQL的order by 不一定能完全符合需求,需要对数据进行排序,排序可以有多种方式,不同的方式针对不同的场景.篇一只是简单的描述一下选择排序,插 ...

  8. Vue 中如何引入第三方 JS 库

    一绝对路径直接引入全局可用 二绝对路径直接引入配置后import 引入后再使用 三webpack中配置 aliasimport 引入后再使用 四webpack 中配置 plugins无需 import ...

  9. 转《vue引入第三方js库》

    一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins, ...

随机推荐

  1. 《图解HTTP》读书笔记(三:无状态协议/cookie管理状态)

    HTTP是一种不保存状态,即无状态(stateless)协议.HTTP协议自身不对请求和响应之间的通信状态进行保存. ——HTTP/1.1虽然是无状态协议,但为了实现期望的保持状态功能,于是引入了Co ...

  2. 2019-04-15 Python之利用matplotlib和numpy的简单绘图

    环境:win10家庭版, Anocada的 Spyder 一.简单使用 使用函数 plt.polt(x,y,label,color,width) 根据x,y 数组 绘制直,曲线 import nump ...

  3. leetcode148. Sort List

    和数组里面的归并排序相同,用两个指针分别对应low high,递归进行归并排序然后merge把两个链表合在一起 /** * Definition for singly-linked list. * s ...

  4. 远程Gitlab新建的分支在IDEA里不显示

    cmd命令打开dos命令窗口,进入项目文件所在目录 (**TIPS:在资源管理器的地址栏里直接输入cmd,就会打开命令窗口,并且此时命令窗口显示的路径就是当前路径)git branch -a:可以查看 ...

  5. Vue2leaflet 替换国内地图api,带{z}/{x}/{y}形式的

    参考:https://www.cnblogs.com/gispathfinder/p/9535685.html Vue2leaflet安装后,默认自带的地图URL如下 url:'http://{s}. ...

  6. TCP 服务端接收数据解析工具类

    package com.ivchat.common.util; import java.io.BufferedReader;import java.io.IOException;import java ...

  7. CarbonData-1:common

    最近公司需要对CarbonData进一步应用,或许封装进产品,或许是为了解析CarbonData元数据,于是开始预研CarbonData,下面将保持每天一篇以上的阅读CarbonData源码博客,由于 ...

  8. POJ 3162 bit区间查询最值+树形DP

    POJ 3162 『题目链接』POJ 3162 『题目类型』bit区间查询最值+树形DP ✡Problem: 一棵n个节点的树.wc爱跑步,跑n天,第i天从第i个节点开始跑步,每次跑到距第i个节点最远 ...

  9. JS对象、构造器函数和原型对象之间的关系

    一.基本概念 1.对象:属性和方法的集合,即变量和函数的封装.每个对象都有一个__proto__属性,指向这个对象的构造函数的原型对象. 2.构造器函数:用于创建对象的函数,通过new关键字生成对象. ...

  10. [macOS] Mojave10.14 夜神安卓模拟器启动问题

    废话不多说,其它的都有在这里讨论: https://bbs.yeshen.com/forum.php?mod=viewthread&tid=8566 我的最终解决办法是,virtualbox安 ...