Vueカスタムカプセル化ボタンコンポーネント

Vueカスタムカプセル化ボタンコンポーネント

Vueボタンコンポーネントのカスタムカプセル化コードは参考用です。具体的な内容は次のとおりです。

ボタンコンポーネントをカプセル化する button.vue

<テンプレート>
  <button class="ボタン省略記号" :class="[サイズ,タイプ]">
    <スロット />
  </ボタン>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'ボタン'、
  小道具: {
    サイズ: {
      タイプ: 文字列、
      デフォルト: 'middle'
    },
    タイプ: {
      タイプ: 文字列、
      デフォルト: 'デフォルト'
    }
  }
}
</スクリプト>
<style スコープ lang="less">
。ボタン {
  外観: なし;
  境界線: なし;
  アウトライン: なし;
  背景: #fff;
  テキスト配置: 中央;
  境界線: 1px 透明の実線;
  境界線の半径: 4px;
  カーソル: ポインタ;
}
。大きい {
  幅: 240ピクセル;
  高さ: 50px;
  フォントサイズ: 16px;
}
。真ん中 {
  幅: 180ピクセル;
  高さ: 50px;
  フォントサイズ: 16px;
}
。小さい {
  幅: 100ピクセル;
  高さ: 32px;
  フォントサイズ: 14px;  
}
.ミニ{
  幅: 60ピクセル;
  高さ: 32px;
  フォントサイズ: 14px;  
}
。デフォルト {
  境界線の色: #e4e4e4;
  色: #666;
}
。主要な {
  境界線の色: #27BA9B;
  背景: #27BA9B;;
  色: #fff;
}
。無地 {
  境界線の色:#27BA9B;
  カラー:#27BA9B;;
  背景: 明るくする(#27BA9B;,50%);
}
.グレー{
  境界線の色: #ccc;
  背景: #ccc;;
  色: #fff;
}
</スタイル>

パッケージコンポーネントの使用

<Button type="primary" style="margin-top:20px;">カスタムボタン名</Button>
<Button type="primary" style="margin-top:20px;">カートに追加</Button>

成果を達成する

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue の親コンポーネントのボタンをクリックして子コンポーネントをトリガーするイベントの詳細な説明
  • Vue クリックボタンでコンポーネント関数を動的に作成および削除する
  • Vueはパスワードの表示と非表示ボタンのカスタムコンポーネント機能を実装します
  • Vueフォーム検証ボタンイベントは親コンポーネントによってトリガーされます
  • Vue クリックボタンでサブコンポーネントの動的マウントを実現
  • Vue リップルボタンコンポーネントの制作
  • Vueはボタンコンポーネントのサンプルコードを開発します
  • Vueコンポーネントのボタンをクリックした後の入力ボックスの状態インスタンスコードを変更する

<<:  MySQL btree インデックスとハッシュ インデックスの違い

>>:  Nginx で 403 forbidden を解決するための完全な手順

推薦する

CSSは座席選択効果を実現するためにautoflow属性を使用する

1. 自動フロー属性、要素コンテンツの長さと幅が要素自体の長さと幅を超える場合、スクロールバーが表示...

Docker 構成コンテナの場所とヒントのまとめ

Docker の使用に関するヒント1. 停止したDockerコンテナをすべてクリーンアップする停止し...

vuex での mapState の考え方の応用

目次1. マップ方式2. 応用背景:需要開発プロセス中に、一部のインターフェースは、ページに表示する...

JavaScript における一般的な配列操作

目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....

mysqlはエクスポートされたデータのsqlファイルから指定されたテーブルのみをインポートすることを実装します

シナリオ昨日、システムは dbAll.sql.gz という名前の特定のデータベースのすべてのテーブル...

MySQLデッドロック問題の詳細な分析

序文私たちのビジネスがまだ初期段階にあり、同時実行の度合いが比較的低い場合、数年間はデッドロックの問...

Centos8 (最小インストール) Python3.8+pip のインストール方法に関するチュートリアル

Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...

年末ですが、MySQL パスワードは安全ですか?

序文:年末です。データベースを検査する時期ではないでしょうか?一般的に、検査では、パスワードの複雑さ...

JavaScriptタイマーとボタン効果設定の詳細な説明

タイマー効果: <div> <font id='timeCount'...

IE のテキストモード! DOCTYPE の役割の紹介

前の記事で説明したフォームの自動入力の問題を解決した後、新しい問題が発生しました。ページの一部のスタ...

jQueryはクッキーを操作する

コードをコピーコードは次のとおりです。 jQuery.cookie = 関数(名前、値、オプション)...

JS+AJAX は、州、市、地区のドロップダウン リストのリンクを実現します。

この記事では、州、市、地区のドロップダウンリストのリンクを実現するためのJS + AJAXの具体的な...

Centos7.5 構成 Java 環境のインストール Tomcat の説明

Tomcat は Java 言語をベースにした Web サーバー ソフトウェアです。この記事では主に...

display または visibility を通じて HTML 要素を表示または非表示にする

場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...

MySQL ストアド プロシージャの権限の問題の概要

MySQL ストアド プロシージャは、確かに、非常にまれな使用シナリオのように見えます。この問題は、...