自定义 bootstrap-vue 组件答案

【问题标题】：Customizing bootstrap-vue components自定义 bootstrap-vue 组件
【发布时间】：2019-01-03 22:32:10
【问题描述】：

与少数开发人员一起启动大型应用程序。使用 webpack 和 bootstrap-vue。我将如何默认（和其他组件）的样式。换句话说，我可以默认：

<b-card>

相当于：

<b-card style="max-width: 40rem;" header-bg-variant="primary" header-text-variant="white">

确保我们在整个应用程序中保持外观一致。

【问题讨论】：

或者是让我自己的组件，我的卡，这对他们来说是默认的吗？
您可以通过 SCSS 变量控制 Bootstrap 的 CSS（需要在构建步骤中添加 sass loader）。并且您还可以创建自定义 CSS 文件以在覆盖类样式的 bootstrap/bootstrap-vue css 文件之后加载....card { max-width: 40rem }
考虑制作一个包装b-card的自定义组件，它将默认插槽传递给b-card，并将首选道具/样式应用于b-card

标签： bootstrap-vue

【解决方案1】：

您可以使用 SCSS/CSS 覆盖来控制 b-card 布局，或者扩展/包装组件以默认您想要的道具：

import { BCard } from 'bootstrap-vue'

export default {
  name 'MyCard',
   // Create as a functional component wrapper
  functional: true,
  // define our props (borrow from BCard)
  props: {
    ...BCard.props,
  },
  render(h, { props, data, children }) {
    return h(
      BCard,
      {
        props: {
          // Pass all props to BCard
          ...props,
          // Override the following prop defaults (if not provided)
          headerBgVariant: props.headerBgVariant || 'primary',
          headerTextVariant: props.headerBgVariant || 'white'
        },
        // Pass any additional (optional) attributes down
        attrs: data.attrs,
        // Set the style
        style: {
          // merge in any styles manually applied
          ...data.style,
          // Set the max-width if not explicitly set
          maxWidth: data.style.maxWidth || '40rem'
        }
      }
    )
  }
}

有关功能组件和渲染功能的更多信息，请参阅https://vuejs.org/v2/guide/render-function.html#Functional-Components

要使用功能组件处理更复杂的数据合并，请查看https://github.com/alexsasharegan/vue-functional-data-merge

【讨论】：