Vue はカスタム「モーダル ポップアップ ウィンドウ」コンポーネントのサンプル コードを実装します

<テンプレート>
  <トランジショングループ名='フェード'>
    <!-- ポップアップウィンドウを終了-->
    <div class="quit_dialog"
         キー= "1"
         @click="isQuit = false"
         v-if="isQuit"
         @touchmove.prevent>
    </div>
    <div class="quit_box"
         v-show="isQuit"
         キー="2">
      <img :src="画像URL"
           :alt="img読み込みヒント">
           <div class="quit_title">{{title}}</div>
      <p>{{コンテンツ}}</p>
      <button class="quit_btn" @click="leftClick">{{btnText}}</button>
      <button class="quit_close" @click="rightClick">{{rightText}}</button>
    </div>
  </トランジショングループ>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'ポップアップ'、
  データ （） {
    戻る {
      isQuit: false、
      画像URL: ''、
      タイトル： ''、
      コンテンツ： ''、
      btnテキスト: ''、
      右テキスト: ''
    }
  },
  メソッド: {
    左クリック（）{
      this.leftBtn()
      this.isQuit = false
    },
    右クリック（）{
      this.rightBtn()
      this.isQuit = false
    }
  }
}
</スクリプト>
<style lang="scss" スコープ>
// ポップアップウィンドウを終了します。フェードイン、
.フェードアウトアクティブ{
  不透明度: 0;
}
.フェード-エンター-アクティブ、
.フェードアウトアクティブ{
  遷移: 不透明度 0.35 秒;
}
// グローバルポップアップ window.quit_dialog {
  背景: rgba(0,0,0,.5);
  位置: 固定;
  上: 0;
  左: 0;
  高さ: 100%;
  幅: 100%;
  zインデックス: 10000;
}
 
.quit_box {
  幅: 700ピクセル;
  背景: #fff;
  位置: 固定;
  上位: 50%;
  左: 50%;
  左マージン: -350px;
  上マージン: -190px;
  zインデックス: 10001;
  境界線の半径: 10px;
  テキスト配置: 中央;
  パディング: 50px;
  画像{
    幅: 80ピクセル;
  }
 .quit_title{
      色: #666;
      フォントサイズ: 28px;
      マージン: 45px 0px;
  }
  ボタン {
    境界線の半径: 32px;
    パディング:20px 0px;
    フォントサイズ: 26px;
    境界線の半径: 8px;
    幅: 214px;
  }
  .quit_btn{
    色: #03BA82;
    背景: #fff;
    境界線: 1px 実線 #03BA82;
    右マージン: 32px;
  }
  .quit_close {
    背景: 線形グラデーション(0度, #03BA82, #01D695);
    ボックスの影: 0px 3px 4px 0px rgba(1, 84, 58, 0.27);
    境界線: 1px 実線 #03BA82;
    色: #fff;
  }
}
</スタイル>

'vue' から Vue をインポートします
'../components/QuitDialog/QuitDialog' から Grasp をインポートします。
 
const PopupBox = Vue.extend(Grasp)
 
Grasp.install = 関数 (データ) {
  インスタンス = 新しい PopupBox({
    データ
  }).$マウント()
 
  document.body.appendChild(インスタンス.$el)
 
  Vue.nextTick(() => {
    インスタンス.isQuit = true
    // isQuit はポップアップ コンポーネントの isQuit に対応し、可視性を制御するために使用されます})
}
 
デフォルトのGraspをエクスポート

'vue' から Vue をインポートします
'./api/quitDialog' からポップアップをインポートします。
Vue.prototype.$popup = ポップアップ.インストール

メソッド: {
    つかみボタン（）{
      これを$grasp({
        imgUrl: require('../../assets/home/quits.png'), // トップ画像。
        imgLoadTip: '画像を読み込んでいます...',
        内容: 「温かいヒント」
        タイトル: 「注意: この学習タスクは完了していません。終了することを確認しますか?」
        btnText: 「残酷な退場」、
        rightText: 「勉強を続ける」
        // 左クリックイベント leftBtn: () => {
          this.$store.dispatch('user/logout').then(() => {
            this.$signalr.LogoutPad()
            this.$signalr.SendMsg(2, 0, 'システムを終了')
            this.$router.push('/login')
          })
        },
        // 右クリックイベント rightBtn: () => {}
      })
    }
}