この記事の例では、参考のために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 が正式にリリースされました
外部キーテーブルの主キーがどのテーブルの外部キーであるかを照会する 選択 テーブル名、 列名、 制約...
最近、 Ubuntu 20.04でkazamを使用して録音しているときに、問題が見つかりました。シス...
質問: インデックスは作成されているのに、Like ファジー クエリがまだ遅いのはなぜですか?インデ...
Weibo ユーザーのフォローを一括で解除するクールな JavaScript コードWeibo には...
背景要件: ERP システムに「ボタン権限制御」機能を追加する必要があり、権限の制御粒度をボタン レ...
目次1. コンポーネントの登録1.1 グローバル登録1.2 グローバルコンポーネントの登録プロセス1...
居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...
最近、MySQL に触れました。昨日、テーブル構造情報を格納するための新しいテーブルを作成しました。...
1.MySQL関数1. 数学関数PI() # 円周率 (pi) の値を返します。デフォルトの小数点...
目次1. 手ぶれ補正2. スロットリング3. まとめ序文:フロントエンド開発者には、次の 2 つの要...
ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...
この記事では、Echartsを使用して3次元棒グラフを実装するVueの具体的なコードを参考までに共有...
前回の記事では、docker compose を使用して FastDfs ファイル サーバーをインス...
Docker は、ブリッジ、ホスト、オーバーレイなどの複数のネットワークを提供します。同じ Dock...
目次序文No.1 焦点No.2 複雑な状態ロジックの抽出No.3 複数状態操作の抽出要約する序文Re...