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-loader
的javascriptEnabled
选项
vue-cli
项目参考下面代码
module.exports = { css:{ loaderOptions:{ less:{ javascriptEnabled:true } } } }
以上就是ant-design-vue按钮样式扩展方法详解的详细内容,更多关于ant-design-vue按钮样式的资料请关注脚本之家其它相关文章!
相关文章
vue2.0 computed 计算list循环后累加值的实例
下面小编就为大家分享一篇vue2.0 computed 计算list循环后累加值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03使用Bootstrap + Vue.js实现添加删除数据示例
本篇文章主要介绍了使用Bootstrap + Vue.js实现 添加删除数据示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。2017-02-02vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
这篇文章主要介绍了vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀的相关知识,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧2018-06-06vue中实现支持txt,docx,xlsx,mp4格式文件预览功能(纯前端)
对于Vue你可以实现文件的预览功能,这篇文章主要给大家介绍了关于vue中实现支持txt,docx,xlsx,mp4格式文件预览功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
最新评论