>[success] # 組件篇章 ~~~ 1.整個vue 項目是利用組件拼接而成，因此對組件封裝規劃和思路是章節探討 的內容 ~~~ >[danger] ##### 封裝目錄格式 ~~~ 1.組件集成在，components文件目錄下，每個組件最好以文件的形式進行封 裝，并且配置響應的出口 │ ├── 'components' // 存放組件文件夾 │ │ └── 'count-to' // 一個存放count-to組件文件夾 │ │ └── 'count-to.vue' // 組件具體內容編寫位置 │ │ └── 'index.js' // 組件的入口 ~~~ >[info] ## 將js 插件countup 進行封裝 ~~~ 1.封裝一個組件，首先根據文檔，對所需要的參數值進行規劃，在父組件調 用子組件的時候可以留出對應的參數配置 2.這個案例使用的是1系列的countup.js ，列出一下一系列使用參數： 2.1 創建一個countup對象var count= new CountUp("eleID", 開始值, 結束值); 2.2.具體參數整理： target = html元素的id，input，svg text元素，或者計數發生時先前選擇的元素/輸入的var startVal = 你要開始的值 endVal = 你想要達到的價值 decimals = （可選）數字中的小數位數，默認為0 duration = （可選）持續時間（以秒為單位），默認為2 options = （可選，請參閱demo）格式化/easing選項對象 2.3.options配置對象的具體參數在基礎篇有講解 2.4.start() 方法是啟動countup插件的方法 ~~~ >[danger] ##### 基礎篇，在文件目錄count-to.vue 中代碼如下 ~~~ 1.根據文檔我們可以分析在做封裝時候要做的如下幾點 1.1 需要創建countup對象 1.2.創建對象的時候需要綁定dom 的id 1.3.需要將js 插件要使用的參數暴露出來 2.解決上面對應的三件事 2.1.需要創建countup對象的前提是創建了dom元素，因此根據vue聲明周 期dom被渲染掛載的周期在mounted周期，但為了確保。我會在 、 mounted周期中加入$nextTick-- 它是用來獲取更新后的dom 2.2.id是唯一的，如何保證我們創建的組件id的唯一，vue在每個組件都有 一個'this._uid'唯一值 2.3.配置參數由于是需要在父傳子，父傳子的接受方式是'props因此需要 定義好 3.下面案例中，props最好配置好對應的類型，如果必填配置好必填項， 配置好默認值 4.分析生成不同的id可以利用'this._uid'，因此可以在計算屬性中進行監聽， 而不是配置到data中 5.可以增加一個定時器，配置一個'delay' 屬性來控制組件運行啟動時間 ~~~ ~~~ <template> <span :id="eleId"></span> </template> <script> import Countup from 'countup' export default { name: "countTo", data(){ return{ counter:{} } }, computed:{ eleId(){ return `count_up_${this._uid}` } }, props:{ /* * @description 插件啟動時長 單位毫秒 * */ delay:{ type:Number, default:0 }, /* * @description 起始值 * */ startVal:{ type:Number, default:0, }, /* * @description 終止值 * * */ endVal:{ type:Number, required:true, }, /* * @description 小數保留幾位 * * */ decimals:{ type:Number, default:0 }, /* * @description 延遲動畫時長 * * */ duration:{ type:Number, default:1, }, /* * @description 設置動畫效果 * */ useEasing:{ type:Boolean, default:true, }, /* * @description 設置是否分組也就是4000 顯示4,000 * */ useGrouping:{ type:Boolean, default:true, }, /* * @description 設置分組時候斷開的符號默認',' * */ separator:{ type:String, default:',', }, /* * @description 設置小數的符號默認符號'.' * */ decimal:{ type:String, default:'.', }, }, 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(()=>{ // start() 是插件 啟動的方法，這個啟動方法是根據插件文檔說明走的 this.counter.start() },this.delay); }); } } </script> <style scoped> </style> ~~~ >[danger] ##### 在對應組件文件夾的index.js入口文件寫法案例 ~~~ import CountTo from './count-to.vue' export default CountTo ~~~ >[danger] ##### 在創建的名叫count-to.vue 視圖組件文件使用組件 ~~~ <template> <div> <count-to :endVal="100" :duration="300"></count-to> </div> </template> <script> import CountTo from '@/components/count-to' export default { name: "count_to", components:{ CountTo, }, } </script> <style scoped> </style> ~~~