普通html中使用window.open 和 vue中使用window.open

普通html中使用window.open 和 vue中使用window.open

1.普通的html中使用window.open

html

<button id="tanchuang">弹窗</button>

js

<script>
  function openWindow(){
    {
      var url="http://www.baidu.com"; // 转向网页的地址;
      var name="windowOpen 测试"; // 网页名称，可为空;
      var iWidth=1000;   // 弹出窗口的宽度;
      var iHeight=500;  // 弹出窗口的高度;
      var screenHeight = window.screen.height;  // 获得屏幕的高;
      var screenWidth = window.screen.width;   // 获得屏幕的宽;
      var iTop = (screenHeight - 30 - iHeight) / 2;  //获得窗口的垂直位置;
      var iLeft = (screenWidth - 10 - iWidth) / 2;   //获得窗口的水平位置;
      var configuration = `
        height=${iHeight},
        innerHeight=${iHeight},
        width=${iWidth},
        innerWidth=${iWidth}',
        top=${iTop},
        left=${iLeft},
        toolbar=no,
        menubar=no,
        scrollbars=auto,
        resizeable=no,
        location=no,
        status=no
      `
      window.open(url, title, configuration);
    }
  }
  
  let dom = document.getElementById("tanchuang")
  dom.onclick=()=>{
    openWindow()
  }
</script>

2.vue中使用Window.open

function openWindow(){
  var { href } = this.$router.resolve({
    path: `/xxxxxx`, // route路由
    query: { // 参数
      id: xxxxx,
      paperName: xxxxxx
    }
  })
  var name="windowOpen 测试"; // 网页名称，可为空;
  var iWidth=1000;   // 弹出窗口的宽度;
  var iHeight=500;  // 弹出窗口的高度;
  var screenHeight = window.screen.height;  // 获得屏幕的高;
  var screenWidth = window.screen.width;   // 获得屏幕的宽;
  var iTop = (screenHeight - 30 - iHeight) / 2;  //获得窗口的垂直位置;
  var iLeft = (screenWidth - 10 - iWidth) / 2;   //获得窗口的水平位置;
  var configuration = `
    height=${iHeight},
    innerHeight=${iHeight},
    width=${iWidth},
    innerWidth=${iWidth}',
    top=${iTop},
    left=${iLeft},
    toolbar=no,
    menubar=no,
    scrollbars=auto,
    resizeable=no,
    location=no,
    status=no
  `
  window.open(href, title, configuration);
}