# Plugin as button
A plugin component will have a special API if it is registered as a window button.
# onOpen and onClose
onOpen
and onClose
methods prevent user from spam clicking a plugin button. It will not be possible to the user to open or close the plugin if the returned Promise (opens new window) is not resolved.
As their names suggest, onOpen
is run when the user request the plugin to be opened,
while onClose
is run when the user request the plugin to be closed.
TIP
The plugin can be opened or closed using the UI (by clicking) or programmatically using javascript.
const myComponent = {
async onOpen() {
await new Promise((res) => setTimeout(res, 1000));
},
onClose() {
return new Promise((res) => setTimeout(res, 2000));
},
methods: {
onClick() {
console.log("clicked !");
},
},
template: `
<div>
<button type="button" @click="onClick">Click me!</button>
</div>`,
};
The result:
These methods are useful when an action needs to be awaited before the plugin can be opened or closed again.
# $open and $close
A plugin can be opened or closed using the UI (by clicking) but you may want to do it programmatically using javascript. To do so, you can use $open
or $close
methods available on this
.
Example: a plugin component opened at startup and that close itself after 2 seconds.
const myPluginComponent = {
mounted() {
this.$open();
setTimeout(() => this.$close(), 2000);
},
};
# Open/Close parameters
You can also provide any parameter you want when you call $open
or $close
.
These paramters will be passed to the onOpen
or onClose
method respectively.
Example:
const myPluginComponent = {
template: `
<button @click="onClick">
Click me
</button>
`,
data() {
return { count: 0 };
},
onOpen(msg) {
console.log("open message: ", msg);
},
methods: {
onClick() {
this.$open(`count = ${this.count++}`);
}
}
};