Vue.js，Bootstrap，自定义 _rowVariant 颜色（custom.scss）

Question

我希望能够在 vue 中为我的表格添加自定义颜色作为背景

这是我的 .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>

如您所见，我正在尝试从 Array 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> 元素，其类为b-table（以及其他一些引导程序特定的类）。默认情况下，此元素没有background-color，但:dark="true" 的情况除外，它将background-color: #343a40; 应用于它。

这意味着

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

...会起作用的。

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

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

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

---

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

customized-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"，它会将类 table-badass 应用于该行的所有单元格，并且在您的 CSS 中，您应该：

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