Question

我正在尝试使用VueJS创建一个简单的按钮组件。在该按钮上，我有一个size道具，我希望能够采用以下五个选项之一：

xsmall
smalll
中
大
xlarge

我希望能够根据选择的值设置几个类。因此，如果我选择xsmall，则将添加类px-3 py-1。如果我选择small，则将添加类px-4, px-2，依此类推。

现在，我找到了一种使它起作用的方法，但我想知道是否有任何更简单/更好的方法来实现此目的。

这是我的代码：

// template
 <button :class="[
  size === 'xsmall' ? xsmall : '',
  size === 'small' ? small : '',
  size === 'medium' ? medium : '',
  size === 'large' ? large : '',
  size === 'xlarge' ? xlarge : ''
 ]">Click Me</button>

// props
size: {
  type: String,
  default: "medium"
}

// data
  xsmall: "px-3 py-1",
  small: "px-4 py-2",
  medium: "px-6 py-3",
  large: "px-8 py-3",
  xlarge: "px-10 py-4",

我的问题与所有这些size === 'xsmall ...`三元表达式有关。在我看来，不是那么干，也不是那么优雅。有更简洁的方法吗？

谢谢。

Answer 1

我认为您可以将其混合使用：

@Component
class SizeMixin extends Vue {
    @Prop({default: "medium"}) readonly size!: Sizes;

    medium: string = "px-6 py-3";
    //...Sizes;
    get classList(){
       return this[this.size] || "";
    }
}

是的，您可以使用计算的来返回特定的数据值，而不用在模板中求值。

上面我使用了类样式组件语法

用法是

<template>
  <div :class="classList"></div>
</template>

@Component
class CustomComponent extends Mixins(SizeMixin){

  // override medium value
  medium = "px-3 py-3"
  
}

Answer 2

使用对象进行映射：

// template
<button :class="sizemap[size]">Click Me</button>

data: function() {
  return {
    sizemap: {
      xsmall: "px-3 py-1",
      small: "px-4 py-2",
      medium: "px-6 py-3",
      large: "px-8 py-3",
      xlarge: "px-10 py-4"
    }
  }
}

VueJS中Prop的默认选项

2 个答案: