关于ant-design-vue:扩展antdesignvue的按钮样式的方法

版本信息

ant-design-vue 1.x

ant-design-vue目前是提供了这些款式

而后我感觉应该有个很常见的是须要一个黄色正告的按钮

冀望的用法当然就是type="warning"啦。

话不多说，间接上代码。

在我的项目里增加一个less文件

@import '~ant-design-vue/lib/style/themes/default.less';@import '~ant-design-vue/lib/button/style/mixin.less';.create-type(@type,@bgColor,@textColor:white) {  .ant-btn {    &-@{type} {      .button-variant-primary(@textColor;@bgColor);    }    &-background-ghost&-@{type} {      .button-variant-ghost(@bgColor);    }  }}.create-type(warning, #ffae00);

而后就能够在我的项目中这样应用了

<a-button type="warning">warning</a-button><a-button type="warning" ghost>warning+ghost</a-button>

注意事项

须要开启less-loader的javascriptEnabled选项

vue-cli我的项目参考上面代码

module.exports = {    css:{        loaderOptions:{            less:{                javascriptEnabled:true            }        }    }}