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

news2024/11/16 11:41:54

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

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

然后在方法中调用

//点击按钮
function clicek() {
      openCenteredWindow('/attribute', 1400, 800);
    }
// 计算居中位置
    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 };
    }

    // 在新窗口中打开目标页面,居中显示
    function openCenteredWindow(url, width, height) {
      const { left, top } = calculateCenterPosition(width, height);
      window.open(url, '_blank', `width=${width}, height=${height}, left=${left}, top=${top}`);
		//通过这个方式给子页面传递值
      localStorage.setItem('attributeDoneJson', JSON.stringify(globalStore.done_json));
    }
    

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

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

最终打开效果就是这样
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1408405.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

live555在拉流时应对多路码流传输带宽问题的几种处理思路

处理带宽管理和调整的机制 Live555库本身并没有直接处理带宽管理和调整的机制,因为它主要是一个用于实现RTSP流媒体服务器和客户端的库,而带宽管理通常是在应用层进行处理的。但Live555支持一些基础协议,这些协议可以在应对带宽问题时进行使用…

qt初入门6:QChar和QString相关接口练习

简单了解编码: ​ latin1(ISO 8859-1)字符集是对ASCII基本字符集的扩展,都是1字节编码。 Unicode编码有多重存储方案,utf-8使用1~4字节编码,最少1字节;utf-16使用2-4字节编码,最少2字…

Zabbix 整合 Prometheus:案例分享与操作指南

一、简介 Zabbix 和 Prometheus 都是流行的开源监控工具,它们各自具有独特的优势。Zabbix 主要用于网络和系统监控,而 Prometheus 则专注于开源的分布式时间序列数据库。在某些场景下,将这两个工具整合在一起可以更好地发挥它们的优势&#…

树,二叉树及其相关知识

1.树概念及结构 1.1树的概念 树是一种非线性的数据结构,它是由n(n>0)个有限结点组成一个具有层次关系的集合。把它叫做树是因 为它看起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的。 有一个特殊的结点&#…

Eyes Wide Shut? Exploring the Visual Shortcomings of Multimodal LLMs

大开眼界?探索多模态模型种视觉编码器的缺陷。 论文中指出,上面这些VQA问题,人类可以瞬间给出正确的答案,但是多模态给出的结果却是错误的。是哪个环节出了问题呢?视觉编码器的问题?大语言模型出现了幻觉&…

redis集群 —— 高性能

文章目录 前言节点1.1 启动节点 槽指派2.1 记录节点的槽指派信息2.2 传播节点的槽指派信息2.3 记录集群所有槽的指派信息 在集群中执行命令3.1 计算键属于哪个槽3.3 节点数据库的实现 重新分片复制与故障转移 前言 Redis集群是Redis提供的分布式数据库方案,集群通过…

vp9协议笔记

vp9协议笔记📒 本文主要是对vp9协议的梳理,协议的细节参考官方文档:VP9协议链接(需要加速器) vp9协议笔记 vp9协议笔记📒1. 视频编码概述2. 超级帧superframe(sz):2. fr…

ZK高可用架构涉及常用功能整理

ZK高可用架构涉及常用功能整理 1. zk的高可用系统架构和相关组件1.1 Quorum机制1.2 ZAB协议 2. zk的核心参数2.1 常规配置2.2 特殊优化配置 3. zk常用命令3.1 常用基础命令3.2 常用运维命令 4. 事务性4.1 数据写流程4.2 数据读流程 5. 疑问和思考5.1 zk不擅长处理哪些场景&…

springboot家乡特色推荐系统源码和论文

在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括家乡特色推荐的网络应用,在外国家乡特色推荐系统已经是很普遍的方式,不过国内的管理网站可能还处于起步阶段。家乡特色推荐系统采用java技术&#xff0…

橘子学Mybatis08之Mybatis关于一级缓存的使用和适配器设计模式

