国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

手摸手，帶你封裝一個vue component

pkhope / 1917人閱讀

摘要：靈活性和針對性。所以我覺得大部分組件還是自己封裝來的更為方便和靈活一些。動手開干接下來我們一起手摸手教改造包裝一個插件，只要幾分鐘就可以封裝一個專屬于你的。

項目地址：vue-countTo
配套完整后臺demo地址：vue-element-admin
系類文章一：手摸手，帶你用vue擼后臺 系列一（基礎篇）
系類文章二：手摸手，帶你用vue擼后臺 系列二（登錄權限篇）
系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰篇）
系類文章四：手摸手，帶你用vue擼后臺 系列四(vueAdmin 一個極簡的后臺基礎模板)
系類文章：手摸手，帶你優雅的使用 icon

為什么選擇自己封裝第三方庫

最近幾個月我司把之前兩三年的所有業務都用了 vue 重構了一遍，前臺使用 vue+ssr，后臺使用了 vue+element，在此過程中封裝和自己寫了很多 vue component。其實vue 寫 component 相當簡單和方便，github上有很多的 vue component 都只是簡單的包裝了一些 jquery 或者原生 js 的插件，但我個人是不太喜歡使用這些第三方封裝的。理由如下：

很多第三方封裝的組件參數配置項其實是有缺損的。如一些富文本或者圖表組件，配置項遠比你想想中的多得多，第三方封裝組件很難覆蓋全部所有配置。

第三方組件的更新頻率很難保證。很多第三方封裝組件并不能一直和原始組件保持同步更新速度，萬一原始組件更新了某個你需要的功能，但第三方并沒有更新那豈不是很尷尬，而且很多第三方組件維護一段時間之后就不維護了。

靈活性和針對性。還是那富文本來說，富文本在我司有很多定制化需求，我們需要將圖片上傳七牛，需要將圖片打水印，需要很多針對業務的特殊需求，使用第三方包裝的組件是不合適的，一般基于第三方封裝的組件是很難拓展的。

所以我覺得大部分組件還是自己封裝來的更為方便和靈活一些。

動手開干

接下來我們一起手摸手教改造包裝一個js插件，只要幾分鐘就可以封裝一個專屬于你的 vue component。封裝對象：countUp.js，改造后結果 vue-countTo。

首先我們用官方提供的 vue-cli 來構建項目 這里選擇了 webpack-simple (組件相對而言比較簡單，不需要很多復雜的功能，所以 webpack-simple 已經滿足需求了)

$ npm install -g vue-cli
$ vue init webpack-simple my-project
$ cd my-project
$ npm install

安裝countup.js

$ npm install countup.js
$ npm run dev

啟動項目之后按照 countup.js 官方 demo 初始化插件

app.vue

刷新頁面，就這么簡單，countUp.js 已經生效了。

接下來查看 countUp.js 的 github 發現它定義了如下可配置參數

對應 vue 就是 props，類型和初始化一目了然。

props: {
  start: {
    type: Number,
    default: 0
  },
  end: {
    type: Number,
    default: 2017
  },
  decimal: {
    type: Number,
    default: 0
  },
  duration: {
    type: Number,
    default: 2.5
  },
  options: {
    type: Object
  }
}

之后再將countup之前寫死的配置項替換為動態props就可以了

this.numAnim = new CountUp(this.$refs.countup, 
                           this.start,
                           this.end,
                           this.decimal,
                           this.duration,
                           this.options)

使用組件

只要幾分鐘一個屬于自己的原生組件就包裝好了，就是這么簡單。完整demo
這時候你如果覺得使用countUp.js 還有些不滿足你的需求，那你可以選擇自己來造輪子了。

造輪子篇

首先當然是閱讀源碼了
其實源碼也就兩部分核心代碼
第一部分：主要是就是 requestAnimationFrame，在游覽器不支持requestAnimationFrame 的情況下使用 setTimeout 來模擬，這段代碼值得仔細閱讀，自己在平時的項目中也能借鑒使用這段代碼。
第二部分：就是 count 函數
看懂這兩部分之后造輪子就相當的簡單了, demo

