76 lines
1.4 KiB
Vue
76 lines
1.4 KiB
Vue
<template>
|
|
<ul>
|
|
<li
|
|
v-for="(item, i) in menus"
|
|
:class="activeI === i ? 'active-menu' : ''"
|
|
:key="i"
|
|
@click="(activeI = i), go(i)"
|
|
>
|
|
{{ item.name }}
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script>
|
|
import { onMounted, reactive, toRefs } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
export default {
|
|
name: "Header",
|
|
props: ["pactiveI", "menus"],
|
|
setup(props, ctx) {
|
|
const router = useRouter();
|
|
const state = reactive({
|
|
activeI: 0,
|
|
menus: [],
|
|
});
|
|
onMounted(() => {
|
|
if (props.pactiveI) {
|
|
state.activeI = props.pactiveI;
|
|
state.menus = props.menus;
|
|
}
|
|
});
|
|
|
|
const go = (i) => {
|
|
ctx.emit("changeIndex", i);
|
|
};
|
|
return {
|
|
...toRefs(state),
|
|
go,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
ul {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20px;
|
|
// border: 1px solid #0f9b49;
|
|
display: flex;
|
|
padding: 0 5px;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
li {
|
|
width: 100%;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
height: 24%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 0 8px #99acb0 inset;
|
|
border-radius: 5px;
|
|
font-size: 24px;
|
|
&.active-menu {
|
|
background: #a7dcf5;
|
|
}
|
|
&:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
}
|
|
</style>
|