不知道有没有和我一样项目中用的到Ant Design of Vue的Tabs组件在测试环境上打包时是无效的,于是手写个组件
我会写在src的componets下
我所用到的传值都是用类型1或2
来判断或者中英文
父组件
<template>
<div>
<!-- 操作tab区域 -->
<div class="tab-box">
<div
class="tab-item"
v-for="(item, index) in tabName"
:key="index"
:class="{tabActive:tabCode == index}"
@click="getTab(index)"
>{{item}}</div>
</div>
</div>
</template>
<script>
export default {
props: ['tabName', 'type'],
data() {
return {
tabCode: 0,
// tabName: ['tab1', 'tab2'],
send: 1
}
},
mounted() {},
methods: {
getTab(index) {
this.tabCode = index
if (index == 0) {
// this.type = 1
if (typeof this.type == 'string') {
this.send = 'CN'
} else {
this.send = 1
}
this.$emit('typeFn', this.send)
} else {
if (typeof this.type == 'string') {
this.send = 'EN'
} else {
this.send = 2
}
this.$emit('typeFn', this.send)
}
// console.log('this.type: ', this.send)
// this.$emit('typeFn', this.type)
}
}
}
</script>
<style lang="scss" scoped>
.tab-box {
display: flex;
margin-bottom: 18px;
.tab-item {
width: 100px;
height: 35px;
text-align: center;
line-height: 35px;
cursor: pointer;
border: 1px solid #1890ff;
}
.tabActive {
background-color: #1890ff;
color: #fff;
}
}
</style>
子组件
<template>
<TabBar :tabName="tabName" :type="subject" @typeFn="typeFn" />
</template>
<script>
import TabBar from '@/components/TabBar'
export default {
components: { TabBar },
data() {
subject: 'CN' //定义你需要的
}
}
methods: {
typeFn(value) {
this.subject = value; //写你的逻辑
}
}
</script>