标签: bootstrap-vue

我正在使用 Bootstrap Vue 表单制作一个简单的表单，用户可以在其中上传文件。有没有办法验证使用 Vue 表单选择的文件的大小？

我想阻止用户上传此类文件。

我见过这个解决方案，但看起来它包含一些第三方插件。我更喜欢没有的解决方案

我在 HTML 中有以下代码（使用 Vue JS 和 Bootstrap 编码）：

<b-tabs card>
        <b-tab title="Followers" :title-link-class="'tab-title-class'">
              Page View graph here
        </b-tab>
        <b-tab title="Orders" :title-link-class="'tab-title-class'">
              Order Numbers graph here
        </b-tab>
        <b-tab title="Sales" :title-link-class="'tab-title-class'">
              <sales-analytics></sales-analytics>
        </b-tab>
        <b-tab title="Profit" :title-link-class="'tab-title-class'">
              Earning graph here
        </b-tab>
</b-tabs>

该卡片包含 4 个选项卡，其中一个名为“销售”，<sales-analytics></sales-analytics>是我创建的一个组件，用于使用 Vue-ApexCharts 库呈现图形。但是，该图表在选择选项卡时不会自动呈现。它只能在我在 Chrome 上单击 F12 后运行，重新加载页面也不起作用。

我认为该组件应该只在选择选项卡后运行，而不是在加载站点时完全运行（因为这会导致在站点加载时未选择选项卡时出现渲染问题）。有谁知道如何实现这一点？或者解决这个问题的替代方法？

脚本部分的更多内容：

<script>
   import Sales from '../analytics/Sales'

export default {
    components: {      
        'sales-analytics': Sales
}
</script>

编辑：经过相当多的谷歌搜索后，我发现了这个：https : //github.com/apertureless/vue-chartjs/issues/157 这与我的情况有非常相似的行为，我想 v-if 并安装加载选项卡被选中后的组件。有谁知道怎么做？

我得到了这个基于 vue bootstrap 的选择代码：

<b-form-select v-model="selectedgroup" class="mb-3"  @change="searchSubGroup()">
    <option :value="null">Select a group</option>
    <option v-for="group in groupItem" :value="group.id">
        {{group.nome}}
    </option>
</b-form-select>  

当searchSubGroup()@change 事件调用该方法时，@change 事件会传递一个旧值selectedgroup。示例：如果我首先单击 value = 1 的选项，该方法将调用selectedgroupas null，然后如果我再次单击 value = 2 的另一个选项，该方法将调用selectedgroupas 1。

searchSubGroup(){ 
  this.axios.get("http://chart.solutions/public/api/produto/subgroup/search/" + this.selectedgroup + "/").then(response => {
        if (response.data.erro) {
            //console.log("subgroup doesnt exist")
        }else{
            this.subGroupItem = response.data;
        }
    })
} 

I'm trying to associate bootstrap 4 (bootstrap-vue) with Nuxt.

I have difficulties using mixins and variables in pages or components, although I added style-resources-module.

Here is an extract of nuxt.config.js:

/*
** Global CSS
*/
css: ["~/scss/vars.scss"],

/*
** Plugins to load before mounting the App
*/
plugins: [],
/*

/*
** Nuxt.js modules
*/
modules: [
  // Doc: https://bootstrap-vue.js.org/docs/
  "bootstrap-vue/nuxt",
  // Doc: https://github.com/nuxt-community/style-resources-module
  "@nuxtjs/style-resources"
],

/*
** Disabling Bootstrap Compiled CSS
*/
bootstrapVue: {
  bootstrapCSS: false,
  bootstrapVueCSS: false …

在我的项目中，我使用BootstrapVue和VueJS. 我目前正在做一个b-table并且我在它的字段中有一个布尔字段。它显示正确true和false，但我想显示其他内容（例如：Activefortrue和Inactivefor false）。我还没有找到任何关于如何做到这一点的信息（如果有内置的东西，我还没有在文档中看到它）。这是我当前的b-tableof字段声明BootstrapVue：

table_fields: [
  { key: 'username', sortable: true },
  { key: 'firstName', sortable: true },
  { key: 'lastName', sortable: true },
  { key: 'isActive', sortable: true, label: 'Status'},
  { key: 'actions', label: 'Actions' }
]

我想改变行为的领域是isActive.

预先感谢您的提示！:)

我尝试使用 .modal-header 更改 b-modal -> in .modal-header 中的背景颜色bootstrap-vue。但是 vue 没有看到我的样式，我不知道为什么：/这里是代码。我按照链接中的答案

HTML：

b-modal(id="card-1" title="CARTÃO DE CRÉDITO"  :modal-class="myclass" header-text-variant="light")

VUE

export default {
    data: {
   myclass: ['myclass']
 },

}

CSS

.myclass > .modal-dialog > .modal-content > .modal-header {
  background-color: #da2228 !important;
  color: white;
}

但我仍然没有看到结果。模态标题为白色。任何想法为什么？

在 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')
       }
    }

    

