vue elementuiボタンスタイルの変更

Vue.js はインタラクティブな Web アプリケーションを構築するための JavaScript フレームワークであり、ElementUI は Vue.js に基づく UI フレームワークです。

一般的に使用されるフロントエンド UI フレームワークの 1 つとして、ElementUI は開発者が使用するのに便利な多くのコンポーネントを提供します。通常はボタン コンポーネントを使用しますが、デフォルトのボタン スタイルがプロジェクトに適合しない場合があります。要件に応じて、現時点ではボタンのスタイルを変更する必要があります。この記事では、スタイルを使用してボタンのスタイルを変更する方法を紹介します。

ElementUI のボタンのスタイルは、次の方法で変更できます:

1. クラス名を使用して変更します

ElementUI のボタン コンポーネントには、いくつかのデフォルトのスタイル クラスがあります。開発者が使用するための用途 (プライマリ、危険、警告、情報、成功など)。これらのクラス名を使用してボタンの色とスタイルを変更できます。

<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>

ここでの型は、ボタンのスタイル クラス名です。

クラス名をカスタマイズしてスタイルを変更することもできます:

<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 のグローバル変数を変更することによって、テーマの色とボタンの角丸サイズを変更します。独自のボタン スタイルを定義し、ホバリング時の動的な効果を追加しました。カスタム クラス名を使用して ElementUI の元のスタイルを上書きし、ボタンのスタイルを変更します。

概要

上記は、ElementUI ボタン​​ コンポーネントのスタイルを変更するいくつかの方法です。これらのメソッドを使用して、カスタマイズされたスタイルを実装できます。ページ上でより良い結果を得るには、特定のニーズに応じて対応する変更方法を選択するだけです。

以上がvue elementuiボタンスタイルの変更の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。