101 lines
2.9 KiB
Vue
101 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<ul>
|
||
|
|
<li type="button" v-for="(item, index) in items" :key="index">
|
||
|
|
<button
|
||
|
|
:class="{ active: item.key == $route.name }"
|
||
|
|
@click.prevent="schemasItem(item, index)"
|
||
|
|
>
|
||
|
|
{{ item.label }}
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapActions } from "pinia";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
items: {
|
||
|
|
default() {
|
||
|
|
return [
|
||
|
|
// { key:'issues', label: "مساله" },
|
||
|
|
// { key:'answers', label: "پاسخ" },
|
||
|
|
// { key:'critions', label: "معیار" },
|
||
|
|
];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
routeTempalte: {
|
||
|
|
firstActive: false, // برای بار اول فعالیت دکمه پیش فرض انجام شود
|
||
|
|
activate: "route", // route history none // نحوه رفتار در تغییر نوبار
|
||
|
|
key: "routename", // کلید اصلی را از کجا بردارد
|
||
|
|
template: "key={{key}}",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
mode: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
let index = 0;
|
||
|
|
if (this.routeTempalte.firstActive) {
|
||
|
|
setTimeout(() => {
|
||
|
|
if (this.$route.query.key) {
|
||
|
|
index = this.items.findIndex(
|
||
|
|
(item) => item.key == this.$route.query.key
|
||
|
|
);
|
||
|
|
if (index == -1) index = 0;
|
||
|
|
}
|
||
|
|
if (index < this.items?.length)
|
||
|
|
this.schemasItem(this.items[index], index);
|
||
|
|
}, 300);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
schemasItem(item, index) {
|
||
|
|
this.mode = index;
|
||
|
|
|
||
|
|
let full_path = this.$route.fullPath;
|
||
|
|
|
||
|
|
let key1 = "";
|
||
|
|
let key2 = "";
|
||
|
|
if (this.routeTempalte.key == "routename") {
|
||
|
|
let prevKey = this.$route.name;
|
||
|
|
key1 = this.routeTempalte.template.replace("{{key}}", prevKey);
|
||
|
|
key2 = this.routeTempalte.template.replace("{{key}}", item.key);
|
||
|
|
} else {
|
||
|
|
this.$set(this.$route.query, "key", item.key);
|
||
|
|
}
|
||
|
|
|
||
|
|
let newRoutePath = full_path.replace(`${key1}`, `${key2}`);
|
||
|
|
|
||
|
|
if (this.routeTempalte.activate == "route")
|
||
|
|
this.$router.push({ path: newRoutePath });
|
||
|
|
else if (this.routeTempalte.activate == "history")
|
||
|
|
history.pushState({}, document.title, newRoutePath);
|
||
|
|
|
||
|
|
this.$emit("change-link", key2);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
button {
|
||
|
|
border: none;
|
||
|
|
background: white;
|
||
|
|
}
|
||
|
|
.active {
|
||
|
|
color: var(--primary-color);
|
||
|
|
position: relative;
|
||
|
|
&::after {
|
||
|
|
content: "";
|
||
|
|
border-bottom: 2px solid var(--primary-color);
|
||
|
|
position: absolute;
|
||
|
|
top: 40px;
|
||
|
|
right: 0px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|