// 簡(jiǎn)單跳轉(zhuǎn)
openExternal() {
  window.open('https://example.com', '_blank');
}

// 帶參數(shù)跳轉(zhuǎn)
openDetail(itemId) {
  const route = this.$router.resolve({
    path: '/detail',
    query: { id: itemId }
  });
  window.open(route.href, '_blank');
}

openCustomWindow() {
  window.open(
    '/popup', 
    '_blank', 
    'width=800,height=600,left=200,top=100'
  );
}

let newWindow = null;

async openAsyncContent() {
  newWindow = window.open('', '_blank');
  
  try {
    const data = await fetchData();
    newWindow.document.write(`<h1>${data.title}</h1>`);
  } catch {
    newWindow.document.write('<p>加載失敗</p>');
  }
}

<template>
  <el-dialog v-model="dialogVisible" title="詳情">
    <user-profile :user-id="selectedUserId" />
  </el-dialog>
</template>

<script setup>
const dialogVisible = ref(false);
const selectedUserId = ref(null);

function openDialog(userId) {
  selectedUserId.value = userId;
  dialogVisible.value = true;
}
</script>

import Swal from 'sweetalert2';

function showConfirm() {
  Swal.fire({
    title: '確認(rèn)刪除？',
    icon: 'warning',
    showCancelButton: true
  }).then((result) => {
    if (result.isConfirmed) deleteItem();
  });
}

<!-- CustomModal.vue -->
<template>
  <div v-if="visible" class="modal-overlay">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default { props: ['visible'] };
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
</style>

<template>
  <el-dialog v-model="iframeVisible" fullscreen>
    <iframe :src="externalUrl" style="width:100%;height:90vh;"></iframe>
  </el-dialog>
</template>

// 父窗口發(fā)送
childWindow.postMessage(
  { type: 'AUTH_TOKEN', token: 'user123' }, 
  'https://your-domain.com'
);

// 子窗口接收
window.addEventListener('message', (event) => {
  if (event.origin !== trustedOrigin) return;
  if (event.data.type === 'AUTH_TOKEN') {
    // 處理token
  }
});

// 主應(yīng)用入口
if (window.location.search.includes('popup_mode')) {
  router.addRoute({ path: '/', component: PopupLayout });
} else {
  router.addRoute({ path: '/', component: MainLayout });
}

<el-dialog>
  <Suspense>
    <AsyncComponent />
  </Suspense>
</el-dialog>

// 提前創(chuàng)建隱藏窗口
const preloadWindow = window.open('', '_blank', 'hidden=yes');

<template>
  <van-popup v-model="show" position="bottom">
    <!-- 移動(dòng)端友好內(nèi)容 -->
  </van-popup>
</template>

try {
  const win = window.open(url);
  if (!win) throw new Error('彈窗被阻止');
  
  win.addEventListener('error', handleChildError);
} catch (e) {
  // 降級(jí)方案：頁(yè)面內(nèi)彈窗
  fallbackToModal();
}