With the development of technology, the complexity of development is getting higher and higher. The traditional development method makes a system into a whole application. It often happens that a small change or the addition of a small function may cause the overall logic to change. The modification affects the whole body. Through component development, individual development and maintenance can be effectively achieved, and they can be combined at will. Greatly improve low development efficiency and reduce maintenance costs.
Componentization is the only way for any front-end application with complex business scenarios and products after multiple iterations. Componentization requires more than just the module splitting and decoupling seen on the surface. There is also a lot of work behind it to support componentization, such as module splitting strategies based on business characteristics, interaction methods between modules, and building systems. etc.
The components introduced in this article are:
Quickly implement the front-end vue uni-app to imitate Toutiao and NetEase news tabs components, adapt the tab item width according to the amount of text , and come with the complete demo source code download address: https://ext.dcloud.net.cn/plugin?id=12560
For more information on front-end components, please follow the WeChat public account: Front-end component development
The rendering is as follows:
code show as below:
# cc-tabs describes the tabs component, which adapts the width of tab items according to the amount of text and supports custom title bars.
#### HTML code part
```html
<template>
<view class="content">
<!-- cc-tabs component, adaptive tab item width based on text, supports custom title bar -->
<view style="margin-top:14px; margin-left: 8px; margin-right: 10px;">
<!-- spaceLeft sets the tab spacing -->
<cc-tabs spaceLeft="14" v-model="industryTabIndex" :tabs="industryTabs" @change="tabChange"></cc-tabs>
</view>
</view>
</template>
```
#### JS code (introducing components to fill in data)
```javascript
<script>
import ccTabs from '@/components/cc-tabs.vue';
export default {
components: {
ccTabs
},
data() {
return {
title: 'Hello',
industryTabs: [{
name: 'Photovoltaic Industry'
},
{
name: 'New energy vehicle battery'
},
{
name: 'Banking and Finance'
},
{
name: 'Advanced Manufacturing'
},
{
name: 'Medical Health'
},
{
name: 'Food, Drinks and Liquor'
},
{
name: 'Industry Seven'
},
{
name: 'Industry Eight'
}
],
industryTabIndex: 0,
}
},
onLoad() {
},
methods: {
tabChange() {
console.log('Switch industry type=' + this.industryTabIndex);
},
}
}
</script>
```
#### CSS
```CSS
<style>
page{
background-color: #f6f6f6;
}
.content {
display: flex;
flex-direction: column;
}
</style>
```