How to Open Small Window at Top Right Corner? | 點燈坊

If we want to open a small window at top right corner, we can use window.open to implement it.

Version

Vue 3.2

window.open

There are small window at top right corner.

<script setup>
import { useRouter } from 'vue-router'

let { resolve } = useRouter ()

let { href } = resolve ({ name: 'New' })

let windowWidth = 300
let windowHeight = 200
let left = screenX + outerWidth - windowWidth
let top = screenY

open (
  href,
  '_blank',
  `width=${windowWidth}, 
   height=${windowHeight},
   left=${left},
   top=${top}`
)
</script>

<template>
  <div>Home</div>
</template>

Line 2

import { useRouter } from 'vue-router'

let { resolve } = useRouter ()

let { href } = resolve ({ name: 'New' })

• Destructure resolve from useRouter
• Use resolve to transform from Vue route to native url

Line 8

let windowWidth = 300
let windowHeight = 200
let left = screenX + outerWidth - windowWidth
let top = screenY

• windowWidth : set width of small window
• windowHeight : set height of small window
• left : set left position of small window
  • screenX : horizontal distance of left border of browser to the left side of screen
  • outerWidth : width of the outside of browser, including scrollbar
  • windowWidth : width of small window
• top : set top position of small window
  • screenY : vertical distance of the top border of browser to the top side of screen

Line 13

open (
  href,
  '_blank',
  `width=${windowWidth}, 
   height=${windowHeight},
   left=${left},
   top=${top}`
)

Use window.open to open a new small window :

• href : the native url to open new small window
• _blank : open small window on new window
• width : width of small window
• height : height of small window
• left : left of small window
• top : top of small window

Conclusion

• Use resolve to transform from Vue route to native url
• In order to open small window at top right corner, we have to calculate left position by screenX, outerWidth and windowWidth manually