Vue.js、Bootstrap、自定义 _rowVariant 颜色 (custom.scss)

Question

我希望能够在 vue

中为我的 table 添加自定义颜色作为背景

这是我的 .vue 文件：

<template>
....
  <b-table small :fields="fields" :items="items">
    <template #cell(name)="data">
      <b>{{ data.value.name }}</b>
    </template>
    ....    
  </b-table>
....
<template>

<script>
export default {
  data () {
    return {
      items: [
          { name: { name: '....', url: '....' }, utility: '....', icon: '../assets/.....png', _rowVariant: 'light' },
          { name: { name: '....', url: '....' }, utility: '....', icon: '../assets/.....png', _rowVariant: 'success' },
          { name: { name: '....', url: '....' }, utility: '....', icon: '../assets/.....png', _rowVariant: 'danger' },
          { name: { name: '....', url: '....' }, utility: '....', icon: '../assets/.....png', _rowVariant: 'custom-one' }
      ],
      tableVariants: ['primary', 'secondary', 'info', 'danger', 'warning', 'success', 'light', 'dark','custom-one', 'custom-two', 'custom-three' ],
..........
</script>

<style lang="scss" scoped>
@import '../scss/custom.scss';
.........
</style>

如您所见，我正在尝试从数组 tableVariant.

中声明的 $theme-colors 导入

我的 custom.scss 文件：

$purple:  #6f42c1 !default;
$porpora: #75151e !default;
$orange:  #fd7e14 !default;


$theme-colors:(
  "custom-one": $orange,
  "custom-two": $purple,
  "custom-three": $porpora
);

@import "../../node_modules/bootstrap/scss/bootstrap";

如何添加 _rowVariant 自定义颜色？谢谢！

Answer 1

<b-table> 元素生成 <table> 元素，class 为 b-table（以及其他一些 bootstrap 特定 classes ).默认情况下，此元素没有 background-color，但 :dark="true" 的情况除外，它对其应用 background-color: #343a40;。

这意味着

.b-table {
  background-color: red;
}

...会起作用。

将 red 更改为您想要的颜色。如果您的颜色是深色，请将 :dark="true" 传递给 <b-table>，这将相应地更改文本颜色和 cell/row 边框颜色。

另外，如果你只想在一个特定的 table 上使用它，请给它一个 id 或 class 并使用该选择器使规则仅适用于该元素（以上将适用它到所有 <b-table> 个元素）。

请注意，这不会影响您使用 _cellVariant and/or _rowVariant 设置行和单元格样式的能力。

如果您想继续定义额外的 bootstrap 颜色变体，请按以下步骤操作：

定制-bootstrap.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// removes the colors, if you don't use them
$colors: map-remove($colors,
  "blue", "indigo", "purple", "pink", "red", "orange", "yellow",
  "green", "teal", "cyan", "white", "gray", "gray-dark"
);

// adds custom colors, should you want any:
$colors: (
  "orange": #f50,
  "red": #BC2E2E,
  "green": #8CB439,
  "yellow": #DEC648
);

// removes theme-colors you don't want:
$theme-colors: map-remove($theme-colors,
  "warning", "info", "light", "dark"
);

// adds theme-colors you want. Note this this is not assigned
// it is merged with the difference between defaults and the ones removed above
// so, for example, `$secondary`, `$danger` will still be present.
$theme-colors: (
  "primary": #f50,
  "light": #DDDEE1,
  "dark": #15161a,
  "badass": #BADA55
);

// import the functionality you want (and remove the stuff you don't want).
// from `~bootstrap/scss/bootstrap`, except the first three 
// `functions`, `variables` and `mixins`, 
// which you already imported and used above

@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";

//... all the way down to `~bootstrap/scss/print`

显然，在您的 main.(js|ts) 中，您必须替换

import 'bootstrap/dist/css/bootstrap.css'

与

import './path/to/customized-bootstrap.scss'

现在您可以在您应用的任何元素上使用 var(--badass)，结果将变成 #BADA55。
例如，如果您提供一行：_rowVariant: "badass"，它会将 class table-badass 应用到该行的所有单元格，并且在您的 CSS 中，您应该:

.table-badass {
  background-color: var(--badass);
  color: var(--light);
}

Vue.js、Bootstrap、自定义 _rowVariant 颜色 (custom.scss)

Vue.js, Bootstrap, custom _rowVariant color (custom.scss)

sass

vue.js

bootstrap-4

bootstrap-vue