Vue カスタム箇条書きボックス効果 (確認ボックス、プロンプトボックス)

Vue カスタム箇条書きボックス効果 (確認ボックス、プロンプトボックス)

この記事の例では、参考のためにVueカスタムポップアップ効果の具体的なコードを共有しています。具体的な内容は次のとおりです。

1. 確認ボックスとプロンプトボックスをカスタマイズする

渡されたタイプに基づいて、確認ボックスかプロンプトボックスかを判断します。

<テンプレート>
  <transition name="確認フェード">
    <div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')">
      <div class="confirm-content-wrap" @click.stop>
        <h3 class="my-confirm-title" v-show="titleText != ''">{{ titleText }}</h3>
        <p class="my-confirm-content">{{ コンテンツ }}</p>
        <div class="my-operation">
          <div v-if="type==='confirm'" class="my-cancel-btn" @click="clickFun('clickCancel')">
            <p class="my-btn-text my-border-right">{{ cancelText }}</p>
          </div>
          <div class="confirm-btn" @click="clickFun('clickConfirm')">
            <p class="my-btn-text">{{ 確認テキスト }}</p>
          </div>
        </div>
      </div>
    </div>
  </トランジション>
</テンプレート>
 
<script type="text/ecmascript-6">
エクスポートデフォルト{
  データ () {
    戻る {
      isShowConfirm: false, // ウィンドウ全体の表示/非表示を制御するために使用します titleText: '操作のヒント', // プロンプト ボックスのタイトル content: '何か言ってください...', // プロンプト ボックスのコンテンツ cancelText: 'キャンセル', // キャンセル ボタンのテキスト confirmText: '確認', // 確認ボタンのテキスト type: 'confirm', // ポップアップ ボックスのタイプを示します: confirm - 確認ポップアップ ウィンドウ (キャンセル ボタン付き); alert - 通知ポップアップ ボックス (キャンセル ボタンなし)
      outerData: null // 外部から送信されたデータを記録するために使用されます。また、userBehavior およびイベント関数を監視して、どのイベントがトリガーされたかを判断するためにも使用できます。}
  },
  メソッド: {
    表示(コンテンツ、設定){
      this.content = content || '何か言ってください...'
 
      if (Object.prototype.toString.call(config) === '[object オブジェクト]') {
        // ユーザーがオブジェクトを渡すことを確認します this.titleText = config.titleText || ''
        this.cancelText = config.cancelText || 'キャンセル'
        this.confirmText = config.confirmText || '確認'
        this.type = config.type || '確認'
        this.outerData = config.data || null
      }
 
      this.isShowConfirm = true
    },
    隠れた () {
      this.isShowConfirm = false
      this.titleText = '操作のヒント'
      this.cancelText = 'キャンセル'
      this.confirmText = '確認'
      this.type = '確認'
      this.outerData = null
    },
    clickFun (タイプ) {
      this.$emit('userBehavior', type, this.outerData)
      this.hidden()
    }
  }
}
</スクリプト>
 
<スタイルスコープ>
.my-confirm {
  位置: 固定;
  上: 0;
  左: 0;
  右: 0;
  下部: 0;
  背景色: rgba(0, 0, 0, 0.5);
  zインデックス: 998;
  /* これにより、ユーザーが画面を長押ししたときに黒い背景が表示されなくなり、iPhone が水平で平らなときにフォントのスケーリングの問題が発生するのを防ぎます*/
  -webkit-テキストサイズ調整: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 
/*アニメーションの開始と終了*/
.confirm-fade-enter-active {
  アニメーション: 不透明度 0.3 秒;
}
.confirm-fade-enter-active .confirm-content-wrap {
  アニメーション: スケール 0.3 秒;
}
.confirm-fade-leave-active {
  アニメーション: 出力不透明度 0.2 秒;
}
 
/* ラッピングレイヤーコンテナスタイル */
.confirm-content-wrap {
  位置: 絶対;
  トップ: 28%
  左: 0;
  右: 0;
  幅: 280ピクセル;
  マージン: 0 自動;
  背景色: #fff;
  境界線の半径: 5px;
  zインデックス: 999;
  ユーザー選択: なし;
}
 
/* 上部タイトルセクション */
.my-confirm-title {
  パディング上部: 20px;
  テキスト配置: 中央;
  フォントサイズ: 20px;
  フォントの太さ: 500;
  色: #333;
}
 
/* 中間コンテンツ部分 */
.my-確認内容{
  パディング: 0 15px;
  パディング上部: 20px;
  下部マージン: 32px;
  テキスト配置: 中央;
  フォントサイズ: 16px;
  色: #666;
  行の高さ: 1.5;
}
 
/* 下部ボタンのスタイル */
.my-操作 {
  ディスプレイ: フレックス;
  上境界線: 1px 実線 #eee;
}
.my-operation .my-cancel-btn、.confirm-btn {
  フレックス: 1;
}
.my-operation .confirm-btn {
  色: #ffb000;
}
.my-操作 .my-btn-テキスト {
  テキスト配置: 中央;
  フォントサイズ: 16px;
  マージン: 8px 0;
  パディング: 6px 0;
}
 
/* その他の装飾スタイル*/
.my-border-right {
  右境界線: 1px 実線 #eee;
}
 
/* 着信アニメーション*/
@keyframes 不透明度 {
  0% {
    不透明度: 0;
  }
  100% {
    不透明度: 1;
  }
}
@keyframesスケール{
  0% {
    変換: スケール(0);
  }
  60% {
    変換: スケール(1.1);
  }
  100% {
    変換: スケール(1);
  }
}
 
/* 終了アニメーション */
@keyframes 不透明度 {
  0% {
    不透明度: 1;
  }
  100% {
    不透明度: 0;
  }
}
</スタイル>

2. 電話:

(1)プロンプトボックスの使用:

<ダイアログビュー ref="myDialog" @userBehavior="changeData"></ダイアログビュー>
…
//プロンプトボックス this.$refs.myDialog.show(content, {
        タイプ: 'アラート'、
        確認テキスト: 'OK'、
        cancelText: 'キャンセル',
        タイトルテキスト: ''、
        データ: null
      })

