[超简单]Ant Design Vue (antdv) Butt

以前写过一篇，不是很简单，趁着有时间又简化了一下

在公共style中添加样式即可：(在main.js/main.ts中import的公共样式表中添加)

.ant-btn {
  &.orange {
    &, &:active, &.active {
      color: #fff!important;
      background-color: #ff9900!important;
      border-color: #ff9900!important;
    }
    &:hover, &:focus {
      background-color: #ffad33!important;
      border-color: #ffad33!important;
    }
    &[disabled] {
      .color-disabled
    }
  }
  &.green {
    &, &:active, &.active {
      color: #fff!important;
      background-color: #19be6b!important;
      border-color: #19be6b!important;
    }
    &:hover, &:focus {
      background-color: #47cb89!important;
      border-color: #47cb89!important;
    }
    &[disabled] {
      .color-disabled
    }
  }
  &.light-blue {
    &, &:active, &.active {
      color: #fff;
      background-color: #2db7f5;
      border-color: #2db7f5;
    }
    &:hover, &:focus {
      background-color: #57c5f7;
      border-color: #57c5f7;
    }
    &[disabled] {
      .color-disabled
    }
  }
  &.red {
    &, &:active, &.active {
      color: #fff;
      background-color: #ed4014;
      border-color: #ed4014;
    }
    &:hover, &:focus {
      background-color: #f16643;
      border-color: #f16643;
    }
    &[disabled] {
      .color-disabled
    }
  }
}

然后在使用时

<a-button class="orange">橘色</a-button>

这样，想要什么颜色在样式中定义就可以了，使用时直接class="样式名"

上一次发布了一个自定义的，当时没想那么多，有点麻烦，这个显然自定义起来更方便，使用时也更方便。希望对大家有所帮助.