Vueは、商品の数を制御するためのコンポーネントのパッケージ化と使用を実装します。

Vueは、商品の数を制御するためのコンポーネントのパッケージ化と使用を実装します。

Vueのコントロール商品数量コンポーネントのカプセル化と使用は参考までに。具体的な内容は以下のとおりです。

効果を達成するには

製品コンポーネントパッケージの数を制御するNumbox

<テンプレート>
    <div class="xtx-numbox">
    <div class="label">
      <スロット />
    </div>
    <div class="numbox">
      <a href="javascript:;" @click='toggle(-1)'>-</a>
      <input type="text" 読み取り専用 :value="num">
      <a href="javascript:;" @click='toggle(1)'>+</a>
    </div>
  </div>
</テンプレート>
<スクリプト>
'@vueuse/core' から {useVModel} をインポートします。

エクスポートデフォルト{
  名前: 'XtxNumbox',
  小道具: {
    モデル値: {
      タイプ: 数値、
      デフォルト: 1
    },
    在庫:
      タイプ: 数値、
      必須: true
    }
  },
  セットアップ(props、{emit}){
    // サードパーティのメソッドによって制御されるデータの双方向バインディング const num = useVModel(props, 'modelValue', emitting)
    // 製品データの変更操作を制御する const Toggle = (n) => {
      (n < 0) の場合 {
        // 1つ減算する if (num.value > 1) {
          数値 -= 1
        }
      } それ以外 {
        // 1つの操作を追加 if (num.value < 10) {
          数値 += 1
        }
      }
    }
    { num, トグル } を返す
  }
}
</スクリプト>
<style スコープ lang="less">
.xtx-numbox {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  .ラベル {
    幅: 60ピクセル;
    色: #999;
    左パディング: 10px;
  }
  .nu​​mbox {
    幅: 120ピクセル;
    高さ: 30px;
    境界線: 1px 実線 #e4e4e4;
    ディスプレイ: フレックス;
    > {
      幅: 29px;
      行の高さ: 28px;
      テキスト配置: 中央;
      背景: #f8f8f8;
      フォントサイズ: 16px;
      色: #666;
      &:最初の型 {
        右境界線: 1px 実線 #e4e4e4;
      }
      &:最後の型 {
        左境界線: 1px 実線 #e4e4e4;
      }
    }
    > 入力 {
      幅: 60ピクセル;
      パディング: 0 5px;
      テキスト配置: 中央;
      色: #666;
    }
  }
}
</スタイル>

親コンポーネントで使用する

<Numbox v-model='num' >数量</XtxNumbox>
設定(){
 //商品数//デフォルト値は1
  定数num = ref(1)
  戻る {
    番号 
  }
}

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

以下もご興味があるかもしれません:
  • Vueは商品分類メニューの数量プロンプト機能を実装します

<<:  MySQL MyISAM と InnoDB の違い

>>:  Docker はクラスター MongoDB 実装手順を構築します

推薦する

フォームを送信した後、別のファイルに移動する

<br />質問:特定のファイルにジャンプするには、HTML でどのように記述すればよい...

Windows 10 での mysql-8.0.17-winx64 のインストール方法

1.公式サイトからダウンロードして解凍する参考: ダウンロード後、zip 圧縮ファイル (mysql...

Jenkins Docker 静的エージェント ノードのビルド プロセス

静的ノードはマシン上に固定されており、いくつかの固定コマンドを通じて起動されます。動的ノードには複数...

jQuery をベースにリスト ループ スクロールを実装するためのヒント (超簡単)

良いアイデアを見つけたので記録しました。私は以前、スクロール効果を実現するためにjQueryを使用し...

Dockerはコンテナ外のコンテナ内でコマンドを実行します

コンテナ内でコマンドを実行したいが、コンテナに入りたくない場合があります。ではどうすればいいでしょう...

Linux で指定されたフォルダの各サブフォルダ内のファイル数を表示する

カウントスクリプト #!/bin/sh 引数の数=$# [ $numOfArgs -ne 1 ]の場...

テンプレートタグの使用方法の詳細な説明(Vue での使用方法の概要を含む)

目次1. HTML5のテンプレートタグ2. テンプレートタグ操作のプロパティとメソッド3. Vueの...

VMware 12 での Ubuntu 16.04 インストール チュートリアル

この記事では、VMware 12でのUbuntu 16.04のインストールチュートリアルを参考までに...

MySQLデータベースのマスタースレーブレプリケーションと読み取り書き込み分離に関する詳細なチュートリアル

目次序文1. MySQL マスタースレーブレプリケーション1. サポートされているレプリケーションの...

CocosCreatorがスキル冷却効果を実装

CocosCreatorがスキルCD効果を実現多くのゲームにはスキルがあります。プレイヤーがスキルボ...

ウェブページ作成に役立つコード

<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...

マーキー要素は、スクロールするフォントや画像などの効果を実装します。

マーキー要素を使用すると、単純なフォント(画像など)のスライドやその他の効果を実現できます。コードを...

CSSを使用してアダプティブスクエアを実装する方法の例

伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...

CentOS 7 での Nginx ログタイミング分割の実装手順の詳細説明

1. 分割スクリプト (splitNginxLog.sh) を作成します。 * この例では、ログ分割...

企業サイトとコラム辞典 中国語と英語の比較 中国語と英語のバイリンガル企業サイトを作る仲間は

名前キャラクター名前キャラクター情報ニューステクノロジー技術スキンケアスキンケア補う補う香水香水化粧...