この記事の例では、参考のために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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.11 のインストールと設定方法のグラフィックチュートリアル MySQL 8.0 の新しいパスワード認証方法
>>: Red Hat Enterprise Linux 8 をベースにした CentOS 8 が正式にリリースされました
インライン形式<colgroup>...</colgroup>属性名 属性値...
今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...
目次ドラッグアンドドロップの実装ドラッグイベントドラッグして開始リリースゾーンでの移動境界処理、角度...
目次HTTP ハイジャック、DNS ハイジャック、XSS HTTPハイジャックDNSハイジャックXS...
質問会社がサーバーを移行した後、デフォルトで作成された docker0 ブリッジが会社の外部ネットワ...
テーブルの基本構文<table>...</table> - テーブルを定義し...
ここでは、dockerがインストールされたcentosサーバーを紹介し、リモートリンクサービスを開始...
Dockerでdocker search centosを使用する場合docker pull dock...
履歴書コード: XML/HTML コードコンテンツをクリップボードにコピー<!DOCTYPE ...
1. MySQLをインストールする(1)ダウンロードしたMySQLの圧縮ファイルをMySQLをインス...
この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...
HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 HTML ...
React の経験がある人なら、コンポーネントインスタンスオブジェクトや DOM オブジェクトを取得...
序文以前は、キャッシュを使用してルートを強調表示していました。すべてのルートをトラバースし、クリック...
2017 年に Vulhub に取り組み始めてから、私は厄介な問題に悩まされてきました。Docker...