<template> <div class="tabs" :style="{ marginTop: marginTop + 'px', marginBottom: marginBottom + 'px',fontSize:fontSize + 'px' }"> <ul v-if="Array.isArray(tabList)" :class="borderType"> <template v-for="(item, i) in tabList"> <li :class="{ active: i === currTab }" :key="item.name" @click="selTab(i)" :style="{ minWidth: liWidth + 'px',height: liHeight + 'px',lineHeight: liHeight + 'px', marginRight: marginRight + 'px' }" v-if="!item.hasOwnProperty('isShow') || item.isShow"> <div>{{ item.name }}</div> </li> </template><li v-for="item in comRemaining" :key="item" class="unclickable" :style="{ minWidth: liWidth + 'px', lineHeight: liHeight + 'px', marginRight: marginRight + 'px', }"> <div>{{ item }}</div> </li> </ul> <ul v-else> <li :class="{ active: i === currTab }" v-for="(val, i) in Object.keys(tabList)" :key="i" @click="selTab(val)" :style="{ minWidth: liWidth + 'px', marginRight: marginRight + 'px' }"> <div>{{ val }}</div> </li> </ul> </div> </template> <script> export default { props: { // color: { // type: String, // }, borderType:{ type: String, default: 'noBorder', }, fontSize: { type: Number, default: 14, }, marginTop: { type: Number, default: 0, }, marginBottom: { type: Number, default: 10, }, liWidth: { type: Number, default: 0, }, liHeight: { type: Number, default: 28, }, marginRight: { type: Number, default: 0, }, currTab: { type: [Number, String], default: 0, }, tabList: { type: [Array, Object], default: () => { return [] }, }, allPrintTab: { type: [Array, Object], default: () => { return [] }, }, }, data() { return { textColor: 'red', } }, computed: { comRemaining() { const mapTabList = this.tabList.map(i => i.name) return this.allPrintTab.filter(element => !mapTabList.includes(element)) }, }, methods: { selTab(i) { this.$emit('update:currTab', i) this.$emit('handle') }, }, } </script> <style lang="scss" scoped> $deep-grey:#63676b; $deep-blue:#004a9b; $light-grey:#797979; .tabs { display: inline-block; ul { margin: 0; list-style: none; li { user-select: none; display: inline-flex; flex-direction: row; align-items: center; text-align: center; cursor: pointer; transition: all 0.4s; background-color: #f1f4f9; div { flex: 1; display: inline-block; margin: 0 15px; } } } .allBorder{ color: $deep-grey; font-weight: 700; li{ border-width: 1px; border-style: solid; border-color: rgba(155,155,155); background-color: #f1f4f9; border-radius: 4px; box-shadow: 0.5px 0.5px 0px 0.2px rgba(155,155,155); &.active { color: #fff; background-color: $deep-blue; border-color: $deep-blue; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15); } } } .incompleteBorder{ color: #aaa; font-weight: 700; li{ border-width: 1px; border-style: solid; border-color: #eee #eee $deep-blue; border-top-left-radius: 4px; border-top-right-radius: 4px; &:hover { background-color: rgba(0, 74, 155, 0.3); } &.active { color: $deep-blue; background-color: #fff; border-color: $deep-blue $deep-blue #fff; } } } .noBorder{ color: #00213b; li{ border-color: #eee; border-radius: 4px; &:hover { background-color: #797979; } &.active { color: #fff; background-color: $light-grey; border-color: $deep-blue; } } } } .unclickable{ background-color: rgb(245,245,245) !important; cursor: not-allowed; border-color: #999 !important; border-style: dashed !important; } </style>