vuepress markdown說明文檔

https://www.vuepress.cn/guide/markdown.html

# 示例：封裝countUp.js為Vue組件

https://github.com/inorganik/countUp.js

https://inorganik.github.io/countUp.js/

# 安裝

yarn add countup.js

# 創建vue文件

全局Vue組件存放位置

使用 <ClientOnly>包裹我們的組件內容

在mounted中導入第三方組件

官方文檔使用方式

https://github.com/inorganik/countUp.js

[外鏈圖片轉存中…(img-uqcWvbP8-1701933591792)]

編寫完整代碼

<template><div><ClientOnly><slot name="before" /><span ref="countUp"></span></ClientOnly></div>
</template>
<script>
export default {name: "CountUp",props: {startVal: {type: Number,default: 0},endVal: {type: Number,required: true},decimalPlaces: {type: Number,default: 0},duration: {type: Number,default: 2},delay: {type: Number,default: 0}},mounted() { this.init();},data() {return {counter: null}},methods: {init() {import("countup.js").then(module => {this.$nextTick(() => {//構造counter對象：目標元素，結束數字，其他配置項this.counter = new module.CountUp(this.$refs.countUp,this.endVal,{//起始數字startVal: this.startVal,//數字分割符decimalPlaces: this.decimalPlaces,//動畫時長duration: this.duration});//啟動setTimeout(() => {this.counter.start();}, this.delay);})})},//銷毀beforeDestroy() {this.counter.reset();this.counter = null;},}
}
</script>

# 引入使用

<CountUp :endVal = "2020"/>

# Markdown 導入代碼段

<<< @/filepath

https://www.vuepress.cn/guide/markdown.html#%E5%AF%BC%E5%85%A5%E4%BB%A3%E7%A0%81%E6%AE%B5