开发基于vue的顶部选项卡tabs组件

1、视图如下：

        

2、 组件的引用如下:

<template>
	<view class="content">
		<hi-tabs v-model="tabIndex" :tabs="tabs" @input="doInput"></hi-tabs>
		<view v-if="tabIndex==0"> 此处显示全部数据 </view>
		<view v-else-if="tabIndex==1"> 此处显示待付款数据 </view>
		<view v-else-if="tabIndex==2"> 此处显示已付款数据 </view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabs: [{value: '',name: '全部',num: 0}, {value: '0',name: '待付款',num: 0}, {value: '0',name: '已付款',num: 0}],
				tabIndex: 0,
			}
		},
		methods: {
			// 1 切换tab
			doInput(index) {
				// 清空之前的查询条件，重置为初始值
				console.log("index=====", index)
			},

		}
	}
</script>
<style lang="scss" scoped>
</style>

3、组件的实现如下：

<!-- 
tab组件: 
<app-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></app-tabs>
tabs支持的数据格式： ['全部', '待付款'] 或 [{name:'全部',num:1}, {name:'待付款',num:2}]
-->
<template>
	<view v-if="tabs && tabs.length" id="hiTopTabs" class="app-tabs" :class="{'tabs-fixed': fixed}" :style="{width:tabWidth}">
		<view class="tabs-item">
			<view class="tab-item" v-for="(tab, i) in tabs" :class="{'active': value===i,'smalltext': tab.smalltext}" :key="i"
			 @click="tabClick(i)">
				<template v-if="typeof tab === 'object'">
					<template v-if="tab.num||tab.num==0"> {{tab.name}} <text>({{tab.num}}) </text> </template>
					<template v-else> {{tab.name}} </template>
				</template>
				<template v-else> {{tab}} </template>
			</view>
		</view>
		<view class="tabs-line" :style="{left:lineLeft,width:lineWidth}">
			<view class="tabs-lineinner" :class="{'littleline': littleline}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'hi-tabs',
		props: {
			tabs: Array,
			value: { // 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
				type: [String, Number],
				default () {
					return 0
				}
			},
			littleline: Boolean,
			fixed: Boolean, // 是否悬浮,默认false
			tabWidth: {
				type: String,
				default: '750rpx'
			}
		},
		computed: {
			lineLeft() {
				return 100 / this.tabs.length * this.value + '%'
			},
			lineWidth() {
				return 100 / this.tabs.length + '%'
			}
		},
		mounted() {
		},
		methods: {
			tabClick(i) {
				if (this.value != i) {
					this.$emit("input", i);//同步数据
					this.$emit("change", i);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	...
</style>