Question

我想从点击时隐藏的“vue-bootstrap”创建一个侧边栏，但我只想隐藏这个侧边栏宽度的 80%，那么，如何只隐藏侧边栏的一部分？

<b-button v-b-toggle.sidebar-1 class="toogle-sidebar">
        <span>Toogle sidebar</span>
</b-button>


<b-sidebar
      id="sidebar-backdrop"
      title="Sidebar with backdrop"
      :backdrop-variant="variant"
      backdrop
      shadow
    >
      <div class="px-3 py-2">
        <b-form-group label="Backdrop variant" label-for="backdrop-variant">
          <b-form-select id="backdrop-variant" v-model="variant" :options="variants"></b-form-select>
        </b-form-group>
      </div>
    </b-sidebar>

我想在 Gitlab siddebar 中创建类似的东西，当我点击 hide sidebar 时，我只看到菜单的图标，有人能告诉我怎么做吗？

感谢您的帮助！

Answer 1

使用 v-model 而不是指令并将类附加到它：然后您可以使用 CSS 动画来覆盖默认的 CSS 值：

new Vue({
  el: "#app",
  data() {
    return {
      sidebar: false,
    }
  },
  methods: {
    toggleSidebar() {
      this.sidebar = !this.sidebar
    }
  }
})

.b-sidebar-outer.closed #sidebar-backdrop {
  display: block !important;
  transform: translateX(-270px);
  animation-name: sidebarAnim;
  animation-duration: 0.4s;
  animation-direction: reverse;
}

.b-sidebar-outer:not( .closed) #sidebar-backdrop {
  transform: translateX(0);
  animation-name: sidebarAnim;
  animation-duration: 0.4s;
}

@keyframes sidebarAnim {
  0% {
    transform: translateX(-270px);
    animation-timing-function: ease-in-out
  }
  100% {
    transform: translateX(0px);
    animation-timing-function: ease-in-out
  }
}

<!-- Add this to <head> -->

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="app">
  <b-container>
    <b-row>
      <b-col>
        <b-button @click="toggleSidebar">TOGGLE SIDEBAR</b-button>
      </b-col>
      <b-sidebar id="sidebar-backdrop" v-model="sidebar" title="Sidebar with backdrop" backdrop-variant :class="{ closed: !sidebar }" backdrop shadow>
        asdfsadf
      </b-sidebar>
    </b-row>
  </b-container>
</div>

如何仅隐藏引导侧边栏的一部分？

1 个答案: