我要造轮子系列-一个轮子的诞生过程

前言

程序员圈常常流行的一句话：“不要重复造轮子”。在计算机领域，咱们将封装好的组件、库，叫作轮子。由于它能够拿来直接用，直接塞进咱们的项目中，就能实现对应的功能。

有些同窗会问，人家都已经作好了，你再来从新弄一遍，有什么意义？这不是在浪费时间吗。

却不知，造轮子是一种学习方式，能快速进步，造得好，是本身超强能力的表现，同时能增长本身的知名度，有些人靠造轮子成了大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
复制代码