一个能够让 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