我要造輪子系列-一個輪子的誕生過程

前言

程序員圈常常流行的一句話：「不要重複造輪子」。在計算機領域，咱們將封裝好的組件、庫，叫作輪子。由於它能夠拿來直接用，直接塞進咱們的項目中，就能實現對應的功能。

有些同窗會問，人家都已經作好了，你再來從新弄一遍，有什麼意義？這不是在浪費時間嗎。

卻不知，造輪子是一種學習方式，能快速進步，造得好，是本身超強能力的表現，同時能增長本身的知名度，有些人靠造輪子成了大V，有些人靠造輪子寫書，有些靠造輪子被大公司挖人。

平常工做咱們都是專一業務代碼開發,經常作增刪改查操做，技術也很快遇到瓶頸,因業務代碼也有大量的工做，一些需求組件，插件就會在網上找而後直接拿來用，例如輪播、選項卡、拾色器、時間選擇器等等，要開發這些組件一來要精力和時間，不少公司的項目時間是不容許的 ，二來本身開發的會有bug、用戶體驗不夠好等等，因此仍是須要時間打磨，和工做上要講求開發效率背道而馳。筆者嘗試着利用碎片時間來開發平常工做用組件、從對組件的需求分析、代碼部署、編寫組件、併發布到npm和github上，分享我造輪子的過程。今後再也不作面向百度的編程。^_^

本系列第一個輪子是咱們經常使用Tab選項卡。這個東西已是老生常談的組件，筆者想由最簡單開始。爲了簡化開發，繼續用vue編寫

需求分析

1. 選項卡點擊切換滑動顯示
2. 事件模式(是點擊模式,仍是通過模式)
3. 選項卡自定義顏色，寬高
4. 選項卡導航超出顯示範圍滾動

直接上代碼

這個組件難點在處理邊界上，獲取鼠標可視範圍的座標值就能夠判斷滾動。固然組件後續還能夠增長功能 好比增長縱向滾動，或者各類動畫顯示 增長自動滑動等等

tab組件

<template>
    <div class="tab" :style="{width : tabWidth +'px',height:tabHeight +'px',lineHeight:tabHeight+'px' }"> <div class="tab-nav"> <div class="tab-nav-con" :style="{transform : `translatex(-${navWidth}px)`,width :tabNavWidth }"> <a :class="[current===index?'current':'']" :style="{backgroundColor:current === index ? themeColor :'' }" v-for="(item,index) in content" :key="item.id" :ref="'a'+index" v-on:[getIsNavMode].stop.prevent="switchTab(index,$event)">{{item}}</a> </div> </div> <div class="tab-con"> <div class="j-tab-con" :style="{transform:`translatex(-${contentWidth}px)`,width:setTabContentWidth}"> <slot></slot> </div> </div> </div>


</template>

<script> export default { name: 'tab', props: { //自定義選項卡內容和導航標題 content: Array, //自定義選項卡寬度 tabWidth: { type: [String,Number], default: 500, }, //自定義選項卡高度 tabHeight: { type: [String,Number], default: 500, }, //自定義顏色 themeColor: { type: String, default: '#80b600' }, //自定義事件模式 click| mouseover navMode: { type: String, default: 'click' } }, data() { return { current: 0, //當前 mode: 'default', //顯示模式 navWidth: 0, //選項卡導航初始 x 軸值 contentWidth: 0,//選項卡內容初始 x 軸值 } }, computed: { //計算選項卡導航總寬度 tabNavWidth() { return (80 * this.content.length) + 'px' }, //計算選項卡內容總寬度 setTabContentWidth() { return this.tabWidth * this.content.length + 'px' }, //計算傳入的事件模式 getIsNavMode() { return this.navMode === 'click' ? 'click' : 'mouseover' } }, methods: { switchTab(index, ev) { const {layerX, target} = ev const tabWidth = Number(this.tabWidth) // 判斷鼠標點擊座標 而後設置滾動 if (layerX > tabWidth - target.offsetWidth*2 && layerX < tabWidth + target.offsetWidth) { this.navWidth += target.offsetWidth * 2 } else if (layerX > 0 && layerX < target.offsetWidth) { this.navWidth -= target.offsetWidth * 2 } if (this.navWidth < 0) this.navWidth = 0 this.current = index this.contentWidth = index * tabWidth } } } </script>

<style scoped> .tab { position: relative; overflow: hidden; border: 1px solid #ddd; } .tab-nav { height: 30px; overflow: hidden; background: #f5f5f5; border-bottom: 1px solid #ddd; } .tab-nav a { display: block; float: left; width: 80px; height: 30px; line-height: 30px; text-align: center; text-decoration: none; color: #999; cursor: pointer; } .tab-nav a.current { color: #fff; } .tab-con { transition-duration: 500ms; transition-timing-function: ease-out; position: relative; overflow: hidden; } .tab-con-item { float: left; } .j-tab-con { overflow: hidden; transition-duration: 500ms; transition-timing-function: ease-out; cursor: grab; } .tab-nav-con { overflow: hidden; transition-duration: 500ms; transition-timing-function: ease-out; } </style>


複製代碼

tabItem組件

調用選項卡組件

import {Tab,TabItem} from 'nigo-vue-tab'
        <Tab :content="[1,2,3,4,5]" 
       tab-width="800"
       tab-height="500"
       theme-color="#333"
<TabItem>1</TabItem>
<TabItem>2</TabItem>
<TabItem>3</TabItem>
<TabItem>4</TabItem>
       ></Tab>

複製代碼

發佈到npm流程

輪子造好了就發佈到npm

一、輪子的目錄結構

二、打開 package.json文件填寫輪子的版本信息及各類依賴包

{
  "name": "nigo-vue-tab",
  "version": "1.0.0",
  "description": "選項卡輪子",
  "author": "nigo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "style-loader": "^0.23.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.12.0",
    "webpack-dev-server": ">=3.4.1"
  },
  "license": "ISC"
}

複製代碼

三、發佈到npm,前提，得有個npm帳號，沒有就新註冊一個帳號 www.npmjs.com/signup

四、進入到項目的根目錄下，運行 npm login 執行登陸 通常狀況下回提示你輸入 你的用戶名，密碼和郵箱，若登陸成功通常會顯示：

$ npm login
複製代碼

五、登陸成功後，運行npm publish

$ npm publish
複製代碼

六、發佈成功後,瀏覽npm網站見到本身輪子啦

添加到github

添加到GitHub網上也有不少教程，我在本身的ide上添加github帳號，設置公鑰，等操做，就能夠上傳代碼到github上

最後

從需求分析、代碼部署、編寫組件、發佈npm、再到發佈github幾個環節，一個完整的輪子就完成啦。之後就有本身的輪子庫啦 O(∩_∩)O哈哈~

有興趣同窗能夠下載個人代碼

npm

npm i nigo-vue-tab
複製代碼

github

git clone https://github.com/shinewen189/nigo-vue-tab.git
複製代碼