Vue彈窗載入另一個頁面

一、從Vue按鈕彈窗獨立頁面

在Vue中，我們通常使用組件實現彈窗的功能。如果我們需要在彈窗中載入另一個頁面，可以通過以下步驟實現。

首先，在Vue中創建一個組件用於彈窗，例如：

<template>
  <div class="popup">
    <h2>彈窗標題</h2>
    <p>彈窗內容</p>
  </div>
</template>

<script>
export default {
  name: 'Popup',
  data () {
    return {
      visible: false
    }
  }
}
</script>

<style>
.popup {
  width: 300px;
  height: 200px;
  background: #fff;
  border: 1px solid #ccc;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
</style>

接下來，在Vue組件中引入iframe標籤，並將其嵌入到彈窗中，例如：

<template>
  <div class="popup">
    <h2>彈窗標題</h2>
    <iframe :src="url"></iframe>
  </div>
</template>

<script>
export default {
  name: "Popup",
  data() {
    return {
      visible: false,
      url: '' // 另一個頁面的URL地址
    }
  }
}
</script>

<style>
.popup {
  width: 800px;
  height: 600px;
  background: #fff;
  border: 1px solid #ccc;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.popup iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

這樣就可以從Vue按鈕彈出一個獨立的頁面。

二、Vue頁面彈窗太多如何處理

當我們的Vue頁面中彈窗過多時，程序的性能可能會受到影響。此時，我們可以考慮使用Vue插件或第三方庫來管理彈窗。

例如，可以使用vue-js-modal插件實現彈窗管理。以下是使用vue-js-modal插件的示例：

<template>
  <div>
    <button @click="showModal">顯示彈窗</button>
    <modal v-model="show" :clickToClose="false">
      <h2>彈窗標題</h2>
        <iframe :src="url"></iframe>
    </modal>
  </div>
</template>

<script>
import VModal from 'vue-js-modal'

export default {
  name: 'App',
  data () {
    return {
      show: false,
      url: '' // 另一個頁面的URL地址
    }
  },
  methods: {
    showModal () {
      this.show = true
    }
  },
  components: {
    Modal: VModal
  }
}
</script>

這樣，我們就可以方便地管理Vue頁面中的彈窗，大大提高程序的性能。

三、Vue關閉彈窗刷新父頁面

在Vue中，如果我們需要在關閉彈窗的同時刷新父頁面，可以使用以下方法。

首先，在父頁面中傳遞一個刷新函數給子頁面，例如：

<template>
  <div>
    <button @click="showModal">顯示彈窗</button>
    <popup :show.sync="showPopup" :refresh="refresh"></popup>
  </div>
</template>

<script>
import Popup from './Popup'

export default {
  name: 'App',
  data () {
    return {
      showPopup: false
    }
  },
  methods: {
    showModal () {
      this.showPopup = true
    },
    refresh () {
      // 刷新父頁面
      location.reload()
    }
  },
  components: {
    Popup
  }
}
</script>

接著，在子頁面中獲取父頁面傳遞的刷新函數，並在關閉彈窗時調用該函數刷新父頁面，例如：

<template>
  <div class="popup">
    <h2>彈窗標題</h2>
    <iframe :src="url"></iframe>
    <button @click="$emit('close')">關閉彈窗</button>
  </div>
</template>

<script>
export default {
  name: 'Popup',
  props: ['show', 'refresh'],
  data () {
    return {
      url: '' // 另一個頁面的URL地址
    }
  },
  watch: {
    show (newVal, oldVal) {
      // 監聽彈窗顯示狀態，如果關閉彈窗則刷新父頁面
      if (!newVal && oldVal) {
        this.refresh()
      }
    }
  }
}
</script>

<style>
.popup {
  width: 800px;
  height: 600px;
  background: #fff;
  border: 1px solid #ccc;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.popup iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

這樣，每當我們關閉彈窗時，都會刷新父頁面。