7

使用此处提供的示例：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，但显然不是b-form-file？

4

3 回答 3

2

我只是通过安装推荐版本的 Bootstrap 来解决同样的问题。官方网站上的命令将安装它的最新版本（我写这篇文章时是 5.0.2），它与 bootstrap-vue 不兼容。

yarn remove bootstrap
yarn add bootstrap@4.5.3
于 2021-07-14T06:15:11.297 回答
0

此代码段有效，只需使用代码段检查您的 bootstrap-vue 和 bootstrap-vue-css 版本。您的问题可能是由于使用旧版本的b-vue.

new Vue({
  el: "#app",
});
body {
  padding: 2rem
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-form-file
      placeholder="Choose a file or drop it here..."
      drop-placeholder="Drop file here..."
    ></b-form-file>
  </div>
</div>

于 2021-04-18T20:59:06.717 回答
-1

对我来说同样的问题，但我现在解决了。

bootstrap-vue 文档代码示例

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

首先将 bootstrap.min.css(v4.5) ( https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css ) 下载到 src/assets/boostrap.min。 css

然后import 'bootstrap/dist/css/bootstrap.css'改为import './assets/bootstrap.min.css'

终于成功了！

于 2021-07-10T01:38:44.993 回答