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

<テンプレート>
  <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;
  }
}
</スタイル>

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

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

<ダイアログビュー 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
        }
      }
},