脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → ant-design-vue按钮样式扩展

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如何获取参数方法的封装

    vue如何获取参数方法的封装

    文章介绍了如何在Vue.js中获取URL参数、定义和暴露公共方法、在main.js中引入并注册到Vue实例原型,以及页面中调用这些方法,作者分享了个人经验,希望对大家有所帮助
    2024-12-12
  • 关于VueRouter导入的全过程

    关于VueRouter导入的全过程

    这篇文章主要介绍了关于VueRouter导入的全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • Vue执行流程及渲染示例解析

    Vue执行流程及渲染示例解析

    这篇文章主要为大家介绍了Vue执行流程及渲染解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • 详解Vue中使用Axios拦截器

    详解Vue中使用Axios拦截器

    这篇文章主要Vue使用Axios拦截器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • element-ui中导航组件menu的一个属性:default-active说明

    element-ui中导航组件menu的一个属性:default-active说明

    这篇文章主要介绍了element-ui中导航组件menu的一个属性:default-active说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • vue.js 使用v-if v-else发现没有执行解决办法

    vue.js 使用v-if v-else发现没有执行解决办法

    这篇文章主要介绍了vue.js 使用v-if v-else发现没有执行解决办法的相关资料,需要的朋友可以参考下
    2017-05-05
  • vue-cli3环境变量与分环境打包的方法示例

    vue-cli3环境变量与分环境打包的方法示例

    这篇文章主要介绍了vue-cli3环境变量与分环境打包的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue项目中echarts自适应问题的高级解决过程

    vue项目中echarts自适应问题的高级解决过程

    虽然老早就看过很多echarts的例子,但自己接触的项目中一直都没有真正用到过,直到最近才开始真正使用,下面这篇文章主要给大家介绍了关于vue项目中echarts自适应问题的高级解决过程,需要的朋友可以参考下
    2023-05-05
  • 在Vue 3中使用OpenLayers读取WKB数据并显示图形效果

    在Vue 3中使用OpenLayers读取WKB数据并显示图形效果

    WKB作为一种紧凑的二进制格式,在处理和传输空间数据时具有明显优势,本文介绍了如何在Vue 3中使用OpenLayers读取WKB格式的空间数据并显示图形,感兴趣的朋友一起看看吧
    2024-12-12
  • VUE路由name的用法详解

    VUE路由name的用法详解

    name 属性是可选的,不写它似乎也“没问题”,但其实它在某些场景中非常重要,下面我们来详细说明它的作用和典型用法,感兴趣的朋友跟随小编一起看看吧
    2025-05-05

最新评论