前面我们说了mybatis的缓存设计体系,这里我们来正式看一下这玩意到底是咋个用法。 首先我们是知道的,Mybatis中存在两级缓存。分别是一级缓存(会话级),和二级缓存(全局级)。 下面我们就来看看这两级缓存。 一、准备工作 1、准备数据库 在此之…

HCIP:不同VLAN下实现网络互相通信

配置pc1 配置pc2 配置pc3 将sw1划分到vlan3 将sw3划分到vlan3 在sw1上进行缺省 将sw1上(g0/0/1)的untagged改成 1 3 则在pc1上ping pc2可通 在sw1上进行缺省 在sw3上(e0/0/1)打标记 则在pc1上ping pc3可通(实现互通&am…

阿里云Serverless 容器使用,以及常见问题处理

阿里云Serverless Kubernetes容器服务(ASK)是基于Kubernetes的Serverless容器产品,能够自动完成资源管理、弹性伸缩和按需计费。以下是一些基本使用步骤以及常见问题处理: 阿里云Serverless Kubernetes(ASK&#xff0…

17.鸿蒙HarmonyOS App(JAVA)滑动选择器

每天进步一点点,成功在久不在速 滑动选择器 //设置文本样式 picker.setNormalTextFont(Font.DEFAULT_BOLD); picker.setNormalTextSize(40); picker.setNormalTextColor(new Color(Color.getIntColor("#FFA500"))); picker.setSelectedTextFont(Font.DEFAULT_BOLD)…

socket通信客户端收到16进制转换出现efbfbd乱码解决办法

socket客户端接收服务端发来的数据时,发现老有efbfbd乱码,如下图,服务端发送的是02040200013CF0,但是客户端接收到解析后却不一样 客户端接收解析并打印 在网上查原因后,原因是将接收的byte数组转换为String后&#…

C++:第十三讲BFS广度优先搜索

前言 今天带领大家学一下BFS。 DFS可以看——C:第十二讲DFS深搜(二)_c匿名函数dfs-CSDN博客 BFS简介 广度优先搜索(breadth-first search,缩写为bfs)又名宽度优先搜索,是最简便的图的搜索算法之一&…

Conda python运行的包和环境管理 入门

Conda系列: 翻译: Anaconda 与 miniconda的区别Miniconda介绍以及安装 Conda 是一个功能强大的命令行工具,用于在 Windows、macOS 和 Linux 上运行的包和环境管理。 本 conda 入门指南介绍了启动和使用 conda 创建环境和安装包的基础知识。 1. 准备…

优先级队列(堆) PriorityQueue

🎥 个人主页:Dikz12📕格言:那些在暗处执拗生长的花,终有一日会馥郁传香欢迎大家👍点赞✍评论⭐收藏 目录 1.优先级队列 2.优先级队列的模拟实现 2.1 堆的概念 2.2 堆的创建 2.3 堆的插入和删除 2.…

基于openssl v3搭建ssl安全加固的c++ tcpserver

1 概述 tcp server和tcp client同时使用openssl库,可对通信双方流通的字节序列进行加解密,保障通信的安全。本文以c编写的tcp server和tcp client为例子,openssl的版本为v3。 2 安装openssl v3 2.1 安装 perl-IPC-Cmd openssl项目中的co…

【软考】位示图

目录 一、基本概念二、位示图 一、基本概念 1.要将文件保存到外部存储器(外存或辅存),首先得知道存储空间的使用情况 2.要清楚哪个物理块已经被占用,哪个物理块是空闲的 3.当对大容量的磁盘存储空间被多用户共享时,用户…

套接字通信(附带单线程TCP套接字通信代码)

套接字-Socket 1. 概念 1.1 局域网和广域网 局域网(LAN)和广域网(WAN)是两种不同范围的计算机网络,它们用于连接多台计算机以实现数据共享和通信。 局域网(LAN): 定义&#xff1…