标签: bootstrap-vue

使用此处提供的示例：https : //bootstrap-vue.js.org/docs/components/form-file，第一个“样式化”示例显示的样式没有提供。

即使我的模板是这样，两者都显示为“普通”：

<template> 
<div>
  <!-- Styled -->
  <b-form-file v-model="file" :state="Boolean(file)" placeholder="Choose a file..."></b-form-file>
  <div class="mt-3">Selected file: {{file && file.name}}</div>

  <!-- Plain mode -->
  <b-form-file v-model="file2" class="mt-3" plain></b-form-file>
  <div class="mt-3">Selected file: {{file2 && file2.name}}</div>
</div>
</template>

我以为我错过了正确加载CSS的机会。但是，从其他示例复制粘贴bootstrap-vue也可以。按钮的样式带有附加的JS事件-似乎并不是问题所在。

为什么bootstrap-vue会为其他组件加载CSS，但显然不会加载CSS b-form-file？

我想创建一个带有侧菜单的基本管理面板。它应该看起来像这样：https : //vuetifyjs.com/en/examples/layouts/baseline

到目前为止，我已经做到了：

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        name: 'BootstrapVue',
        show: true
      }
    },
  })
}

body {
  padding-top: 57px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.0.2/dist/bootstrap-vue.js"></script>
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<link href="//unpkg.com/bootstrap-vue@2.0.2/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="//unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app">
  <div>
    <b-navbar variant="dark" type="dark" fixed="top">
      <b-navbar-brand href="#">NavBar</b-navbar-brand>
    </b-navbar>
    <b-container fluid>
      <b-row>
        <b-col cols="2" class="pl-0">
          <b-nav vertical class="bg-light border-right position-fixed">
            <b-nav-item>
              This topic is way too long to be displayed correctly!
            </b-nav-item>
          </b-nav>
        </b-col> …

当我开始写作时，我想输入大写第一个字母。

<b-form-input v-model="formSurname" id="Surname" name="Surname" placeholder="Surname" type="text" maxlength="50" required> </b-form-input>

我也有这个过滤器。但v-model="formSurname | capitalize"不起作用我尝试过:value="formSurname | capitalize"但它也不起作用

Vue.filter("capitalize", function (value) {
    if (!value) 
        return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
});

如何实时输入更改我的第一个字母？

Webpack 捆绑分析器显示 bootstrap-vue 包中的图标大小为 535kb。

我不想在项目中使用它们，所以我一直尝试使用 webpack IgnorePlugin 排除该包。

根据文档中的示例，我尝试这样写：

new webpack.IgnorePlugin({
        resourceRegExp: /^icons(.*)$/,
        contextRegExp: /^bootstrap-vue(.*)$/
    })

但它不起作用。我唯一能够重现的是通过这个限制完全排除 bootstrap-vue libnew webpack.IgnorePlugin(/bootstrap-vue/)

那么我如何才能只排除图标呢？

在 BootstrapVue 中关闭 Modal 时，我想防止关闭 Toast。

设想：

1. 打开页面上的 Modal 和 Toast
2. 关闭模态
3. 然后 Modal 和 Toast 同时关闭

问题：如何保持 Toast 停留

    created() {
       this.$bvModal.show('modal-form-id')
       const errorToaster = {
          title: 'Success',
          toaster: 'b-toaster-top-center',
          variant: 'success'
        }
       this.$bvToast.toast('Success', errorToaster)
    },
    methods: {
       closeModal() {
         this.$bvModal.hide('modal-form-id')
       }
    }

    

目前我只有一个 BootstrapVue VueJS 前端项目，我有 4 张扑克牌，我理想情况下希望将它们保留在一行/行上（就像在本地一样），但是当我在生产中查看它时（使用 Heroku，如果它制作了一个不同之处）

目前的代码如下：

    <div 
        flex-wrap="nowrap" 
        class="row d-flex nowrap mt-3" 
        justify-content="space-between" 
        width="100vw"
    >
        <b-container>
            <b-row>
                <b-col>
                    <PlayingCard/>
                </b-col>
                ....etc for the other cards....
             </b-row>
        </b-container>
    </div>

我玩过很多不同的类和合理内容以及所有这些东西，但不断得到不同的本地与产品结果。我可以确认 Heroku 上的代码是最新的，因为它会在每次新提交时重新部署，并且自从尝试修复此样式问题以来我添加了一些新功能，并且这些功能正确显示。

我已经在 vue js bootstrap vue 中安装了，使用以下命令\nyarn add bootstrap-vue bootstrap axios

代码：\n

    ERROR  Failed to compile with 1 errors                                                                                             2:56:01 AM\n    \n     error  in ./src/main.js\n\nModule Error (from ./node_modules/eslint-loader/index.js):\n\n/home/ronin/Documents/V2/test/src/main.js\n  7:1  error  \'Vue\' is not defined  no-undef\n\n\xe2\x9c\x96 1 problem (1 error, 0 warnings)\n\n\n @ multi (webpack)-dev-server/client?http://192.168.0.161:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js\n

由于 Bootstrap 5 不再使用 jQuery 并且使用的是 vanilla JS，我想知道是否仍然建议使用 Bootstrap-Vue，不管 Bootstrap-Vue 不支持 Bootstrap 5 的事实。

只是想知道我是否应该开始学习 Bootstrap-Vue。

我正在使用 bootstrap-vue 并尝试在应用程序内部创建导航栏组件，我正在使用此链接的文档中提供的第一个示例，我已按照 bootstrap-vue 说明中的说明安装了所有依赖项。我正在尝试使用此导航栏作为组件，并使用以下代码来创建它并呈现它。

导航栏.vue

<template>
  <div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
        </b-nav-form>

        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template #button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div> …

我正在尝试使用 toast 显示一条消息。所以我在这里尝试了（https://getbootstrap.com/docs/5.1/components/toasts/）上的所有示例代码，
但是当我单击按钮显示吐司时，它显示一次并立即消失。

我 尝试this.$bvToast.toast并this.$root.$bvToast.toastimport 'bootstrap-vue/dist/bootstrap-vue.css'

但它不起作用..

这是我的代码

<template>
 <div>
    <b-button @click="makeToast()">Show Toast</b-button>
    <b-button @click="makeToast(true)">Show Toast (appended)</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        toastCount: 0
      }
    },
    methods: {
      makeToast(append = false) {
        this.toastCount++
        this.$bvToast.toast(`This is toast number ${this.toastCount}`, {
          title: 'BootstrapVue Toast',
          autoHideDelay: 5000,
        // 'no-auto-hide':true,
          appendToast: append
        })
      }
    }
  }
</script>

与示例代码完全相同..

我正在使用这个版本

"vue": "^2.6.14",
"bootstrap-vue": "^2.21.2",

我怎样才能解决这个问题？？帮我..