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 {
    &amp;-@{type} {
      .button-variant-primary(@textColor;@bgColor);
    }
    &amp;-background-ghost&amp;-@{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按鈕樣式擴展方法詳解的詳細內(nèi)容，更多關于ant-design-vue按鈕樣式的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

vue如何獲取參數(shù)方法的封裝
文章介紹了如何在Vue.js中獲取URL參數(shù)、定義和暴露公共方法、在main.js中引入并注冊到Vue實例原型,以及頁面中調(diào)用這些方法,作者分享了個人經(jīng)驗,希望對大家有所幫助
2024-12-12
關于VueRouter導入的全過程
這篇文章主要介紹了關于VueRouter導入的全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue執(zhí)行流程及渲染示例解析
這篇文章主要為大家介紹了Vue執(zhí)行流程及渲染解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
詳解Vue中使用Axios攔截器
這篇文章主要Vue使用Axios攔截器，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
element-ui中導航組件menu的一個屬性:default-active說明
這篇文章主要介紹了element-ui中導航組件menu的一個屬性:default-active說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue.js 使用v-if v-else發(fā)現(xiàn)沒有執(zhí)行解決辦法
這篇文章主要介紹了vue.js 使用v-if v-else發(fā)現(xiàn)沒有執(zhí)行解決辦法的相關資料,需要的朋友可以參考下
2017-05-05
vue-cli3環(huán)境變量與分環(huán)境打包的方法示例
這篇文章主要介紹了vue-cli3環(huán)境變量與分環(huán)境打包的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
vue項目中echarts自適應問題的高級解決過程
雖然老早就看過很多echarts的例子,但自己接觸的項目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關于vue項目中echarts自適應問題的高級解決過程,需要的朋友可以參考下
2023-05-05
在Vue 3中使用OpenLayers讀取WKB數(shù)據(jù)并顯示圖形效果
WKB作為一種緊湊的二進制格式,在處理和傳輸空間數(shù)據(jù)時具有明顯優(yōu)勢,本文介紹了如何在Vue 3中使用OpenLayers讀取WKB格式的空間數(shù)據(jù)并顯示圖形,感興趣的朋友一起看看吧
2024-12-12
VUE路由name的用法詳解
name 屬性是可選的,不寫它似乎也“沒問題”,但其實它在某些場景中非常重要,下面我們來詳細說明它的作用和典型用法,感興趣的朋友跟隨小編一起看看吧
2025-05-05