标签: bootstrap-vue

您好，我尝试在我的 vue 3 应用程序中使用 bootstrapVue 和 typescript，这里是我的 main.ts：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Vue from 'vue'

import { BootstrapVue } from 'bootstrap-vue'

createApp(App).use(router).use(BootstrapVue).mount('#app')

导致此错误：

src/main.ts:9:32
TS2345: Argument of type 'BootstrapVuePlugin' is not assignable to parameter of type 'Plugin_2'.
  Type 'BootstrapVuePlugin' is not assignable to type '{ install: PluginInstallFunction; }'.
    Types of property 'install' are incompatible.
      Type 'PluginFunction<BvConfigOptions>' is not assignable to type 'PluginInstallFunction'.
        Types of parameters 'Vue' and 'app' are …

我正在尝试将Bootstrap Vue加载到Laravel 5.6项目中

在官方的文档说,修改webpack.config.js文件,如:

+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }

Webpack文档:https://webpack.js.org/guides/asset-management/#loading-css

我没有webpack.config.js文件所以我尝试使用Laravel mix加载CSS

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
    .styles('node_modules/bootstrap-vue/dist/bootstrap-vue.css', 'public/css');

这给了我一个错误

mix.combine()需要一个完整的输出文件路径作为第二个参数.

而且我不相信这是正确的做法.

将bootstrap-vue添加到新的Laravel 5.6项目中的正确方法是什么？

我正在使用 vue2 和 bootstrap-vue。实际上我有一个带有一些字段的b 表。其中一个字段是带有布尔值（真/假）的“已发布”。我想在每一行都有一个css 类，其中字段 'released' 的值为 false。例如，用另一种文本颜色显示该行处于非活动状态。

我怎样才能做到这一点？我在 bootstrap-vue 的文档中没有找到解决方案。有人有想法吗？（这是我在这里的第一个问题，如果可能难以理解，请见谅）

示例（只有第 2 项的行应该在表格行上获得一个 css-class，因为它没有被释放）：

...
<b-table stacked="md" :items="items" :fields="fields" >
...


<script>
...

export default {
  data () {
    return {
        fields: {
            {
              key: 'id',
              label: 'ID',
              sortable: true,
              class: 'Left',
            },
            {
              key: 'name',
              label: 'Name',
              sortable: true,
              class: 'Left'
            },
            {
              key: 'released',
              label: 'Freigegeben',
              sortable: true,
              class: 'Left'
            },
        },
        items: [
            {
              id: '1',
              name: 'nameA',
              released: …

试图获得与文档体验不同的内容：不是通过单击按钮而是在单击行时显示行详细信息。而且文档缺乏有关如何像示例中那样使它与众不同的细节。

<b-table
    v-if="tableIsReady"
    :items="deals"
    :fields="fields" 
    :per-page="recordsPerPage"
    no-local-sorting 
    @sort-changed="sorting" 
    responsive 
    flex 
    striped 
    hover
    @row-clicked="expandAdditionalInfo" 
  > 
   <template slot="row-details" slot-scope="row">
    <b-card>
      <h1>hello</h1>
    </b-card>
  </template>
 </b-table>

这是我的功能，但我认为它根本不起作用

expandAdditionalInfo(row) {
  row.showDetails();
}

我正在Bootstrap-Vue编写一个网页，但我无法更改 上的文本颜色Bootstrap navbar，尤其是b-nav-item-dropdown标签。我曾尝试使用<span class="text-dark"环绕b-nav-item-dropdown标签，但没有奏效。看来， 的变体b-navbar只能将文本颜色变体设置为深色或浅色。

这是我的代码：

<div>
  <b-navbar toggleable="md" type="dark" variant="primary">
  <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
  <b-collapse is-nav id="nav_collapse">
    <b-navbar-nav class="pl-5" inline>

      <b-nav-item-dropdown text="Electronics">
        <b-dropdown-item href="/">Item 1</b-dropdown-item>
        <b-dropdown-item href="/">Item 2</b-dropdown-item>
        <b-dropdown-item href="/">Item 3</b-dropdown-item>
        <b-dropdown-item href="/">Item 4</b-dropdown-item>
      </b-nav-item-dropdown>


      <b-nav-item-dropdown text="Sports">
        <b-dropdown-item href="/">Item 1</b-dropdown-item>
        <b-dropdown-item href="/">Item 2</b-dropdown-item>
        <b-dropdown-item href="/">Item 3</b-dropdown-item>
        <b-dropdown-item href="/">Item 4</b-dropdown-item>
      </b-nav-item-dropdown>

    </b-navbar-nav>
    <!--Login button-->
    <b-navbar-nav class="ml-auto pr-5">
      <b-button size="me">Login</b-button>
    </b-navbar-nav>

  </b-collapse>
</b-navbar>
</div>

我的目标是让所有文本b-nav-item-dropdown都变成黑色而不是灰白色。

我目前正致力于制作一个类似于Github的贡献图的组件,并努力将其作为npm包分享.

vue-contribution-graph使用npm打包的组件不会正确显示工具提示.b-tooltip组件的CSS 正在处理原始项目,但似乎没有在打包的组件中正确包含.实际上,在运行之后npm i vue-contribution-graph,工具提示背景不会出现.

我创建了一个GitHub问题只是为了让它更清晰:https://github.com/estelled/vue-contribution-graph/issues/4

手动安装所有依赖项后,行为保持不变.

我按照本教程进行了npm打包.

文件已更改为打包组件:

1. package.json
2. 添加了一个vue.config.js文件,在包中包含CSS

我如何解决它？

我想创建一个用TypeScript编写的可重用包装器函数，用于通过使用组合函数触发 Toast 通知，如 Vue 3.0 的当前规范：组合 API RFC 中所定义。

此示例使用 BootstrapVue v2.0 toast 组件。使用 Vue 2，它将通过根上下文中的this.$bvToastVue 组件实例注入来调用：

this.$bvToast.toast('Error happened', {
  title: 'Oh no',
  variant: 'danger'
});

// File: @/util/notify.ts
export function useNotify() {
  const notifyError = (title: string, msg: string) => {
    // How to access context.root as in a function component, without passing it to this function?
    context.root.$bvToast.toast(msg, {
      title,
      variant: 'danger'
    });
  }; …