造輪子過程中發現 countUp,并沒有 autoplay 這個參數項可以讓組件自動開始count，沒關系。。。我們可以自己來擼，我們首先定義 autoplay 這個props為布爾值，默認所有組件 autoplay 為 true

 props:{
   autoplay: {
     type: Boolean,
     required: false,
     default: true
   }
 }

定義好 props 之后只要在 mounted 生命周期內加一個判斷就完事了。

mounted() {
  if (this.autoplay) {
    this.start();
  }
}

我們的 countUp 組件可以自動 count 了！

上傳 npm

在不跨項目的情況下之前所做的已經滿足需求了。但我們不能就此滿足，我想讓世界上更多的人來使用我的插件，這時候就要上傳 npm了 demo 。

首先我們新建一個index.js

import CountTo from "./vue-countTo.vue"

// 導出模塊
export default CountTo

//global 情況下 自動安裝
if (typeof window !== "undefined" && window.Vue) {
  window.Vue.component("count-to", CountTo)
}

同時我們也要改造一下 webpack 的配置，因為不是所有使用你組件的人都是通過 npm 安裝使用 import 引入組件的的。

還有很多人是通過

總結

這里這是拿了一個很簡單的 countUp 組件舉了一個簡單例子，有的時候自己動手豐衣足食，很多插件的封裝比想象中簡單的多。產品經理再也不會看到我因為這個fu**插件怎么不支持這個功能而愁眉苦臉了，我們可以更好地滿足產品了~~
完整項目地址：https://github.com/PanJiaChen... 歡迎 star

占坑

常規占坑，這里是手摸手，帶你用vue擼后臺系類
完整項目地址：vue-element-admin
系類文章一：手摸手，帶你用vue擼后臺 系列一（基礎篇）
系類文章二：手摸手，帶你用vue擼后臺 系列二（登錄權限篇）
系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰篇）
系類文章四：手摸手，帶你用vue擼后臺 系列四(vueAdmin 一個極簡的后臺基礎模板)
系類文章：手摸手，帶你優雅的使用 icon
樓主個人免費圈子。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82502.html

相關文章

  • 手摸手，帶你用vue擼后臺 系列一(基礎篇)

    摘要：詳細具體的使用可以見文章手摸手，帶你優雅的使用。為了加速線上鏡像構建的速度，我們利用源進行加速并且將一些常見的依賴打入了基礎鏡像，避免每次都需要重新下載。 完整項目地址：vue-element-admin系類文章二：手摸手，帶你用vue擼后臺 系列二（登錄權限篇）系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺 系列四(vueAdmin 一...

    xiaotianyi 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列二(登錄權限篇)

    摘要：我們將登錄按鈕上綁上事件，點擊登錄之后向服務端提交賬號和密碼進行驗證。所以前端和后端權限的劃分是不太一致。側邊欄最后一個涉及到權限的地方就是側邊欄，不過在前 完整項目地址：vue-element-admin 系列文章： 手摸手，帶你用vue擼后臺 系列一（基礎篇） 手摸手，帶你用vue擼后臺 系列二(登錄權限篇) 手摸手，帶你用vue擼后臺 系列三 (實戰篇) 手摸手，帶你用vu...

    不知名網友 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列三(實戰篇)

    摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    Channe 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列三(實戰篇)

    摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    zgbgx 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列五(v4.0新版本)

    摘要：同時增加了單元測試，使用了，增加了可視化配置權限，增加了自定義布局等等，優化了原先的權限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的，但正好滿足了我們的需求。它會重寫瀏覽器的對象，從而才能攔截所有請求，代理到本地。 前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來，維護至今已經有兩年多的時間了了，發布了四十多個版本，...

    MonoLog 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<