通用插件

VIDE插件的前缀是vide-plugin,我们可以根据vide/store里面的数据存储来命名 比如在toolbar显示的hosts插件vide-plugin-toolbar-hostsvide插件集成了element-ui的css样式

普通插件的一些选项

在package.json里面的vide对象可以包括快捷键的设置

{
  "vide": {
    "shortcut": [
      {
        "win": "shift-ctrl-h",
        "mac": "shift-command-h",
        "func": "videPluginToolbarHosts:click"
      }
    ]
  }
}

开发普通插件步骤

开发视图(如果有)

首先可以用vue来开发页面视图,开发完之后可以在index.js引用即可

import App from './App.vue'

在加载插件的时候,加入vuex数据层

store.dispatch('toolbar/addItem', {
  name: 'hosts',
  desc: 'hosts tool',
  key: 'videPluginToolbarHostsItem',
  icon: 'data:image/png;base64,iVBORw0K/2vOa1EKbfDJEPlSh0T3JnDCJ3Zo/Mj7GdO/M0MSjfbu5MhAjrJ4lUGOXV4hbhXJ+V1CorIdrDHsgw6lyV3WU17ZSpWWpWU47MUMqXxvUkq0nJaFI83x9mNYU/k9W0SXZ2FYSzrxIg/kICRMfbBFkCsQMSIfZrzu/qLt8srQf5ZnkOzDdbr+SbqS2CK2B00zKI/41NkD9B7OsrIHbqKoi/uRriHq+FWBMNfSYay02bINpEX1sTuQ8mcuxM5BOZqHLTDhK54aZ0UiaECmVJZVspy0pcJl3ew/fzc/h5/FyCEPXQayXq5frZDuobJrLLRCB3l8OPP3q+n/wXGDQtLcGnE5gAAAAASUVORK5CYII=',
  func: 'videPluginToolbarHosts:click',
  longTap: 'videPluginToolbarHosts:longTap'//工具栏按钮支持长按事件
})

类的实现方法

return class videPluginToolbarHosts extends baseClass {
  click () {
    if (isCreated) {
      this.$toggle()
    } else {
      isCreated = true
      let self = this
      let props = {
        propsData: {
          callback: function () {
            self.$toggle()
          }
        }
      }
      let stylePath = path.join(packageInfo.path, './dist/index.css')
      this.$mount({app: App, props, stylePath})
    }
  }
  $clean () {
    store.dispatch('toolbar/deleteItem', 'videPluginToolbarHostsItem')
  }
}

整体代码结构

import App from './App.vue'
import path from 'path'
export default ({editor, store, view, packageInfo, baseClass}) => {
  let isCreated = false
  // add item to toolbar
  store.dispatch('toolbar/addItem', {
    name: 'hosts',
    desc: 'hosts tool',
    key: 'videPluginToolbarHostsItem',
    func: 'videPluginToolbarHosts:click'
  })
  // return execute class
  return class videPluginToolbarHosts extends baseClass {
    click () {
      if (isCreated) {
        this.$toggle()
      } else {
        isCreated = true
        let self = this
        let props = {
          propsData: {
            callback: function () {
              self.$toggle()
            }
          }
        }
        let stylePath = path.join(packageInfo.path, './dist/index.css')
        this.$mount({app: App, props, stylePath})
      }
    }
    $clean () {
      store.dispatch('toolbar/deleteItem', 'videPluginToolbarHostsItem')
    }
  }
}

案例

vide-plugin-toolbar-hosts

Copyright © www.debuggap.com 2013-2017 浙ICP备16009880号 all right reserved,powered by Gitbook  2017-05-17

results matching ""

    No results matching ""