owl-create-api v0.0.3

owl-create-api

一个能够让 Vue 组件通过 API 方式调用的插件

安装

$ npm install owl-create-api

使用

import Vue from 'vue'
import CreateAPI from 'owl-create-api'

import Dialog from './dialog'

Vue.use(CreateAPI)

Vue.createAPI(Dialog)

// .vue
this.$myDialog({
  $props: {
    content: 'Content',
    btns: [{
      text: 'OK'
    }]
  },
  $events: {
  }
}).show()

更多参数示例

import Vue from 'vue'
import CreateAPI from 'owl-create-api'

import Dialog from './dialog'

Vue.use(CreateAPI, {
  componentPrefix: 'my-'
})

Vue.createAPI(Dialog, ['callback'], true)

• api 调用 $props $events 更新数据

const dialog = this.$dialog({
  $props: {
    content: 'content',
    btns: [{
      text: 'Yes'
    }, {
      text: 'Change',
      callback: () => {
        this.content = 'change content' 
        return false
      }
    }],
    $class: 'my-class'
  },
  $events: {
    callback: e => console.log('visible callback', e)
  }
}).show()

• slot createElement

this.$dialog(null, (createElement) => {
  return [
    createElement('p', 'other content')
  ]
}).show()

• object params

this.$dialog({
  content: 'I am content',
  onCallback: () => console.log('on-events callback')
}).show()

• $create

import Dialog from './dialog'

Dialog.$create({
  $props: {
    content: 'content',
    btns: [{
      text: 'unChangeProps',
      callback: () => {
        // this.content = 'change content' invalid
        return false
      }
    }]
  },
  $events: {
    callback: e => console.log('visible callback', e)
  }
}).show()

关于

• 本插件借鉴 vue-create-api

• 源码分析