vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > ant-design-vue按钮样式扩展

ant-design-vue按钮样式扩展方法详解

作者:我是好人

这篇文章主要为大家介绍了ant-design-vue按钮样式扩展方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

版本信息

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-loaderjavascriptEnabled选项

vue-cli项目参考下面代码

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

以上就是ant-design-vue按钮样式扩展方法详解的详细内容,更多关于ant-design-vue按钮样式的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文