Как использовать Bootstrap-Vue с настраиваемой кнопкой выпадающего меню? - PullRequest
Новая
       6

Как использовать Bootstrap-Vue с настраиваемой кнопкой выпадающего меню?

0 голосов
/ 21 ноября 2018

Я работаю над ранним сайтом Django + Vue, который использует тему Bootstrap Maisonette .Часть веб-сайта представляет собой обычные шаблоны, отображаемые в Django, а часть веб-сайта представляет собой одностраничное приложение.

Мне было поручено настроить панель навигации для одностраничного приложения Vue в соответствии с панелью навигации вДомик на тему.Vue SPA был настроен на использование Bootstrap-Vue до того, как я начал над ним работать.

Моей первой мыслью было просто скопировать код шаблона Django в шаблон Vue, но это не сработало вообще (яне уверен почему).Кажется, я должен использовать теги Bootstrap-Vue для этой работы.

Однако сейчас я сталкиваюсь с проблемой, когда пытаюсь получить активатор выпадающего меню (?)ссылка (?) выглядит одинаково, и это кажется невозможным из-за способа, которым Bootstrap-Vue создает раскрывающиеся ссылки.

Я хочу, чтобы SPA выглядел следующим образом (изображение взято с сайта Django)):

enter image description here

... который использует этот код в шаблоне 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-Вью у меня только есть доступ к этому тегу: 

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

... который в СПА выглядит следующим образом:

enter image description here

Таким образом, похоже, что работа тега 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>

1 Ответ

0 голосов
/ 22 ноября 2018

Ответ должен был поставить <template slot="button-content">custom <b>text</b></template> сразу после открывающего тега <b-nav-item-dropdown>.Затем я смог заменить custom <b>text</b> любым пользовательским HTML, который я хотел.

Я получил этот ответ здесь .

...