vue有没有放大局部dom的插件

Question

如图想点击echarts把这个卡片放大到满屏，记得有相关的js插件，但是实在没找打，求问各位大神

Answer 1

Fullscreen_API

全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。

可以在全屏 API 指南这篇文章了解更多细节。

Answer 2

如果实在是找不到的话，可以尝试自己写一个。
一、使用cloneNode复制一个节点

// 假设是一个id为node的节点
let tp = document.getElementById('node');
// 点击一次 复制一份 一样的node并占满全屏
// 再点击一次 让node2消失
node.onclick = (e) => {
    let node2 = node.cloneNode(true);
    document.body.appendChild(node2);
    node2.style.position = 'fixed';
    node2.style.zIndex = '9999';
    node2.style.width = '100vw';
    node2.style.height = '100vh';
    node2.style.left = '0';
    node2.style.top = '0';
    node2.onclick = ()=>{
        document.body.removeChild(node2);
    };
};

这个方案可能就只能做展示使用了，如果node这个节点还有双向绑定的事件或者其他方法，可能就会无法奏效。
二、直接放大
像方法一里一样不过是直接放大node节点

let node = document.getElementById('node');
let flag = false;

let position = node.style.position
let zIndex = node.style.zIndex
let width = node.style.width
let height = node.style.height
let left = node.style.left
let mytop = node.style.top
node.onclick = (e) => {
    if (flag) {
        node.style.position = position;
        node.style.zIndex = zIndex
        node.style.width = width
        node.style.height = height
        node.style.left = left
        node.style.top = mytop
    } else {
        node.style.position = 'fixed';
        node.style.zIndex = '9999'
        node.style.width = '100vw'
        node.style.height = '100vh'
        node.style.left = '0'
        node.style.top = '0'
    }
    flag = !flag
}

不过这样可能就会打乱原来的布局就是了，希望能帮到你。

Answer 3

fullscreen，你说的是这个东西？如果不是全屏的话，放大的意义不是很大呀，你可以试试transform然后纠正一下位置。clone节点的方案不太好，因为动态数据不好整