插件:Event 事件列表

插件的所有事件(event)都是可选的,不强制绑定。但一些特性(比如添加 tool 按钮)依赖于指定的事件,所以若要实现那些特性,就必须绑定指定的事件。

每个事件都会有一个 callback 回调函数,当事件被触发时,就会执行 callback。一些 callback 可能会带有参数。

init

当插件开始初始化时触发。这个事件触发时,代表 vConsole 开始安装此插件,开发者可以在此时初始化一些配置。
这个事件只会触发一次。

注意,此时插件的 DOM 仍未就绪,插件还未被渲染到页面中。

Callback 参数:
例子:
  1. myPlugin.on('init', function() {
  2. // 在这里可以初始化一些自用的配置
  3. this.list = []; // `this` == `myPlugin`
  4. });

renderTab

当 vConsole 尝试为此插件渲染新 tab 时触发。这个事件只会触发一次。

绑定此事件后,vConsole 会认为此插件需要创建新 tab,并会将 callback 中获取的 HTML 用于渲染 tab。因此,只要绑定了此事件,新 tab 肯定会被渲染到页面中,无论 callback 传入的 HTML 是否为空。如果不需要添加新 tab,请不要绑定此事件。

Callback 参数
  • (必填) function(html): 回调函数,接收一个 HTML 参数用于渲染 tab。html 可以为 HTML 字符串,或者 HTMLElement 对象(或支持 appendTo() 方法的对象,如 jQuery 对象)。
例子:
  1. myPlugin.on('renderTab', function(callback) {
  2. var html = '<div>Hello</div>';
  3. callback(html);
  4. });

addTopBar

当 vConsole 尝试为此插件添加新的 topbar 按钮时触发。这个事件只会触发一次。

Callback 参数:

  • (必填) function(btnList): 回调函数,接收一个带有按钮配置信息的 array 数组。

按钮的参数为:

Property
name string 必填 按钮展示的名字。
data object 选填 按钮的 dataset,key-value 格式。
className string 选填 按钮的 className。
onClick function 必填 点击按钮时的回调函数。触发回调后,除非回调函数返回 false,此按钮将自动变为选中的样式。
例子:
  1. var type;
  2. myPlugin.on('addTopBar', function(callback) {
  3. var btnList = [];
  4. btnList.push({
  5. name: 'Apple',
  6. className: '',
  7. data: {type: 'apple'},
  8. onClick: function() {
  9. if (type != this.dataset.type) {
  10. // `this` 指向当前按钮
  11. type = this.dataset.type;
  12. } else {
  13. return false;
  14. }
  15. }
  16. });
  17. btnList.push({
  18. name: 'Orange',
  19. className: '',
  20. data: {type: 'orange'},
  21. onClick: function() {
  22. type = this.dataset.type;
  23. }
  24. }
  25. });
  26. callback(btnList);
  27. });

addTool

当 vConsole 尝试为此插件添加新的 tool 按钮时触发。这个事件只会触发一次。

Callback 参数:
  • (必填) function(toolList): 回调函数,接收一个带有按钮配置信息的 array 数组。

tool 按钮的参数为:

Property
name string 必填 按钮展示的名字。
global boolean 选填,默认 false false 时,当切换到别的 tab 后,按钮就会被隐藏;true 时,按钮变成全局可见。
onClick function() 必填 点击按钮时的回调函数。
例子:
  1. myPlugin.on('addTool', function(callback) {
  2. var toolList = [];
  3. toolList.push({
  4. name: 'Reload',
  5. global: false,
  6. onClick: function(e) {
  7. location.reload();
  8. }
  9. });
  10. callback(toolList);
  11. });

ready

当插件初始化结束后触发。这个事件只会触发一次。此时插件已经成功安装并已渲染到页面。

Callback 参数:
例子:
  1. myPlugin.on('ready', function() {
  2. // do something...
  3. });

remove

当插件即将卸载前触发。这个事件只会触发一次。

需要注意的是,如果在 vConsole ready 之前就卸载插件,那么此事件会在 init 之前就被调用。

Callback 参数:
例子:
  1. myPlugin.on('remove', function() {
  2. // do something...
  3. });

show

当插件的 tab 被显示时触发。只有绑定了 renderTab 事件的插件才会收到此事件。

Callback 参数:
例子:
  1. myPlugin.on('show', function() {
  2. // do something
  3. });

hide

当插件的 tab 被隐藏时触发。只有绑定了 renderTab 事件的插件才会收到此事件。

Callback 参数:
例子:
  1. myPlugin.on('hide', function() {
  2. // do something
  3. });

showConsole

当 vConsole 被显示时触发。

Callback 参数:
例子:
  1. myPlugin.on('showConsole', function() {
  2. // do something
  3. });

hideConsole

当 vConsole 被隐藏时触发。

Callback 参数:
例子:
  1. myPlugin.on('hideConsole', function() {
  2. // do something
  3. });

updateOption

vConsole.setOption() 被调用时触发

Callback 参数:
  • none
例子:
  1. myPlugin.on('updateOption', function() {
  2. // do something
  3. });

返回索引