Vue.js - 如何为活动菜单链接提供动态颜色

Posted 2023-02-22

【中文标题】Vue.js - 如何为活动菜单链接提供动态颜色

【英文标题】：Vue.js - How to give the active menu link a dynamic colour

【发布时间】：2020-08-15 07:30:49

【问题描述】：

正如标题所暗示的，我试图在每个菜单项处于活动状态时为其赋予不同的颜色。我试图通过遵循这两个代码示例来实现这一目标

1 -> https://codepen.io/Ranushka/pen/KKPBYQv

2 -> https://codepen.io/Ranushka/pen/ZEzjdrO

但我很挣扎，因为在这些示例中，它们使用的是 for 循环。所以我尝试调整代码，但不适合我。

你可以在这里找到我的代码 -> https://codepen.io/GY22/pen/vYNeOvQ

       <nav class="nav bg-darkGrey fixed w-full z-10 top-0 shadow">
             <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto lg:block mt-2 lg:mt-0 bg-darkGrey z-20">
       <ul class="list-reset lg:flex flex-1 items-center px-4 md:px-0">
         <li class="mr-6 my-2 md:my-0">
           <router-link :to="/page1" class="block py-1 md:py-3 pl-1 align-middle text-grey-900 no-underline   
              hover:text-red-800 border-b-4 border-gray-900 hover:border-red-800">
              <i class="fas fa-th-large fa-fw mr-3"></i>
              <span class="pb-1 md:pb-0 text-sm uppercase">Dashboard</span>
            </router-link>
         </li>

         <li class="mr-6 my-2 md:my-0">
           <router-link :to="/page2" class="block py-1 md:py-3 pl-1 align-middle text-grey-900 no-underline     
              hover:text-blue-400 border-b-4 border-gray-900 hover:border-blue-400">
              <i class="fas fa-th-large fa-fw mr-3"></i>
              <span class="pb-1 md:pb-0 text-sm uppercase">Users</span>
            </router-link>
         </li>

         <li class="mr-6 my-2 md:my-0">
           <router-link :to="/page3" class="block py-1 md:py-3 pl-1 align-middle text-grey-900 no-underline   
              hover:text-pink-400 border-b-4 border-gray-900 hover:border-pink-400">
              <i class="fas fa-th-large fa-fw mr-3"></i>
              <span class="pb-1 md:pb-0 text-sm uppercase">Posts</span>
            </router-link>
         </li>
       </ul>  
    </div>
        </nav>

这就是我想要达到的目标

我希望有人能引导我朝着正确的方向前进。提前致谢

【问题讨论】：

我不熟悉tailwind-css，但我看到它使用像hover:border-blue-400 这样的语法。焦点/点击的等价物是什么？会是focus:border-blue-400吗？

所以你不想使用循环？为什么？另外，您的代码有效，那么问题到底出在哪里？

@chojnicki 我认为它会变得复杂，对于 vue.js 来说仍然很新，并且不知道如何用图标和所有东西循环我的路由器链接（我提供的 codepen 是我的代码的更简单版本）

@GY22 好的，所以您确实做到了没有循环，并且悬停时的颜色有效。那么你的代码有什么问题呢？

@chojnicki 是的，我开始工作的悬停，但是当我在页面上时，该菜单项处于活动状态，因此需要有颜色。你知道像 css hover、active 等

【参考方案1】：

如果你需要严格使用 vue：

为每个链接添加事件和绑定类，例如：

 <router-link @click.native="isActive = 'dashboard'" :to="/page1" class="block py-1 md:py-3 pl-1 align-middle text-grey-900 no-underline  hover:text-red-800 border-b-4 border-gray-900 hover:border-red-800" v-bind:class=" active: isActive == 'dashboard'" >

仪表板

然后在你定义的数据中：

isActive: ''

或者例如，如果您希望仪表板链接在您打开页面时处于活动状态：

isActive: 'dashboard'

然后定义活动样式：

<style>
.active 
color: green;

</style>

这只是一个示例，然后您可以将类绑定到您需要的元素并根据需要设置活动类。

【参考方案2】：

所以我终于让它工作了，但是以一种非常简单的方式，没有绑定和点击 ....

所以解决方案只是将您选择的 css 类添加到路由器链接，并查看当链接处于活动状态时它已经具有 .router-link-exact-active 类，然后只需添加 css 样式

所以代码是这样的：

  <router-link class="menuItem-active-link" :to="name: 'dashboard'">Dashboard</router-link>

 .router-link-exact-active.menuItem-active-link
    border-bottom-color: #F19238;
    color:#F19238