從數字漸變組件談第三方JS庫使用 · vue筆記

[TOC] >[success] # 從數字漸變組件談第三方JS庫使用我們接下來要封裝一個 **CountTo組件** ，這里使用到了一個第三方庫 [**CountUp.js**](http://inorganik.github.io/countUp.js/) ，它的作用主要用來做 **數字動畫** ，設置一個 **最終值**，我們的 **數字** 會有一個 **漸變的效果的動畫** ，我們將會 **把這個JS庫封裝成一個Vue組件** ，通過這次 **封裝** 來學習一下 **Vue組件封裝的一些要點** 。 >[success] ## 組件封裝 1. **父組件** 首先在 **路由列表** 的 **路由對象** 中添加新創建的 **count-to** 頁面配置路由，**這個頁面名字跟上面的組件名重名，但是無關系，這個文件只是用來展示的頁面，不是組件，注意一下就好** **src/router/router.js** ~~~ export default [ { path: '/count-to', name: '/count_to', component: () => import('@/views/count-to') } ] ~~~ 然后在 **src/views/count-to.vue** 頁面 **引入count-to組件** **src/views/count-to.vue** ~~~ <template> <div>  <count-to ref="countTo" :end-value="endValue" @on-animation-end="handleEnd"> <span slot="left">總金額：</span> <span slot="right">元</span> </count-to> <button @click="getNumber">獲取數值</button> <button @click="up">更新值</button> </div> </template> <script> import CountTo from '@/components/count-to' export default { name: 'count_to', components: { CountTo }, data(){ return{ endValue: 100 } }, methods: { // 獲取子組件值方法 getNumber(){ this.$refs.countTo.getCount() }, // 更新值方法 up(){ this.endValue += Math.random() * 100 // Math.random()會生成一個0-1的隨機數，乘以100就是0-100的隨機數 }, // 子傳父的監聽事件 handleEnd(endValue){ console.log(endValue) } } } </script> ~~~ 引入時 **如果組件是駝峰式的命名** ，在 **template標簽** 中使用時 **建議使用小寫單詞字母中劃線區分** ，例如： **CountTo 在使用時寫成這樣 \<count-to />** 。上面也可以使用 **雙標簽：\<count-to>\</count-to>** 一般沒有使用到組件中定義的 **插槽** ，還是建議使用 **單標簽** 。 2. **子組件** 首先我們在 **src/components** 文件夾中創建 **count-to** 文件夾，跟 **count-to組件有關的文件都放在這個文件夾中** 。接下來創建一個 **count-to.vue** 文件，該文件 **作為組件文件** **src/components/count-to/count-to.vue** ~~~ <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: { // 用_uid來達到id唯一 eleId(){ return `count_up_${ this._uid }` }, // 支持傳入class樣式 countClass(){ return [ 'count-to-number', this.className ] } }, data(){ return{ counter: {} // CountUp實例化對象 } }, props: { /** * @description 起始值 */ startValue: { type: Number, default: 0 }, /** * @description 最終值 */ endValue: { 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: '.' }, /** * @description 動態添加類名 */ className: { type: String, default: '' } }, methods: { getCount(){ // id或者refs來獲取dom元素的值 return this.$refs.number.innerText }, emitEndEvent(){ setTimeout(() => { this.$nextTick(() => { this.$emit('on-animation-end', Number(this.getCount())) }) }, this.duration * 1000 + 5) } }, watch:{ // endValue發生變化重新觸發組件更新方法 endValue(newVal, oldVal){ this.counter.update(newVal) this.emitEndEvent() } }, mounted(){ this.$nextTick(() => { // 實例化CountUp對象 this.counter = new CountUp(this.eleId, this.startValue, this.endValue, 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="scss" scoped> @import './count-to.scss' </style> ~~~ 再創建一個 **index.js** ，在 **index.js** 中引入 **count-to.vue組件** 并 **導出（export default）** ，這么做就可以在引入組件的地方直接這么引入：**import CountTo from '@/components/count-to'** ，這樣就是相當于引用了 **src/components/count-to** 文件夾中的 **index.js** 文件。 **src/components/count-to/index.js** ~~~ import CountTo from './count-to.vue' export default CountTo ~~~ 然后可以 **單獨創建一個只供該組件使用的.scss或者.less** 樣式文件 **count-to.scss** ~~~ .count-to-number{ color: palevioletred; } ~~~ **.scss或者.less** 有 **2種引入方式**： 1. 直接在 **script標簽** 最上面寫： **import'./count-to.scss'** 2. 在 **style標簽** 最上面寫： **@import './count-to.scss'** 3. 或者直接 **在style標簽中直接寫樣式** >[success] ## 組件中使用id值上面 **組件中使用到了id值** ，我們都知道 **id是唯一的** ，**如果這個組件在多個頁面、多次使用** ，此時 **組件中創建的實例** 就會有問題，所以說我們 **每個組件都應該有自己的id，不跟其他組件發生沖突**，我們可以使用 **Vue** 提供的 **this._uid** 用來拼接，每個組件中 **_uid** 都不相同，這樣就可以保證是 **全局唯一的** 。 >[success] ## 組件中獲取DOM 在 **Vue** 中獲取 **DOM** 有 **2種方法** ，一種是使用 **id** 來獲取 **DOM** ,另外一種是使用 **ref** 的形式來獲取 **DOM** 。 **場景** ：有時候我們的 **組件** ，有一些 **內部方法** ，可以 **供外部使用** ，這時候就需要 **父組件通過ref調用子組件方法** ，在上面 **封裝組件** 的代碼中，**父組件** 中通過 **點擊button** 執行 **getNumber** 方法中的 **this.$refs.countTo.getCount()** 來通過 **ref** 的方式 **調用子組件方法** ， **子組件** 中使用 **ref** 來**取值并且返回值** ，具體實現看上面 **封裝組件的代碼** 。 >[success] ## 封裝組件技巧 1. **創建組件** 時可以在 **components文件夾** 中 **創建一個文件夾儲存組件相關文件** 2. **創建組件時** 可以創建一個對應 **index.js** 來達到 **引入時直接簡寫的方式引入組件** 3. **引入第三方庫，npm安裝成功** 后，可以在 **package.json** 中的 **dependencies對象** 中看到安裝的 **第三方庫名稱** ， **如果看到自己安裝的第三方庫名稱即代表安裝成功** 4. **組件中使用id值解決辦法，看上面文章** 5. 把 **組件內動態的值都抽離出去，用props傳入進來** ，規定 **是否必傳，以及默認值** 6. **Vue組件插槽** 6.1. **匿名插槽用法** **子組件** ~~~ <template> <div> <slot></slot> <span :class="countClass" :id="eleId"></span> </div> </template> ~~~ **父組件** ~~~ <template> <div> <count-to :end-value="10"> <span>總金額：</span> </count-to> </div> </template> ~~~ 這樣寫 **總金額：** 三個字就會在組件的 **slot標簽** 位置出現 6.2. **具名插槽** . **子組件** ~~~ <template> <div> <slot name="left"></slot> <span :class="countClass" :id="eleId"></span> <slot name="right"></slot> </div> </template> ~~~ **父組件** ~~~ <template> <div>  <count-to :end-value="10"> <span slot="left">總金額：</span> <span slot="right">元</span> </count-to> </div> </template> ~~~ **具名插槽**父子組件都定義好指定的 **name** ，這樣 **插入的內容就會放入到指定 name 的位置** 7. **組件中獲取DOM解決辦法，看上面文章** 8. **props** 中的 **default** 的值如果是 **Boolean、Number、String** 這 **3種類型** 就直接 **值是什么可以寫成什么** ， **如果默認值是Object或者Array或者Function** 就需要寫成 **函數并且返回return值**