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

定制Bootstrap-Vue组件

1 个答案: