vue elementui 按鈕樣式修改

Vue.js是一種用於建立互動式網頁應用程式的JavaScript框架，而ElementUI則是基於Vue.js的UI框架。

作為常用的前端UI框架之一，ElementUI提供了許多方便開發人員使用的元件，其中按鈕元件是我們通常會用到的，但是有時候預設的按鈕樣式可能無法滿足專案或需求的要求，這時候我們就需要進行按鈕樣式的修改。本文將介紹如何用樣式修改按鈕樣式。

ElementUI中按鈕的樣式可以透過以下方式修改：

1.透過類別名稱來修改

ElementUI的按鈕元件有幾種預設的樣式類別供開發者使用，例如primary、danger、warning、info、success等。我們可以透過這些類別名稱來改變按鈕的顏色和樣式。

<el-button type="primary">primary</el-button>
<el-button type="danger">danger</el-button>
<el-button type="warning">warning</el-button>
<el-button type="info">info</el-button>
<el-button type="success">success</el-button>

這裡的type即為按鈕的樣式類別名稱。

我們也可以透過自訂類別名稱來實現修改樣式：

<el-button class="my-btn">Custom</el-button>

.my-btn{
  background-color: #409EFF;
  color: #fff;
}

2.透過內聯樣式來修改

透過內聯樣式來修改按鈕樣式也是可行的方法，透過為按鈕元件新增style屬性即可實現：

<el-button style="background-color: #409EFF; color: #fff;">Custom</el-button>

3.透過修改全域樣式

如果需要套用到整個專案中的所有按鈕，我們可以透過修改ElementUI中的全域樣式來實現。在Vue中，我們可以透過新建一個.scss檔並在專案入口檔中引入來修改ElementUI的樣式。

以下是一個修改ElementUI按鈕樣式的範例：

// 引入ElementUI的sass全局变量和mixin
@import "~element-ui/packages/theme-chalk/src/common/var.scss";
@import "~element-ui/packages/theme-chalk/src/mixins/mixins.scss";

// 改写ElementUI的变量
$--color-primary: #409EFF;
$--border-radius-base: 4px;

// 自定义按钮样式
.el-button {
  &.my-btn {
    background-color: $--color-primary;
    border: none;
    box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.45);
    color: #fff;
    &:hover {
      background-color: #66b1ff;
      box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.65);
    }
  }
}

在上述範例中，我們透過修改ElementUI的全域變數來改變主題色和按鈕圓角的大小，然後定義自己的按鈕樣式，並添加了懸浮時的動態效果。使用自訂class名，來覆寫ElementUI原有的樣式，達到修改按鈕的樣式的目的。

總結

以上就是幾種針對ElementUI按鈕元件修改樣式的方法，我們可以透過這些方法來實作自訂的樣式。只需要根據具體需求來選擇相應的修改方法，使頁面達到更好的效果。

以上是vue elementui 按鈕樣式修改的詳細內容。更多資訊請關注PHP中文網其他相關文章！