- Notifications
You must be signed in to change notification settings - Fork16
A Vue wrapper component for WinBox.js.
License
NotificationsYou must be signed in to change notification settings
wobsoriano/vue-winbox
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Vue 3 wrapper forWinBox.js.
Demo:https://vue-winbox.vercel.app
pnpm add vue-winbox
<scriptsetup>import{ref}from'vue'import{VueWinBox}from'vue-winbox'constcount=ref(0)constwbRef=ref()//WinBox optionsconstoptions={title:'Current count: 0',class:'modern',}setInterval(()=>{count.value++wbRef.value?.winbox?.setTitle(`Current count:${count.value}`)},500)</script><template><VueWinBoxref="wbRef":options="options"@onmove="onMove"><div>Window 1: {{ count }}</div></VueWinBox></template>
To update props and access methods/controls, just add aref to theVueWinBox component and use it like how you would withWinBox.js:
// Set the window titlewbRef.value.winbox.setTitle('New title')// Custom Position / SizewbRef.value.winbox.resize('50%','50%').move('center','center')// Add classwbRef.value.winbox.addClass('modern')// Focus a window (bring up to front)wbRef.value.winbox.focus()// Chaining MethodswbRef.value.winbox.setTitle('Title').resize('50%','50%').move('center','center').focus()
To reinitialize a closed window:
wbRef.value.winbox.initialize()
| Name | Type | Default | Description |
|---|---|---|---|
resize | Function | - | Fired when the window resizes. |
close | Function | - | Fired when the window is closing. |
focus | Function | - | Fired when the window is in focus. |
blur | Function | - | - |
move | Function | - | Fired when the window moves. |
import{useWinBox}from'vue-winbox'constcreateWindow=useWinBox()functiongenerate(){constwinbox=createWindow({title:'Window title',})winbox.fullscreen()}
MIT
About
A Vue wrapper component for WinBox.js.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.