window.open

原创于 2021-05-10 17:42:25 发布 · 101 阅读

CC 4.0 BY-SA版权

该博客介绍了如何在Vue.js应用中创建一个按钮，点击后打开一个新的窗口，窗口内容加载指定URL，并确保窗口在屏幕中央显示。通过设置窗口的宽高和位置实现居中效果。此外，还展示了如何定义`handleAdd`方法来触发窗口的打开操作。

<el-button icon="el-icon-plus" @click="handleAdd">新增</el-button>

handleAdd() {
	let url = "http://localhost:9527/#/vertical-add";
	// 这个url是浏览器地址
    var iWidth = 1500; //弹出窗口的宽度;
    var iHeight = 845; //弹出窗口的高度;
    var iTop = (window.screen.height - 10 - iHeight) / 2; //获得窗口的垂直位置;
    var iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
    // 上面四行实是为了等窗口显示的时候 是 居中的
    window.open(
		url,"_blank", "height=" +iHeight +",,innerHeight=" + iHeight +",width=" +iWidth +
          ",innerWidth=" +iWidth +",top=" +iTop +",left=" +iLeft +","
    );
},