135 lines
2.5 KiB
Vue
135 lines
2.5 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;
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
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>
|