BootstrapVue框架集合

1.导航栏navbar

鼠标滑过既有下拉列表

效果图

以下代码段，toPage（pathName）是跳转页面的方法，

<b-navbar id="nav" toggleable="sm" type="light" variant="light">
            <b-navbar-toggle target="nav-text-collapse"></b-navbar-toggle>
            <b-collapse id="nav-text-collapse" is-nav>
              <b-navbar-nav>

                <b-nav-item class="d-sm-none" v-for="item in navList" href="#">
                <span style="color: black" @click.native="toPage(item.path)">
                  {{$t(item.text)}}
                </span>
                </b-nav-item>

                <div style="display: flex;flex-direction: column">
                  <div class="row" style="display: flex;flex-direction: row;">
                    <b-nav-item-dropdown class="d-none d-sm-block"  v-for="item in navList" right>
                        <div slot="text" @click="toPage(item.path)" style="display: flex;flex-direction: column;align-items: center">
                          <img src="./assets/img/index/rightNav1.png" class="d-inline-block align-top"
                               style="width: 70px;height: 70px">
                          {{$t(item.text)}}
                        </div>
                      <b-dropdown-item v-if="item.child!=undefined" v-for="child in item.child" href="#">
                        {{$t(child.text)}}
                      </b-dropdown-item>
                    </b-nav-item-dropdown>
                  </div>
                </div>

              </b-navbar-nav>
            </b-collapse>
          </b-navbar>

navList只放了两个对象，只做例子示范，用jquery修改了一些样式。第一个对象首页是没有下拉列表的。我把首页的下拉列表禁止显示了。

//这是去掉下拉列表的三角形的覆盖样式
.gg:after {
    display: none !important;
  }

$(document).ready(function () {
    // navbar的样式修改
    $(".b-nav-dropdown").hover(function () {
      var $b = $($(this).children("ul")[0])               //$b为ul的jquery对象
      var $c = $($b.prev().children("span")[0])
      $b.addClass("show")
      $c.css('color', '#A60002')
      // $b.prev().css('backgroundColor', 'white')
    }, function () {
      var $b = $($(this).children("ul")[0])
      var $c = $($b.prev().children("span")[0])
      $c.css('color', 'black')
      $b.removeClass("show")
      // $b.prev().css('background', 'none')
    });

    $(".dropdown-toggle").addClass("gg");       //去除下拉列表的三角符号

    $(".navbar-toggler").css('backgroundColor', 'white')
    $($(".dropdown-menu-right")[0]).removeClass('dropdown-menu')
    $($(".dropdown-menu-right")[0]).css('display','none')
    $($(".dropdown-menu-right")[0]).removeClass('dropdown-menu-right')
  });

 navList: [
          {
            text: 'm.index',
            path: 'index',
          },
          {
            text: 'm.aboutUS',
            path: '',
            child: [
              {
                text: 'm.company',
                path: ''
              },
              {
                text: 'm.group',
                path: ''
              },
              {
                text: 'm.honor',
                path: ''
              },
              {
                text: 'm.position',
                path: ''
              },
              {
                text: 'm.videoCenter',
                path: ''
              }
            ]
          },
]

 

来源：https://blog.csdn.net/weixin_42706303/article/details/100132730