标签: bootstrap-vue

我很确定我只是不明白如何实现 Vue 的Event Modifiers。根据该文档，我所要做的就是添加以下内容：

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

以下是我如何将示例解释为我的哈巴狗代码：

b-dropdown(text="Actions")
  b-dropdown-item
    b-form(inline)
      .row
        .col
          b-input(@click.stop='' placeholder="#123")
          b-button(:href='printCheck' variant="primary") Print Check

它看起来很简单，但它并没有按预期工作。如果您需要更多支持信息，请询问。并随意调整标题；我不确定我的问题是 vue、bootstrap-vue 还是 javascript 问题。

感谢您提前抽出时间，
凯文

我已经尝试在 vue.js 组件中翻译我的表头几个晚上，但它对我不起作用。可能这是因为我是 Vue.js 的新手，并且可能我忘记了一些东西，但我无法找到线索。HTML 措辞中的翻译工作正常，但一旦我想翻译脚本标记中的属性（例如数据属性），我就会收到控制台错误，无法找到某些字段。

我所做的，首先我在 main.js 中初始化了 i18n 组件

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import axios from './api'
import VueAxios from 'vue-axios'
import VueI18n from 'vue-i18n'

Vue.use(BootstrapVue)
Vue.use(VueAxios, axios)
Vue.prototype.$axios = axios;

Vue.use(VueI18n)

// Ready translated locale messages
const messages = {
    en: require('./locales/en_GB.json'),
    nl: require('./locales/nl_NL.json')
}

  // Create VueI18n instance with options
  const i18n = new VueI18n({
    locale: 'nl', // set locale
    fallbackLocale: 'en',
    messages // …

使用 Vue.js 2.6.10 和 BootstrapVue 2.0.0-rc.20 并尝试在单击单个文件组件中的单独按钮时以编程方式显示下拉列表。

<template lang='pug'>
div
  b-button(@click='loginShow') Test
  b-dropdown(id='login-dropdown', ref='dropdown', text='Login')
    b-dropdown-item(to='/login') Login
    b-dropdown-item(to='/signup') Sign up
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { BDropdown } from 'bootstrap-vue';

@Component
export default class Login extends Vue {

  private loginShow(e: any): void {
    const dropdown = this.$refs.dropdown as BDropdown;
    dropdown.visible = true;
  }
}
</script>

知道发生了什么吗？

在 vue/cli / "bootstrap-vue": "^2.1.0" 中使用https://bootstrap-vue.js.org/docs/components/table我没有找到如何为所有列设置对齐并将其更改为任何列。我试过：

<b-card-body>
        <b-table responsive="sm" striped hover small :items="users" :fields="usersFields" align-v="end">
            <template v-slot:cell(id)="data">
                <div class="-align-right">{{ data.value }}</div>
            </template>

            <template v-slot:cell(status)="data"  >
                <div class="-align-left">{{ getDictionaryLabel( data.value, userStatusLabels ) }}</div>
            </template>

但由于所有列都居中而失败。

如何正确？

我尝试为maxLength来自 的输入实现 a bootstrap-vue，但是从我从他们的文档中读取的内容来看，他们不支持 max. 如果我删除type="number"，它可以工作，但不再是一个数字。

    <b-form-input
        size="sm"
        v-model="register_volume_first"
        type="number"
        maxlength=4
        placeholder="1902"
    ></b-form-input>

如何将导航栏组件放在中心？这是我第一次这样做，我大部分都没有问题，但我似乎无法解决这个问题，所以它看起来并不奇怪

<template>
  <div class="container">
    <header>
      <h1>GIF'S APP</h1>
      <form>
        <span class="font-semibold mr-2 text-left flex-auto text-white">Search for the coolest gifs</span>
        <div>
          <b-nav-form>
            <b-input-group>
              <b-form-input id="input-small" size="sm" type="text" v-model="search" />
              <b-button class="btn-success" type="button" v-on:click="searchNewGifs()">Search</b-button>
              <div class="gifs--container">
                <Gif v-for="gif in gifs" v-bind:key="gif.id" v-bind:data="gif"></Gif>
              </div>
              <b-button
                class="btn-success"
                type="button"
                v-if="!stopNextPage"
                v-on:click="getNextPage()"
              >Next Page</b-button>
            </b-input-group>
          </b-nav-form>
        </div>
      </form>
    </header>
  </div>
</template>

我需要在我的 bootstrapvue 项目中更改此颜色，但我不知道如何更改。

主要次要成功信息警告危险光暗

是否有垂直对齐我的内容的最佳方法？我有 3 个按钮，我想垂直对齐。

        <b-container>
            <b-row>
                <b-col><b-button class="main-navigation-button" variant="primary">Create</b-button></b-col>
                <b-col><b-button class="main-navigation-button" variant="primary">Search</b-button></b-col>
                <b-col><b-button class="main-navigation-button" variant="primary">Edit</b-button></b-col>
            </b-row>
        </b-container>

我正在对应用程序执行我的第一个“移动优先”方法（通常从桌面开始，过去使用 CSS 媒体查询按我的方式工作），并想知道在当今响应式开发环境中处理以下场景的最佳方法是什么：

我有一个像这样的组件：

<b-form-spinbutton id="sb-vertical" v-model="value" inline></b-form-spinbutton>

我希望上面的组件仅在设备低于某个断点时显示（假设低于 720px）。

然后，任何大于我想显示以下组件的视口：

<b-form-spinbutton id="sb-vertical" v-model="value" vertical></b-form-spinbutton>

注意上面代码中的vertical和inline道具。

这些最好留给传统的 CSS 媒体查询，还是我们能够使用模板条件（即 v-if？等）。

我想我会达成共识，因为我将根据收到的对此问题的任何反馈从头开始构建我的应用程序。谢谢！

            <div class="text-center">
            <b-modal visible centered id="send-pin-modal" header="test" title="Confirm Approval" hide-footer hide-header-close no-close-on-backdrop no-close-on-esc>
                <div class="col-12 text-center">
                    <!--<p class="col-12">After being approved, the disbursement cannot be undone.</p>-->
                </div>
                <div class="col-12">
                    <div class="ml-5 mr-5">
                    <b-form-input  type="password" id="pin-input" v-model="pin"  required></b-form-input>
                    </div>
                </div>
                <div class="col-12 text-center">
                    <slot name="pin-error" class="text-danger text-center" v-show="comment">{{comment}}</slot>
                </div>
                <div class="col-12">
                </div>
                <div class="col-12 text-center">
                    <b-button variant="primary" size="sm" class="mt-2 mr-2" @click="verifyPin">Continue</b-button>
                    <b-button  variant="danger" size="sm" class="mt-2 ml-2" @click="hidePinModal">Cancel</b-button>
                </div>
            </b-modal>
        </div>

这是我的 bootstrapVue 示例代码。我还附上了输出图像。

如何将标题“确认批准”设为中心？