139 lines
2.2 KiB
Vue
139 lines
2.2 KiB
Vue
|
<!--
|
||
|
|
filename: index.vue
|
||
|
|
author: liubin
|
||
|
|
date: 2024-04-02 09:49:36
|
||
|
|
description:
|
||
|
|
-->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<!-- 按钮切换 -->
|
||
|
|
<div
|
||
|
|
v-if="buttonMode"
|
||
|
|
class="button-nav">
|
||
|
|
<button
|
||
|
|
v-for="m in menus"
|
||
|
|
:key="m"
|
||
|
|
@click="currentMenu = m"
|
||
|
|
:data-text="m"
|
||
|
|
:class="[m === currentMenu ? 'active' : '']"></button>
|
||
|
|
</div>
|
||
|
|
<!-- 标签切换 -->
|
||
|
|
<div
|
||
|
|
v-else
|
||
|
|
class="custom-tabs"
|
||
|
|
style="height: 100%; width: 100%">
|
||
|
|
<el-tabs
|
||
|
|
class="tag-nav"
|
||
|
|
v-model="currentMenu"
|
||
|
|
style="height: 100%">
|
||
|
|
<el-tab-pane
|
||
|
|
v-for="(m, idx) in menus"
|
||
|
|
:key="m"
|
||
|
|
:label="idx == 0 ? `\u2002${m}\u2002` : `\u3000${m}\u3000`"
|
||
|
|
:name="m">
|
||
|
|
<slot :name="`tab${idx + 1}`"></slot>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'ButtonNav',
|
||
|
|
props: {
|
||
|
|
menus: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
default: () => [],
|
||
|
|
validator: (val) => {
|
||
|
|
return val.length > 0;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
buttonMode: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
currentMenu: '',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.currentMenu = this.menus[0];
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
currentMenu(val) {
|
||
|
|
this.$emit('change', val);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.button-nav {
|
||
|
|
width: 100%;
|
||
|
|
// padding: 12px 0;
|
||
|
|
display: flex;
|
||
|
|
gap: 12px;
|
||
|
|
|
||
|
|
* {
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
cursor: pointer;
|
||
|
|
appearance: none;
|
||
|
|
outline: none;
|
||
|
|
border: none;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 20px;
|
||
|
|
color: #888;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
flex: 1;
|
||
|
|
box-sizing: padding-box;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content: attr(data-text);
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
left: 50%;
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 500;
|
||
|
|
transform: translate(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
color: #111;
|
||
|
|
border-bottom: 4px solid #0b58ff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.custom-tabs >>> .el-tabs__header {
|
||
|
|
margin-bottom: 8px;
|
||
|
|
display: inline-block;
|
||
|
|
/* transform: translateY(-12px); */
|
||
|
|
}
|
||
|
|
.custom-tabs >>> .el-tabs__item {
|
||
|
|
padding-left: 0px !important;
|
||
|
|
padding-right: 0px !important;
|
||
|
|
line-height: 36px !important;
|
||
|
|
height: 36px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-tabs >>> .el-tabs__content {
|
||
|
|
height: calc(100% - 42px);
|
||
|
|
}
|
||
|
|
.custom-tabs >>> .el-tab-pane {
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: 100%;
|
||
|
|
padding: 20px;
|
||
|
|
border: 10px solid #f002;
|
||
|
|
}
|
||
|
|
</style>
|