Vue.js

Question

我刚开始 Vue.js，但我有点不知道这是否可行。给定以下组件：

<button class="button large primary-gradient">{{ text }}</button>

如果可能，我希望 classes "large primary-gradient" 是有条件的，取决于开发人员是否将其他 classes 添加到 HTML 中的按钮组件稍后。

例如，如果开发者写

<custom-button text="hi"></custom-button>

它应该渲染出来

<button class="button large primary-gradient">hi</button>

但是，如果开发者写道：

<custom-button class="medium secondary" text="hi"></custom-button>

它应该渲染出来

<button class="button medium secondary">hi</button>

本质上，我试图为这个按钮组件创建默认 class 值，只有在开发人员不添加自己的值时才会使用这些值。在我看来这应该很容易做到，但我对 Vue 的有限了解有点阻碍了我。感谢您的任何见解！

Answer 1

最好用道具来控制：

Vue.component('custom-button', {
  props: {
    text: String,
    size: { type: String, default: 'large' },
    type: { type: String, default: 'primary-gradient' }
  },
  computed: {
    classes: function () {
      return ['button', this.size, this.type].join(' ')
    }
  },
  template: '<button v-bind:class="classes">{{ text }}</button>'
})

用法：

<custom-button size="medium" type="secondary" text="Hi"/>

Vue.js - 默认应用 class 除非手动添加 class？

Vue.js - apply a class by default unless a class is manually added?

javascript

vue-component