vue封装按钮时，怎么添加disabled的样式？

Question

按钮组件里根据传入type作为类来设定了几个颜色，如果是禁用，要加opacity为0.1，这个样式应该写在哪里？

<button :class="type" :disabled="disabled" @click="clickBtn">
    <slot></slot>
</button>


.primary {
  background-image: linear-gradient(-89deg, #000000 0%, #474e58 100%);
}
.primary_red{
    background-image: linear-gradient(-89deg, #DC1E32 0%, #FB6760 99%);
}

Answer 1

:class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"

拿element的btn源码来举例子就是在class里面判断是否disable来加一个类is-disabled。

Answer 2

background: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));

参考
CSDN-css-背景色透明并且渐变
MDN-linear-gradient

Answer 3

可以使用在标签上使用

<button :class="type" :disabled="disabled" @click="clickBtn" :style="buttonStyle(type)">

buttonStyle的可以根据Type来返回一个对象，对象里面可以key：value的形式来写一些样式