vue3实现在浏览器之外打开新窗口，新窗口只有原来的一半并且居中显示

首先在router下的index.js添加路由地址

    {
        name: 'design-preview',
        path: '/design-preview',
        component: () => import('../views/design-preview.vue')
    },

然后在方法中调用

//点击按钮
function clicek() {
		localStorage.setItem('data_model', res.data.tuzhiDataJson); //用来给新页面获取数据
     openCenteredWindow('/design-preview', 1400, 800);
    }

//以下是js方法
let windowName;
// 在新窗口中打开目标页面，居中显示
export function openCenteredWindow(url, width, height) {
    if (!windowName || windowName.closed) {
        const {left, top} = calculateCenterPosition(width, height);
        windowName = window.open(url, '_blank', `width=${width}, height=${height}, left=${left}, top=${top}`);
    }else {
        // 如果窗口已经存在，则将其置为焦点,不重新打开新窗口
        windowName.location.reload();//刷新页面，如果没有刷新需求，则不需要这段
        windowName.focus();	//将其置为焦点
    }
}

// 计算居中位置
function calculateCenterPosition(width, height) {
    const screenWidth = window.screen.width;
    const screenHeight = window.screen.height;
    const left = (screenWidth - width) / 2;
    const top = (screenHeight - height) / 2;
    return {left, top};
}
    
 // 在组件销毁时关闭新窗口
onBeforeUnmount(() => {
  //关闭窗口
  if (windowName){
    windowName.close();
  }
});

// 监听页面即将刷新的事件
window.addEventListener('beforeunload', function (event) {
  //关闭窗口
  if (windowName){
    windowName.close();
  }
});

然后在新窗口页面中获取数据

function getParentData(){
  const attributeDoneJson = localStorage.getItem('data_model');
  if (attributeDoneJson) {
    const doneJson = JSON.parse(attributeDoneJson);
    }

最终打开效果就是这样