Question

im用bootstrap vue开发了第一个vuejs应用程序，实际上我陷入了困境。我的母版页包含左侧固定粘边栏，其中有两个图标作为菜单链接。目标是当我单击任何菜单链接时，我需要左侧的侧边栏弹出（从左到右的动画）。子菜单具有100％的高度和自定义宽度。

对于左侧固定侧边栏，我使用了整个引导网格系统。现在，我正在尝试实现引导侧边栏，该边栏将以左边缘偏移量进行动画处理，使其从固定侧边栏的右边缘开始。我现在遇到的问题是动画通过固定的侧边栏。

如何实现？我应该使用bootstrap vue中的侧边栏组件还是实现纯HTML div元素并控制其动画？我应该玩z-index吗？

MasterView.vue

<template>
  <b-row class="h-100 m-0">
    <Menubar msg=""></Menubar>
    <b-col id="content">
      <router-view />
    </b-col>
  </b-row>
</template>

<script>
import Menubar from '@/components/Menubar.vue'

export default {
  name: 'master',
  components: {
    Menubar
  }
}
</script>

Menubar.vue

<template>
  <b-col id="menubar" class="align-self-center"
    >{{ msg }}

    <div :class="[currentPage.includes('sms-template') ? activeClass : '', 'text-center py-3']">
      <b-button variant="link" v-b-toggle.sidebar-footer>
        <feather type="message-square" class="menu-icons"></feather>
      </b-button>
      <b-sidebar id="sidebar-footer" aria-label="Sidebar with custom footer" no-header>
        <template v-slot:footer="{ hide }">
          <div class="d-flex bg-dark text-light align-items-center px-3 py-2">
            <strong class="mr-auto">Footer</strong>
            <b-button size="sm" @click="hide">Close</b-button>
          </div>
        </template>
        <div class="px-3 py-2">
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
            consectetur ac, vestibulum at eros.
          </p>
        </div>
      </b-sidebar>
    </div>    
  </b-col>
</template>

<script>
export default {
  name: 'Menubar',
  props: {
    msg: String
  },
  data() {
    return {
      activeClass: 'menu-active'
    }
  }  
}
</script>

App.vue（css）

<style>
@import '../node_modules/roboto-fontface/css/roboto/roboto-fontface.css';

* {
  outline-style: none;
}
html,
body,
.tooltip-inner {
  font-family: 'Roboto';
  /*font-size: 0.87em;*/
  font-size: 0.875rem;
  font-weight: 400;
}

#menubar {
  -ms-flex: 0 0 80px;
  flex: 0 0 80px;
  padding: 0;
  z-index: 1000px;
}

#content {
  background-color: #f5f5f5;
}

/* Icon links behavior */
.menu-icons {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.menu-active {
  background-color: #f5f5f5;
}

.icon-link {
  color: #aab0b7;
}

.icon-link:hover {
  color: #2699fb;
}

.router-link-exact-active {
  color: #0060a1;
}

.b-sidebar:not(.b-sidebar-right) {
  left: 80px;
}

.bg-light {
  background-color: #fcfcfc !important;
}

.b-sidebar-outer {
  z-index: 5;
}
</style>

Vue.js中的左侧固定边栏和动画左侧边栏

0 个答案: