标签: buefy

我看到以下 CSS 代码似乎是一个大于选择器的三倍。

.b-table >>> .table-wrapper {
  overflow-x: auto; 
}

I know it's referencing a Buefy table component and applying a specific style to elements that have a table-wrapper class, but what does the >>>operator mean exactly? Based off this answer I'm thinking it might be for applying styles to children of children of children, is that accurate? If so, why doesn't it seem to work with other amounts of >?

I have been looking for a way to drag and drop rows on a Bootstrap Vue table. I was able to find a working version here: Codepen

I have tried to implement this code to my own table:

Template:

<b-table  v-sortable="sortableOptions" @click="(row) => $toast.open(`Clicked ${row.item.name}`)"  :per-page="perPage" :current-page="currentPage"  striped hover :items="blis" :fields="fields" :filter="filter" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" @filtered="onFiltered">
    <template slot="move" slot-scope="row">
        <i class="fa fa-arrows-alt"></i>
    </template>

    <template slot="actions" slot-scope="row">
        <b-btn :href="'/bli/'+row.item.id" variant="light" size="sm" @click.stop="details(cell.item,cell.index,$event.target)"><i class="fa fa-pencil"></i></b-btn>
        <b-btn variant="light" size="sm" @click.stop="details(cell.item,cell.index,$event.target)"><i class="fa fa-trash"></i></b-btn>
    </template> …

我正在使用Buefy CSS框架，该框架提供了自定义的vue-js组件（例如<b-input>和）<b-table>，并且在测试<b-input>代码时遇到了问题。

import { shallowMount, createLocalVue } from '@vue/test-utils'
import BInputPractice from '../BInputPractice.vue'
import Buefy from 'buefy'

const localVue = createLocalVue()
localVue.use(Buefy)

describe('b-input Practice', () => {
  it('updates the name data property', () => {
    const wrapper = shallowMount(BInputPractice, { 
      localVue,
      stubs: {
        'b-input': Buefy.Input
      } 
    })
    const input = wrapper.find('input')
    input.element.value = 'a name'
    input.trigger('input')
    expect(wrapper.vm.name).toBe('a name')
  })
})

<!-- BInputPractice.vue -->
<template>
  <div>
    <b-input v-model="name"></b-input>
    <!-- <input v-model="name"> -->
  </div>
</template>

<script> …

我正在尝试将我的项目从bulma + jQuery切换到buefy。我从 CDN加载了buefy、vue和font awesome。(buefy@0.6.7, vue@2.5.17, font awesome 5.2.0)。我对图标的主要问题。我的项目使用字体真棒图标。并且默认的 buefy iconPack 是 Material Design。它必须支持字体真棒。我试图更改默认图标包，但这没有任何作用：

Vue.use(Buefy.default, {
    defaultIconPack: 'fas',
});

同样没有：

Vue.use(Buefy, {
    defaultIconPack: 'fas',
});

所以我需要为每个图标明确指出图标包。

第二个问题是，即使在这种情况下，buefy 也会补充fa-lg说我根本不需要。例如对于 b-tab-item 组件

<b-tab-item label="Similarity" icon="search" icon-pack="fas"></b-tab-item>

它呈现：

<i class="fas fa fa-search fa-lg"></i>

是否有可能改变这种笨拙的行为？

我正在处理 Buefy 输入字段并寻找一种方法来告诉我任何表单字段是否有任何错误。快速输入文档

<b-field horizontal label="Title">
  <b-input
    v-model="model.title"
    name="title"
    type="text"
    minlength="10"
    required>
  </b-input>
</b-field>

<b-field horizontal label="Description">
  <b-input
    v-model="model.description"
    name="description"
    type="textarea">
  </b-input>
</b-field>

如果没有可用的方法，那么我们如何编写自定义方法来确定它。这将有助于在其他用例中禁用提交方法等。

我正在尝试使用 BootrapVue 同时使用 buefy 的 b-table 组件。我猜 BootstrapVue 也有一个名为 b-table 的组件，它会导致冲突并导致 buefy 的表无法正常工作。当我删除 BootstrapVue 时，Buefy 表会正确显示。我是 vue 新手，我不确定如何解决这样的命名空间冲突，或者是否可能。

main.js

import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);

import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
Vue.use(Buefy)

元数据表.js

<template>
  <div>
    <!-- BootstrapVue -->
    <b-modal id="metadata-modal" title="Metadata" size="lg">
      <p class="my-4">
        <table style="text-align:left">
          <tbody>
            <tr v-for="(value,key) in current_metadata">
              <td style="vertical-align:top;font-weight:bold;">{{key}}&nbsp</td>
              <td><code><pre>{{JSON.stringify(value, null, 2)}}</pre></code></td>
            </tr>
          </tbody>
        </table>
      </p>
    </b-modal>
    <!-- Buefy -->
    <b-table
        :data="data"
        paginated
    >
      <template slot-scope="props">
          <b-table-column field="metadata.title" label="Title" sortable>
              {{ props.row.metadata.title }}
          </b-table-column>
      </template>
    </b-table>
  </div> …

我的目标是让用户只输入 [0-9] 中的数字，甚至不允许使用小数

怎么做？

编码

<b-input expanded
    type="number"
    v-model="amount"
    @input="updateValue()"
    placeholder="{{ amount }}">
</b-input>

该<b-input>是buefy https://buefy.github.io/documentation/input/

我需要更改 bulma CSS 占位符的颜色。我可以使用下面的代码作为不是 bulma 的正常输入的占位符，

::-webkit-input-placeholder {
  color: blue !important;
}

但它不适用于由 bulma 供电的 buefy 输入字段。我想让你知道我已经为 bulma 编辑设置了 sass 并且它工作正常，但我不知道输入字段类的占位符来切换它。

在 Buefy 导航栏组件项元素有

<b-navbar-item href="/job">
            job
</b-navbar-item>

它呈现标准的ahtml 标签。单击时，页面重新加载。我想在nuxt-link没有重新加载页面的情况下使用Nuxt 标签。

这段代码有效，但我的 css 设计 Bulma 导航栏坏了。

<b-navbar-item >
    <nuxt-link to="/job">
        Job
    </nuxt-link>
</b-navbar-item>

我是这方面的初学者，我正在努力改变 buefy 元素的风格。特别是buefy选项卡。

在我的组件中，我有这种风格：

<style lang="scss" scoped>

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your own stuff
$my-primary: red;
$link: red;
$colors: (
  "primary": ($min-primary, $primary-invert)
);

$tabs-toggle-link-border-color: red;
$tabs-toggle-link-border-style: red;
$tabs-toggle-link-hover-background-color: red;
$tabs-toggle-link-hover-border-color: red;
$tabs-toggle-link-active-background-color: red;
$tabs-toggle-link-active-border-color:red;
$tabs-toggle-link-active-color: $link-invert !default;

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
</style>

我的标签格式如下：

<b-tabs type="is-toggle" size="is-medium" expanded>

链接颜色和原色按预期更改。但标签保持其原始颜色。

有两件事我觉得很奇怪：

1. 如果我将此样式移动到 App.vue 并删除“范围”-样式不起作用。但是 - 原色和链接颜色变为紫色（不像我预期的那样是绿宝石色，如果我只是从组件中删除 $colors 就会发生这种情况）。我认为添加到 App.vue 的所有样式都适用于所有组件？
2. 为什么标签不改变颜色？我弄错了变量吗？我如何找到正确的变量？此处使用的变量位于 bulma/sass/components/tabs.sass 中。

node-sass 和 sass-loader 都安装了。

希望有人能让我感觉更开明:-)