ant-design-vue按钮样式扩展方法详解
更新时间：2023年06月11日 11:37:54 作者：我是好人
这篇文章主要为大家介绍了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按钮样式的资料请关注脚本之家其它相关文章！
相关文章
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
这篇文章主要介绍了解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题2020-08-08
使用live-server快速搭建本地服务器+自动刷新的方法
下面小编就为大家分享一篇使用live-server快速搭建本地服务器+自动刷新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue-route路由管理的安装与配置,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-07-07
vue3中利用Export2Excel将数据导出为excel表格
这篇文章主要给大家介绍了关于vue3中利用Export2Excel将数据导出为excel表格的相关资料,最近项目需要前端来导出Excel操作,所以给大家总结下,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue.js实现数据动态响应，Vue.set的简单应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
在页面中经常会遇到自定义文本,如果文本过长就需要换行,在HTML中可以通过标签换行,也可以通过\n转椅字符换行,下面这篇文章主要给大家介绍了关于vue文本识别“\n”换行问题的解决方式,需要的朋友可以参考下2022-11-11
antd form表单使用setFildesValue 赋值失效的解决
这篇文章主要介绍了antd form表单使用setFildesValue 赋值失效的解决方案，具有很好的参考价值，希望对大家有所帮助。2023-04-04
这篇文章主要介绍了vuex store 缓存存储原理，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要给大家介绍了关于axios封装与传参的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
vue项目实现减少app.js和vender.js的体积操作
这篇文章主要介绍了vue项目实现减少app.js和vender.js的体积操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论