标签: bootstrap-vue

我正在构建一个 Trivia 应用程序，并且有一个<h1>每 10 秒更改一次的元素。b-form-group我想将单选按钮组组件（是Bootstrap-Vue 组件）的宽度与元素的宽度相匹配<h1>。像这样的东西：

我尝试在值发生变化时watchers进行更新。但是，使用此代码，按钮组的宽度似乎与上一个问题的宽度而不是当前问题的宽度匹配。我还尝试了其他属性，例如, , 。我只是无法让它正常工作。有没有更简单的方法来匹配两个元素的宽度？buttonWidthquestionupdatedmountedcreated

<template>
  <div>
    <div id="question">
       <h1 ref="quest">{{ question }}</h1>
    </div>

    <b-form-group>
      <b-form-radio-group :style=getWidth
        ref="opts"
        :options="options"
        buttons
        stacked
        button-variant="outline-primary"
        size="lg"
        name="radio-btn-stacked"
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

在我的脚本下我有：

export default {
  props: ['question', 'options'],
  data() {
    return {
      buttonWidth: '0 px',
    };
  },
  methods: {
  },
  watch: {
    question() {
      // console.log('Updating button width to ', this.$refs.quest.clientWidth);
      this.buttonWidth = `width: …

标题说明了一切。我想用输入框过滤我的引导表。

这是我的组件的.html部分：

<b-table
:items="Table"
:fields="fields"
striped
small
>

</b-table>

这是.vue文件

<template src="./jointable.component.html"> </template>
<style scoped src="./jointable.component.css"> </style>


<script>

import axios from 'axios'

export default {
    name: 'jointable',
    data(){
        return {
            Table: [],
            fields: [
                {key: 'client_id', label: "School Code", sortable: true},
                {key: 'client_name', sortable: true},
                {key: 'uuid', label: "ID", sortable: true},
                {key: 'step', label: "Job Running", sortable: true},
                {key: 'serverid', sortable: true},
                {key: 'create_timestamp', label: "Job Start", sortable: true},
                {key: 'time_elapsed', sortable: true},
                {key: 'wh_db_host', sortable: …

我在 bootstrap-vue 中创建了一个按钮，最初在其上显示一个右箭头图标，当鼠标悬停在上面时，它会扩展一些文本，一切正常，除了我的图标和文本彼此粘在一起，所以我尝试留一些边距展开按钮以在文本和图标之间添加一些空间，但是在悬停时，它关闭按钮时会出现一些故障，或者不太顺利，因为它试图返回到无边距状态。我的代码如下，实时代码位于CodeSandbox

我的问题是有没有一种方法可以让 CSS 变得流畅？

<template>
<div>
    <b-card>
      <template v-slot:footer>
        <b-button id="buttonId" size="sm" pill variant="outline-info">
          <b-icon icon="arrow-right-circle" variant="danger"></b-icon>
          <span>View details</span>
        </b-button>
      </template>
    </b-card>
  </div>
</template>

<script>
export default {};
</script>

<style>
button span {
  max-width: 0;
  -webkit-transition: max-width 1s;
  transition: max-width 0.5s;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
}
button:hover span {
  max-width: 7rem;
  margin-left: 0.3rem
}
</style>

我正在尝试向资源时间线中的事件添加弹出窗口，我想知道正确的方法是什么。

我在 Vue ^2.6.11 中使用 fullcalendar/vue ^5.3.1 和 bootstrap-vue 的 ^2.1.0 。

读完这个问题后，我有以下内容，这似乎有效，但似乎不是正确的方法。

propsData我认为这是and的使用.$mount()让人感觉一定有更好、更惯用的方法？另外，内容好像也不能做成html？

在组件中：

<script>
    import { BPopover } from 'bootstrap-vue'
</script>

在日历选项中：

eventDidMount: function (info) {
    new BPopover({
        propsData: {
            title: info.event.extendedProps.title,
            content: info.event.extendedProps.projectName,
            triggers: 'hover',
            target: info.el,
        }
    }).$mount()
}

任何想法都非常感激。
非常感谢。

我创建了一个显示各个页面的表格数据的组件。该组件内部使用b-table。现在，对于几个页面，我想自定义某些列的呈现，Bootstrap Tables 允许使用具有特殊语法的作用域字段槽：

    <template #cell(field)="data">
            {{ data.item.value }}
    </template>

其中 field - 列名称，来自我的包含列的数组，以及 data.item - 要呈现的单元格项目。

问题是我对不同的页面有不同的字段，因此这种自定义应该来自父组件，并且这些模板应该动态创建。

这是我尝试解决它的方法：

通过属性将具有可自定义字段和唯一插槽名称的数组传递给 MyTableComponent 在 MyTableComponent 中动态创建用于自定义的模板，并在内部动态创建命名插槽

从父传递槽数据到命名槽

我的表组件：

    <b-table>
        <template v-for="slot in myslots" v-bind="cellAttributes(slot)">
            <slot :name="slot.name"></slot>
        </template>
    </b-table>

    <script>
        ...
        computed: {
            cellAttributes(slot) {
                return ['#cell(' + slot.field + ')="data"'];
            }
        }
        ...
    </script>

家长：

    <MyTableComponent :myslots="myslots" :items="items" :fields="fields">
        <template slot="customSlot1">
                Hello1
        </template>
        <template slot="customSlot1">
                Hello2
        </template>
    </MyTableComponent>

<script>
    ...
    items: [...my items...],
    fields: [...my columns...],
    myslots: [
        { field: "field1", …

我想展开表格的行，如屏幕截图所示。如何更改表格的宽度？\n有什么方法可以将类添加到表格中吗？

我想要

    logTableField: [\n  { key: "LogDate", label: "Tarih",thClass: \'bg-white text-dark\' },\n  { key: "LogUser", label: "Analist" },\n  { key: "Description", label: " \xc4\xb0\xc5\x9flem A\xc3\xa7\xc4\xb1klamas\xc4\xb1" },\n  { key: "LogText", label: "Kullan\xc4\xb1c\xc4\xb1 Yorumu" },\n],\n\n           <b-tab title="Kay\xc4\xb1t Loglar\xc4\xb1" v-if="this.Logs != null">\n          <b-table\n            id="logTable"\n            striped\n            hover\n            :items="Logs"\n            :fields="logTableField"\n            per-page="10"\n            :current-page="currentPageLog"\n          >\n            <template slot="Description" slot-scope="row">\n              <div v-html="row.item.Description"></div>\n            </template>\n          </b-table>\n          <b-pagination\n            v-model="currentPageLog"\n            :total-rows="Logs.length"\n            per-page="10"\n            aria-controls="my-table"\n          ></b-pagination>\n        </b-tab>\n

尽管我得到了问题的解决方案，但我对其解决方式有点不满意。有没有办法让这件事变得更简单？比如，理想情况下我会有类似的 html，我唯一要做的就是调用 api 来获取教师并立即将它们分配给他们，this.teachers而不必遍历它们来创建一些新对象的无类型数组。

HTML：

    <b-form-select 
        v-model="selectedTeacher"
        :options="teachers"
        value-field="teacher" //NOT teacher.id, I want the object itself
        text-field="teacher.name">
    </b-form-select>

JS

    var dbTeachers: Teacher[] = await getTeachers();
    
    dbTeachers.forEach(teacher => {
        this.teachers.push(new Object({
            teacher: teacher ,
            name: teacher.name
        }));
    });

我正在做一个 Vue 作业。对于样式，我使用BootstapVue。我需要实现的是，每当用户在输入字段中输入文本时，包含该值的过滤数组应显示为下拉列表。用户可以按 Enter 键或从下拉列表中选择值。如果输入文本不在数组中，则用户应该无法输入该值，即可能无法创建标签。例如，每当我们在 Stack Overflow 中创建问题时，在输入标签并输入建议卡或从建议卡中进行选择时。我需要类似的功能，除了如果输入文本不在建议数组中，用户将无法创建标签

这是我到目前为止所尝试过的：

应用程序.vue

<template>
  <div>
    <b-form-tags
      v-model="value"
      @input="resetInputValue()"
      tag-variant="success"
      :state="state"
    >
      <template v-slot="{ tags, inputId, placeholder, addTag, removeTag }">
        <b-input-group>
          <b-form-input
            v-model="newTag"
            list="my-list-id"
            :id="inputId"
            :placeholder="placeholder"
            :formatter="formatter"
            @keypress.enter="addTag(newTag)"
          ></b-form-input>
        </b-input-group>
        <b-form-invalid-feedback :state="state">
          Duplicate tag value cannot be added again!
        </b-form-invalid-feedback>
        <ul v-if="tags.length > 0" class="mb-0">
          <li
            v-for="tag in tags"
            :key="tag"
            :title="`Tag: ${tag}`"
            class="mt-2"
          >
            <span class="d-flex align-items-center">
              <span class="mr-2">{{ tag }}</span>
              <b-button
                size="sm"
                variant="outline-danger"
                @click="removeTag(tag)"
              >
                remove tag
              </b-button>
            </span>
          </li>
        </ul> …

我有一个简单的bootstrap-vue modal带有 input text. 我想要按Ok按钮不会自动关闭，所以我使用“阻止”。然后我进行一些验证，然后我希望它使用“隐藏”方法关闭。然而它对我不起作用。奇怪的是 show 方法确实工作得很好。我查看了文档，找不到错误所在。那时我该如何让 hide 方法为我工作？\n这是我的代码。

<template>\n  <div>\n    <b-button\n      size="sm"\n      class="m-2"\n      variant="primary"\n      @click="grfGuardarBtnPredefAccions()"\n      >Guardar gr\xc3\xa1fica personalizada</b-button\n    >\n\n    <b-modal\n      id="grfModalGuardar"\n      ref="grfGuardarModal"\n      title="Insertar nombre"\n      @ok.prevent="grfModalOk"\n      @cancel="grfModalCancel"\n    >\n      <p>\n        Debe asignar un nombre a la gr\xc3\xa1fica personalizada que desea guardar.\n      </p>\n      <b-form-input\n        v-model="grfModalPersoName"\n        placeholder="Escriba aqu\xc3\xad ..."\n      ></b-form-input>\n    </b-modal>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: "GrafTopMenu",\n  components: {\n    GrafEditor,\n  },\n  data() {\n    return {\n      // almacena el nombre que el usuario le pone a la gr\xc3\xa1fica personalizada …

我给<td>b-table元素的标签赋予样式有问题。

这是模板：

    <b-table
      :fields="fields"
      :items="items"
      class="mx-1 mt-2"
      v-if="items && items.length > 0"
    >
      <template
        slot="email"
        slot-scope="row"
      >
        <div :title="row.item.email">
          <p class="user-email">{{row.item.email}}</p>
        </div>
      </template>
    </b-table>

这是字段：

    fields: [
      { key: "email", label: "Email"},
      { key: "user", label: "Name" },
      { key: "role", label: "Role" }
    ],

我想给<td>此表的最大宽度为300px 。请帮忙！