标签: bootstrap-vue

import Vue from 'vue'
import App from './App'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'




Vue.config.productionTip = false
Vue.use(BootstrapVue);


/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

import Vue from 'vue'
import App from './App'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'




Vue.config.productionTip = false
Vue.use(BootstrapVue);


/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

我尝试使用该命令使用 vue 绑定样式更改元素的背景颜色， v-bind:style='{backgroundColor : color} 但它不是全高，即使我尝试删除 CSS 上 body …

我使用 bootstrap-vue。

它包括输入类型日期。

当我写一些数字时，默认格式是 yyyyyy-mm-dd。

我想将格式 yyyyyy-mm-dd 更改为 yyyy-mm-dd。

我使用 bootstrap 作为我的设计框架，并且一直在使用 bootstrap-vue。现在我想实现一些测试来配合我的组件。我正在编写一个非常简单的测试，以确保打开了一个模态。我在 vue-test-utils 中使用什么来打开 bootstrap-vue 模式？

我正在使用 Laravel、bootstrap-vue、vue-test-utils、mocha 和 mocha-webpack 附带的基础知识。

我正在尝试使用wrapper.find('#modal-1').trigger('click'). 我试过使用指令<b-button v-b-modal.modal-1>我试过使用 event <b-button @click="$bvModal.show('modal-1')">。最后，我<button @click="showModal = true">在 b-modal 上尝试了一个带有这个的常规按钮<b-modal v-model="showModal">。我还尝试$nextTick在触发器和断言之间添加一个。

import { createLocalVue, mount } from '@vue/test-utils';
import expect from 'expect';
import BootstrapVue from 'bootstrap-vue';
import MyComponent from '@/components/MyComponent.vue';

const localVue = createLocalVue();

localVue.use(BootstrapVue);

describe ('MyComponent', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(QuotesExceptions, {
            localVue
        });
    });

    it ('opens a …

有没有人尝试过将 boostrap-vue 与 vuex 结合使用？我很难从 vuex 操作中调用模态和吐司。

显然我不能this从 vuex 商店使用，因此我不能使用：

this.$bvModal.show('modalId');

我也试过像这样调用模态

import Vue from 'vue';

Vue.prototype.$bvModal.show('transaction');

但是控制台给了我以下警告：

BootstrapVue 警告]：必须从 Vue 实例“this”上下文访问“$bvModal”

知道如何直接从 vuex 动作调用模态和吐司吗？

我是一个非常新的编程。我试图弄清楚如何绑定数据以获取链接 :href 使用 store、vuex 和 bootstrap-vue 表工作。我为此花了 4 天时间，现在我快要死了。请帮忙。

book.js（商店，vuex）

books: [
    {
      id: 1,
      name: "name 1",
      bookTitle: "book1",
      thumbnail: '../../assets/img/book01.jpeg',
      url: "https://www.google.com",
      regDate: '2019-10'
    },
    {
       id: 2,
      name: "name2",
      bookTitle: "book2",
      thumbnail: "book2",
      url: "http://www.yahoo.com",
      regDate: '2019-10'
    },

书单.vue

books: [
    {
      id: 1,
      name: "name 1",
      bookTitle: "book1",
      thumbnail: '../../assets/img/book01.jpeg',
      url: "https://www.google.com",
      regDate: '2019-10'
    },
    {
       id: 2,
      name: "name2",
      bookTitle: "book2",
      thumbnail: "book2",
      url: "http://www.yahoo.com",
      regDate: '2019-10'
    },

<script>
export default {
  name: "BookList",
  components: …

有没有办法增加 bootstrap vue 中工具提示的宽度。我有一个重要的声明要显示在工具提示中。并且工具提示将消息显示为连续三个单词。所以工具提示的高度更大，宽度更小。

<div>
  <span id="disabled-wrapper" class="d-inline-block" tabindex="0">
    <b-button variant="primary" style="pointer-events: none;" disabled>Disabled button</b-button>
  </span>
  <b-tooltip target="disabled-wrapper">jasfkjsdfsdafiads uhsdifumasb jhgasd  asd ua d uiuud  iad iadh ad ihhad ad aid ia dia id ai did ai d a ushdufsd ushd iufads fiuash dfias d uusahdfiusahifu ais fisadu fius fsuhdfushfisafh isaf hisauhfisa hhfish fiushf iush fisu hfisuh fis hfius hfius stooltip</b-tooltip>
</div>

我正在使用 Bootstrap Vue并希望动态添加一列或仅在数据中满足某些条件时才显示该列。我正在尝试了解作用域插槽以及这是否是我应该使用格式化程序回调函数的方向。理想情况下，只有在数据中可用时，我才想添加列“版本 2”。我不知道从哪里开始。

代码

    <b-table striped responsive hover :items="episodes" :fields="fields" :filter="filter">
           <template v-slot:cell(version_1)="data">
        <a :href="`${data.value.replace(/[^a-z]-/i,'-').toLowerCase()}`">Definition</a>
      </template>

    </b-table>
</template>
<script>
data() {

    return {
      fields: [{
          key: 'category',
          sortable: true
        },
        {
          key: 'episode_name',
          sortable: true
        },
        {
          key: 'episode_acronym',
          sortable: true
        },
        {
          key: 'version_1',
          sortable: true
        }
      ],
      episodes: [],
      versions: [],
    }

  },   
mounted() {
    return Promise.all([
        // fetch the owner of the blog
        client.getEntries({
          content_type: 'entryEpisodeDefinitions',
          select: 'fields.title,fields.category,fields.slug,fields.episodeAcronym,fields.version,sys.id'
        })

      ])
        .then(response => {
        // console.info(response[0].items); …

我想问 2 个关于BootstrapVue中的Sidebar 的问题。

<template>
  <div>
    <b-button v-b-toggle.sidebar-backdrop>Toggle sSidebar</b-button>
    <b-sidebar
      id="sidebar-backdrop"
      title="Sidebar with backdrop"
      backdrop
      shadow
    >
      <div class="px-3 py-2">
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>