bootstrap-vue - 自定义 bootstrap-vue 组件

Question

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

<b-card>

相当于：

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

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

Answer 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