版本信息
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
}
}
}
}
相关文章
暂无评论...