Загрузка файла формы Bootstrap-vue не имеет стиля, а другие компоненты имеют?

Question

Загрузка файла формы 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 для других компонентов, но, очевидно, нет b-form-file?

7

javascript vue.js bootstrap-vue

Источник

user5010082 24 июл '18 в 07:19

3 ответа

Другие вопросы по тегам javascript vue.js bootstrap-vue

user13874072 14 июл '21 в 06:15 2021-07-14 06:15 · Answer 1 · 2021-07-14 06:15

Я просто решаю ту же проблему, устанавливая рекомендуемую версию Bootstrap. Команда на официальном сайте установит его последнюю версию (5.0.2 на момент написания этой статьи), которая несовместима с bootstrap-vue.

      yarn remove bootstrap
yarn add bootstrap@4.5.3

2

Источник

user13874072 14 июл '21 в 06:15

user6595551 18 апр '21 в 23:59 2021-04-18 23:59 · Answer 2 · 2021-04-18 23:59

Этот фрагмент работает, просто проверьте свои версии bootstrap-vue и bootstrap-vue-css с помощью фрагмента. Вероятно, ваша проблема связана с использованием более старой версии b-vue.

0

Источник

user6595551 18 апр '21 в 23:59

user6767042 10 июл '21 в 04:38 2021-07-10 04:38 · Answer 3 · 2021-07-10 04:38

Тот же вопрос ко мне, но теперь я решил.

пример кода документа 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'

наконец то работает!