如何将 Bootstrap-Vue 与自定义导航栏下拉按钮一起使用？

Question

我正在开发一个使用 Maisonette Bootstrap 主题的早期开发 Django + Vue 网站。网站的一部分是常规的 Django 呈现的模板，网站的一部分是单页应用程序。

我的任务是让 Vue 单页应用程序的导航栏与 Maisonette 主题中的导航栏匹配。在我开始工作之前，Vue SPA 被设置为使用 Bootstrap-Vue。

我的第一个想法是将 Django 模板代码复制到 Vue 模板中，但这根本不起作用（我不确定为什么）。看来我必须使用 Bootstrap-Vue 标签才能完成这项工作。

然而，我现在遇到了一个问题，我试图让下拉激活器（？）link（？）看起来一样，但似乎不可能，因为方式Bootstrap-Vue 创建下拉列表 links.

我想让 SPA 看起来像这样（图片取自网站的 Django 部分）：

...在 Django 模板中使用此代码：

    <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
       class="dropdown-toggle nav-link">
      <span class="user-name">{{ user.get_username }}</span>
      <span class="angle-down s7-angle-down"></span>
    </a>

...但是在 Bootstrap-Vue 中我似乎只能访问这个标签：

            <b-nav-item-dropdown text="Navigation" right>

...最终在 SPA 中看起来像这样：

因此 Bootstrap-Vue 标签的工作方式似乎无法添加角度向下跨度。

有办法做到这一点吗？

Django 导航栏的完整代码：

{% extends 'base.html' %} {% load static %} {% block nav %}
<nav class="navbar navbar-expand navbar-dark mai-top-header">
  <div class="container">
    <a href="#" class="navbar-brand"></a>
    <!--Left Menu-->
    <ul class="nav navbar-nav mai-top-nav">
      <li class="nav-item">
        <a href="/" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="http://www.bluescanlabs.com/index.html" class="nav-link">About</a>
      </li>
    </ul>
    <!--User Menu-->
    <ul class="nav navbar-nav float-lg-right mai-user-nav">
      <li class="dropdown nav-item">
        <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
           class="dropdown-toggle nav-link">
          <span class="user-name">{{ user.get_username }}</span>
          <span class="angle-down s7-angle-down"></span>
        </a>
        <div role="menu" class="dropdown-menu">
          <a href="/" class="dropdown-item">
            <span class="icon s7-home"> </span>Home</a>
          <a href="{% url 'account_profile' %}" class="dropdown-item">
            <span class="icon s7-user"> </span>Profile</a>
          <a href="{% url 'account_change_password' %}" class="dropdown-item">
            <span class="icon s7-lock"> </span>Password</a>
          <a href="{% url 'account_logout' %}" class="dropdown-item">
            <span class="icon s7-power"> </span>Log Out</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
{% endblock %}

SPA 导航栏的完整（但未完成）代码：

<template>
    <b-navbar toggleable="md"
              type="dark"
              class="mai-top-header">
        <b-container>
            <b-navbar-brand :to="{ name: 'home' }"></b-navbar-brand>
            <!--Left Menu-->
            <b-navbar-nav class="mai-top-nav">
                <b-nav-item :to="{ name: 'home' }">Home</b-nav-item>
                <b-nav-item href="http://www.bluescanlabs.com/index.html">About</b-nav-item>
            </b-navbar-nav>
            <!--User Menu-->
            <b-navbar-nav class="float-lg-right mai-user-nav">
                <b-nav-item-dropdown text="Navigation" right>
                    <b-dropdown-item class="icon s7-home">Home</b-dropdown-item>
                    <b-dropdown-item class="icon s7-user">Profile</b-dropdown-item>
                    <b-dropdown-item>Password</b-dropdown-item>
                    <b-dropdown-item>Log Out</b-dropdown-item>
                </b-nav-item-dropdown>
            </b-navbar-nav>
        </b-container>
    </b-navbar>
</template>

<script>
    export default {}
</script>

<style scoped>

</style>

Answer 1

答案是将 <template slot="button-content">custom <b>text</b></template> 放在起始 <b-nav-item-dropdown> 标记之后。然后我可以用我想要的任何自定义 HTML 替换 custom <b>text</b>。

我得到了这个答案 here。

如何将 Bootstrap-Vue 与自定义导航栏下拉按钮一起使用？

How to use Bootstrap-Vue with a custom navbar dropdown button?

vue.js

bootstrap-4

bootstrap-vue