Vue2用のフレキシブルボタン

アプリケーションのさまざまな場所で再利用できるVue2のボタンコンポーネントを作成する方法の例。

まず、このボタンがどのように表示され、何ができるかを想像してみましょう。

すでにvue-cliを介して(またはこのツールを使用せずに)プロジェクトを立ち上げたと想像してください。また、スタイルの最終バージョンを用意しました。Githubリポジトリで見つけることができます。

例として使用したアイコンはマテリアルアイコンですが、少なくともSVGでは他のアイコンに置き換えることができます。

では、始めましょう。

s で新しいファイルを作成します。このファイルには、ボタンが表示されます。コードスタイルが示すように名前を付けましょう。 BaseButton.vue

次に、コンポーネントの1つでボタンを使用しましょう。私のルートコンポーネントは App.vue なので。使用します。

プロジェクトを開始すると、通常のボタンが表示されます。現在、内部のテキストを変更できないか、何らかの形で影響を及ぼしています。最初に書いた最終的なスタイルを使用した場合、この段階のこのボタンはプレーンテキストのように見えますが、すぐに変更されます。

次に、ボタン内のテキストを変更する機能を追加しましょう。これを行うにはいくつかの方法があります。 小道具スロットの2つを同時に使用します:

ボタンが機能することを確認するために、いくつかのオプションでボタンを表示します

すばらしい。ボタンがユーザー入力をサポートするようになりました。

ボタンのサイズと色を制御する機能を追加しましょう。 Vueプロップもこの実装に適しています。しかし、ここでさらに検証を追加します。はい、ボタンはいくつかの色とサイズのみをサポートします。スタイルがない色とサイズをブロックする必要があります。

そしてもちろん、結果を確認します

検証に失敗したサイズを追加した場合にどうなるかを確認することもできます。

もちろん、ボタンをクリックした後、何らかのメソッドを実行しないように、ボタンをロックできるはずです。たとえば、ユーザーのリストを取得するためにサーバーにリクエストを送信します。

そして、ユーザーが待つ必要があることを理解できるように、読み込みアニメーションを追加します。

ポイントの1つは、リンクのボタンを変更したり、ルーターリンクなどの別のコンポーネントを使用したりできることです。これを行うために、特別な属性がであるのを支援します。

結果を見てみましょう。これで、ボタンだけでなくリンクも作成できるようになりました。独自の属性を受け入れるボタンの代わりに、任意のコンポーネントを挿入できます。これで問題ありません。

最後に追加する必要があるのは、アイコンを追加する便利な方法です。もちろん、デフォルトのスロットからアイコンを追加することもできますが、この方法を単純化して、特定のスタイルを構成することもできます。アイコンに他のコンポーネントがある場合は、それらを構成します。

また、迅速(小道具)で柔軟な方法(スロット)を作成します。 小道具の場合、アイコンの名前が完成した結果になるようにHTML /クラスを準備します。スロットについては、マテリアルアイコンではなく、SVGを使用するか、スタイルを管理するためのオプションをさらに使用します。

その結果、多くの小道具やスロットを転送できるコンポーネントを作成しました。それらを組み合わせて、ユニークなボタンを手に入れましょう。

たとえば、特定のスタイルが適用されるフラット小道具を追加することで改善することもできます。

デモ:http://alexeykhr.github.io/vue-flexible-button