- Notifications
You must be signed in to change notification settings - Fork15
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
Stars
Watchers
Forks
Packages0
No packages published