preface
There’s a common refrain in programmer circles: “Don’t reinvent the wheel.” In computing, we call packaged components, libraries, wheels. Because it can be used directly, it can be inserted directly into our projects, and it can achieve the corresponding functions.
Some students will ask, what’s the point of coming back and doing it all over again when they’ve already done it? I thought this was a waste of time.
As everyone knows, making wheels is a way of learning, can make rapid progress, make good, is the performance of their super ability, at the same time can increase their popularity, some people rely on making wheels to become a big V, some people rely on making wheels to write books, some rely on making wheels by big companies to dig people.
We are focus on daily work business code development, often do add and delete operation, technology is also soon encounter bottleneck, because business code also has a lot of work, some demand components, plug-in will find on the Internet and then use them directly, for example, shuffling, TAB, color, time selector, etc., to develop these components to energy and time, The project time of many companies is not allowed, secondly, there will be bugs in their own development, user experience is not good enough and so on, so it still needs time to polish, and work to strive for development efficiency. I try to use fragment time to develop components for daily work, from requirement analysis of components, code deployment, writing components, and Posting them to NPM and Github to share my process of building wheels. From now on do not face Baidu programming. ^_^
The first wheel in this series is our common Tab Tab. This thing is already a cliche component, and I want to start with the simplest. To simplify development, continue writing in VUE
Demand analysis
- TAB click toggle slide display
- Event mode (click mode or pass mode)
- TAB custom color, width and height
- TAB navigation scrolls out of display
Go straight to code
The difficulty of this component lies in the processing boundary. The coordinate value of the visual range of the mouse can be used to judge rolling. Of course, components can be added later functions such as vertical scrolling, or various animated displays add automatic sliding and so on
TAB components
<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: {
// Customize TAB contents and navigation titles
content: Array.// Customize the TAB width
tabWidth: {
type: [String.Number].default: 500,},// Customize the TAB height
tabHeight: {
type: [String.Number].default: 500,},// Custom colors
themeColor: {
type: String.default: '#80b600'
},
/ / custom event model click | mouseover
navMode: {
type: String.default: 'click'}},data() {
return {
current: 0./ / the current
mode: 'default'.// Display mode
navWidth: 0.// The TAB navigates the initial x value
contentWidth: 0.// TAB contents initial x value}},computed: {
// Calculate the total width of the TAB navigation
tabNavWidth() {
return (80 * this.content.length) + 'px'
},
// Calculate the total width of TAB contents
setTabContentWidth() {
return this.tabWidth * this.content.length + 'px'
},
// Calculate the incoming event pattern
getIsNavMode() {
return this.navMode === 'click' ? 'click' : 'mouseover'}},methods: {
switchTab(index, ev) {
const {layerX, target} = ev
const tabWidth = Number(this.tabWidth)
// Determine the mouse click coordinates and set the scroll
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>
Copy the codeTabItem components
Invoke the TAB component
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>
Copy the codePublish to the NPM process
Once the wheels are built, post to NPM
1. The directory structure of wheels
2. Open package.json file and fill in the version information of the wheel and various dependent packages
{
"name": "nigo-vue-tab"."version": "1.0.0"."description": "TAB wheel"."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 track"
},
"license": "ISC"
}
Copy the code3, release to NPM, the premise, must have a NPM account, did not register a new account www.npmjs.com/signup
4. Enter the root directory of the project and run NPM login to execute the login. In general, you will be prompted to enter your username, password and email address.
$ npm login
Copy the code5. After login, run NPM publish
$ npm publish
Copy the code6, after the successful release, browse NPM website to see their wheels
Add to making
Add to GitHub there are also a lot of tutorials on GitHub, I add GitHub account on my IDE, set up a public key, etc, can upload code to GitHub
The last
From requirements analysis, code deployment, component writing, NPM release, and Github release, a complete wheel has been completed. In the future, I will have my own wheel library
Interested students can download my code
npm
npm i nigo-vue-tab
Copy the codegithub
git clone https://github.com/shinewen189/nigo-vue-tab.git
Copy the code