定制bootstrap-vue组件

Question

用几个开发人员启动一个大型应用程序。使用webpack和bootstrap-vue。如何为(和其他组件)默认样式。换句话说，我可以默认：

<b-card>

等同于：

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

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

Answer 1

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

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