我对Nuxt.js应用程序非常陌生，我正在尝试使用Nuxt.js and Vue.js. 在使用创建项目期间，Nuxt cli我添加了Bootstrap-vue.

我在Bootstrap modal创建方面面临一些问题，因此我想Bootstrap vue完全删除并将好的旧平原添加Bootstrap到我的应用程序中。我尝试根据此处找到的一些答案添加，但由于某种原因，它没有按预期工作，并且我的Modal没有正确显示drop-downs等。所以我的猜测是我没有正确从我的应用程序中删除并完全Bootstrap vue添加Bootstrap。

如果我在这里错过了一些东西，有人可以告诉我吗：

** 删除 Bootstrap-vue ***

1. npm i bootstrap-vue --save。
2. bootstrap-vue.js从文件夹中删除文件plugins。
3. plugin从......中去除nuxt-config.js：plugins: ["@/plugins/bootstrap-vue"],

** 安装旧版 Bootstrap ** 将以下 CDN 链接添加到我的nuxt-config.js文件中：

script: [
      {
        src: "https://code.jquery.com/jquery-3.6.0.min.js"
      },
      {
        src:
          "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
      }
]

link:[
      {
        rel: "stylesheet",
        href:
          "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      },
      {
        rel: …

我正在使用 bootstrap vue table，并且我想将 bootstrap table 导出到 excel 或 pdf。它就像表中的表，我发现如何导出它以供下载为 excel 或 pdf 很困难，因为我遇到的其他解决方案都只涉及提供 json 数据，它可以工作，但不能'找不到关于我的问题的任何解决方案。

Codesandbox演示

<template>
  <div id="app">
    <b-button @click="exportTable" class="mb-3">Export</b-button>
    <b-table-simple outlined id="htmltable">
      <b-thead class="b-table__head">
        <b-tr>
          <b-th class="small-tab">Goods</b-th>
          <b-th>Units</b-th>
          <b-th>Price Per Unit</b-th>
          <b-th>Total Price</b-th>
        </b-tr>
      </b-thead>
      <b-tbody v-for="(service, index) in goodsGroupedByCategory" :key="index">
        <b-tr class="category-line">
          <b-th class="small-tab cs-textstyle-paragraph-small-bold">{{
            index
          }}</b-th>
          <b-td></b-td>
          <b-td></b-td>
          <b-th class="cs-textstyle-paragraph-small-bold">{{
            service.reduce(function (prev, curr) {
              return prev + curr.total_units * curr.price_per_unit;
            }, 0)
          }}</b-th>
        </b-tr>
        <b-tr
          v-for="serviceItem in service"
          :key="serviceItem.id"
          class="item-line"
        >
          <b-td class="big-tab cs-textstyle-paragraph-small">{{ …

Tailwind 使您可以在使用 Vite 设置的项目中轻松使用其 CSS，如您在此处看到的。

但是，Bootstrap 5 仅提供可用于Webpack 的信息。

我找不到任何关于如何使用 Vite 设置 Bootstrap 5 CSS 的信息。有人对如何使用 Vite 成功且最佳地设置 Bootstrap 5 有任何建议吗？我正在使用 Nuxt3，但使用哪个框架并不重要。