代码之家 › 专栏 › 技术社区 › Rashik

b-dropdown没有呈现任何css类

bootstrap-vue vue.js

Rashik · 技术社区 · 4 年前

bootstrap-vue 添加 <b-dropdown>

这是引导vue组件的一些bug还是我在添加类时做了一些错误的事情?

new Vue({
  el: "#vueapp",
  data: function() {
    return {}
  }
})

.btn-circle {
  width: 30px;
  height: 30px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>


<div id="vueapp" class="vue-app">
  <b-dropdown button-class="btn btn-danger d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle" no-caret>
    <template v-slot:button-content>
            <i class="fas fa-cog fa-lg"></i>
          </template>
    <b-dropdown-item href="#">An item</b-dropdown-item>
    <b-dropdown-item href="#">Another item</b-dropdown-item>
  </b-dropdown>


  <button class="btn btn-light d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle ">
          <i class="fas fa-plus-circle fa-lg"></i>
        </button>
</div>

0 回复 | 直到 4 年前

Rashik 4 年前

我用错道具了。所以,我不得不使用 toggle-class 道具 <b-dropdown> .

new Vue({
  el: "#vueapp",
  data: function() {
    return {}
  }
})

.btn-circle {
  width: 30px;
  height: 30px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>


<div id="vueapp" class="vue-app">
  <b-dropdown toggle-class="btn btn-danger d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle" no-caret>
    <template v-slot:button-content>
            <i class="fas fa-cog fa-lg"></i>
          </template>
    <b-dropdown-item href="#">An item</b-dropdown-item>
    <b-dropdown-item href="#">Another item</b-dropdown-item>
  </b-dropdown>


  <button class="btn btn-light d-flex align-items-center mr-2 justify-content-center rounded-circle btn-circle ">
          <i class="fas fa-plus-circle fa-lg"></i>
        </button>
</div>