3 steps to build a plugin:
Make sure you have imported vConsole, then simply new
an instance of class VConsolePlugin
:
VConsole.VConsolePlugin(id, name)
id
(required) is an unique string.name
(optional) is a string used for tab's display name.Example:
var myPlugin = new VConsole.VConsolePlugin('my_plugin', 'My Plugin');
While installing and running a plugin, vConsole will trigger some events to allow a plugin customizing it's functions.
use .on()
to bind an event:
on(eventName, callback)
eventName
(required) is a string.callback
(required) is a callback function when an event is triggered.Example:
myPlugin.on('init', function() {
console.log('My plugin init');
});
See Event List to learn more about each event.
In this tutorial, we'd like to build a plugin with a tab and a tool button.
To add a tab, use renderTab
event:
myPlugin.on('renderTab', function(callback) {
var html = '<div>Click the tool button below!</div>';
callback(html);
});
renderTab
will be triggered while a plugin is being initialized. We simply pass a HTML string to callback
, then this HTML will be rendered as the content of a new tab, which name is name
.
To add a tool button, use addTool
event:
myPlugin.on('addTool', function(callback) {
var button = {
name: 'Reload',
onClick: function(event) {
location.reload();
}
};
callback([button]);
});
Again, addTool
will be triggered during initialized, after renderTab
. It's callback
receives an array
of tool button list. We make a button which can reload the current page.
The final step is add your new plugin to vConsole:
vConsole.addPlugin(pluginObject)
pluginObject
(required) is an VConsolePlugin
object.
Example:
vConsole.addPlugin(myPlugin);
Make sure you have finish binding all necessary events to your plugin before adding to vConsole. Some events (related to initialization) would not be trigger for second time after adding.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。