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

hothear
  • 1
新手上路,请多包涵

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

回复
阅读 288
3 个回答

Fullscreen_API

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

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

如果实在是找不到的话,可以尝试自己写一个。
一、使用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
}

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

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

image.png

你知道吗?

宣传栏