効果:

(2)確認ボックス:

this.$refs.myDialog.show('この商品を利用しますか?', {
            タイプ: '確認'、
            confirmText: '今すぐ交換',
            cancelText: '結構です',
            タイトルテキスト: ''、
            データ: {ショップ: ショップ、操作: '交換'}
          })

効果:

確認ボックスが押されたとき: changeData

<ダイアログビュー ref="myDialog" @userBehavior="changeData"></ダイアログビュー>
    …
 
    changeData (タイプ、データ) {
      console.log('changeData',データ)
      if (type === 'clickConfirm') {
        if (data.operate === 'exchange') {
          // this.reduceEnergy(data.shop)
          this.exchangeCoupon(data.shop)
        } そうでない場合 (data.operate === 'downLoad') {
          window.location = データ.url
        } そうでない場合 (data.operate === 'ログイン') {
          this.uplusApi.upVdnModule.goToPage({url: 'mpaas://usercenter'})
          this.isLogin = false
        }
      }
},

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

以下もご興味があるかもしれません:
  • Vue チュートリアル トースト ポップアップ ボックス グローバル呼び出し例 詳細な説明
  • vue.js でのトーストの使用法とトーストポップアップボックスを使用したサンプルコード
  • 複数の箇条書きボックスのポップアップフォームの Vue のサンプルコード
  • Vue+iviewはポップアップボックスのサンプルコードを書きます
  • Vueでシンプルなポップアップダイアログを実装する方法
  • Vueは箇条書きボックスマスクを実装し、他の領域をクリックして箇条書きボックスを閉じ、v-ifとv-showの違いを導入します。
  • Vue+elementuiは、テーブル内のセルをクリックしてイベント(箇条書きボックス)をトリガーすることを実現します。
  • Vue プロジェクトで element-ui の箇条書きボックス効果を模倣するサンプル コード
  • Vue.jsはポップアップウィンドウを一度だけ実装します
  • Vue の弾丸ボックスによるスクロール貫通問題の解決策

<<:  MySQL 8.0.11 のインストールと設定方法のグラフィックチュートリアル MySQL 8.0 の新しいパスワード認証方法

>>:  Red Hat Enterprise Linux 8 をベースにした CentOS 8 が正式にリリースされました

推薦する

HTML テーブルインライン形式の詳細な説明

インライン形式<colgroup>...</colgroup>属性名 属性値...

Web アプリ開発時間を短縮する 10 の時間を節約するヒント (グラフィカル チュートリアル)

今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...

Vueは視覚的なドラッグページエディタを実装します

目次ドラッグアンドドロップの実装ドラッグイベントドラッグして開始リリースゾーンでの移動境界処理、角度...

フロントエンドセキュリティの詳細な説明: JavaScript の http ハイジャック対策と XSS

目次HTTP ハイジャック、DNS ハイジャック、XSS HTTPハイジャックDNSハイジャックXS...

Dockerカスタムブリッジdocker0とdockerのコマンド操作の開始、終了、再起動

質問会社がサーバーを移行した後、デフォルトで作成された docker0 ブリッジが会社の外部ネットワ...

テーブルタグ(TAGS)の詳細な紹介

テーブルの基本構文<table>...</table> - テーブルを定義し...

クラウド CentOS で Docker リモート サービス リンクを有効にするための実装手順

ここでは、dockerがインストールされたcentosサーバーを紹介し、リモートリンクサービスを開始...

Dockerコンテナの中国語言語パックの設定の問題を解決する

Dockerでdocker search centosを使用する場合docker pull dock...

個人履歴書を作成するための HTML の簡単な実装

履歴書コード: XML/HTML コードコンテンツをクリップボードにコピー<!DOCTYPE ...

MySQL を解凍してインストールおよび完全に削除する方法の詳細なグラフィック説明

1. MySQLをインストールする(1)ダウンロードしたMySQLの圧縮ファイルをMySQLをインス...

正規表現に基づくあいまい文字列置換を実装するMySQLの方法の分析

この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...

HTML_PowerNode 入門 Java アカデミー

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 HTML ...

ReactにおけるuseRefの具体的な使い方

React の経験がある人なら、コンポーネントインスタンスオブジェクトや DOM オブジェクトを取得...

Vueコンポーネントのルーティング強調表示問題の解決策

序文以前は、キャッシュを使用してルートを強調表示していました。すべてのルートをトラバースし、クリック...

Dockerイメージのサイズを縮小する6つの方法

2017 年に Vulhub に取り組み始めてから、私は厄介な問題に悩まされてきました。Docker...