<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>