脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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按钮样式的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 基于elementUI使用v-model实现经纬度输入的vue组件

    基于elementUI使用v-model实现经纬度输入的vue组件

    这篇文章主要介绍了基于elementUI使用v-model实现经纬度输入的vue组件,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-05-05
  • Vue3+Vite实现动态路由的详细实例代码

    Vue3+Vite实现动态路由的详细实例代码

    我们在开发大型系统的时候一般都需要动态添加路由,下面这篇文章主要给大家介绍了关于Vue3+Vite实现动态路由的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 详解Vue实战指南之依赖注入(provide/inject)

    详解Vue实战指南之依赖注入(provide/inject)

    这篇文章主要介绍了详解Vue实战指南之依赖注入(provide/inject)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 基于Vue3文件拖拽上传功能实现

    基于Vue3文件拖拽上传功能实现

    这篇文章主要介绍了Vue3文件拖拽上传功能,支持拖拽到此区域上传，支持选择多个文件/文件夹，代码很简单，对vue3拖拽上传功能感兴趣的朋友一起看看吧
    2022-10-10
  • iview+vue实现导入EXCEL预览功能

    iview+vue实现导入EXCEL预览功能

    这篇文章主要为大家详细介绍了iview+vue实现导入EXCEL预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 一文教会你快速上手vue的登录界面(最新版)

    一文教会你快速上手vue的登录界面(最新版)

    几乎每个项目都会使用登录页面,这篇文章主要给大家介绍了如何通过一文教会你快速上手vue的登录界面,文中通过实例代码介绍的很详细,需要的朋友可以参考下
    2022-11-11
  • vue+elementUi图片上传组件使用详解

    vue+elementUi图片上传组件使用详解

    这篇文章主要为大家详细介绍了vue+elementUi图片上传组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-08-08
  • 老生常谈vue2中watch的使用

    老生常谈vue2中watch的使用

    watch的基本用法是在Vue实例中定义一个watch对象,该对象内部包含需要监听的数据项和对应的回调函数，这篇文章主要介绍了vue2中watch的使用,需要的朋友可以参考下
    2024-01-01
  • uni-app 使用编辑器创建vue3 项目并且运行的操作方法

    uni-app 使用编辑器创建vue3 项目并且运行的操作方法

    这篇文章主要介绍了uni-app 使用编辑器创建vue3 项目并且运行的操作方法,目前uniapp 创建的vue3支持 vue3.0 -- 3.2版本 也就是说setup语法糖也是支持的，需要的朋友可以参考下
    2023-01-01
  • vue3 数组清空与重新赋值的操作代码

    vue3 数组清空与重新赋值的操作代码

    这篇文章主要介绍了vue3 数组清空与重新赋值的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09

最新评论