如何通过自定义导航栏下拉按钮使用Bootstrap-Vue？

Question

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

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

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

但是，我现在遇到一个问题，试图使dropdown-activator（？）链接（？）看起来相同，并且由于Bootstrap-Vue创建下拉链接的方式，这似乎是不可能的。

我想使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>标记之后。然后，我可以用所需custom <b>text</b>的任何自定义HTML 替换。

我在这里得到了这个答案。