Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dengwb1991/owl-create-api
A Vue plugin which make Vue component invocated by API
https://github.com/dengwb1991/owl-create-api
vue vue-create-api
Last synced: 16 days ago
JSON representation
A Vue plugin which make Vue component invocated by API
- Host: GitHub
- URL: https://github.com/dengwb1991/owl-create-api
- Owner: dengwb1991
- License: mit
- Created: 2019-05-27T02:55:54.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-08-20T06:52:25.000Z (over 5 years ago)
- Last Synced: 2024-11-30T01:08:54.293Z (about 2 months ago)
- Topics: vue, vue-create-api
- Language: JavaScript
- Homepage:
- Size: 67.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# owl-create-api
[](https://codecov.io/gh/dengwb1991/owl-create-api) [](https://travis-ci.org/dengwb1991/owl-create-api)
一个能够让 Vue 组件通过 API 方式调用的插件
## 安装
```bash
$ npm install owl-create-api
```
## 使用
```js
import Vue from 'vue'
import CreateAPI from 'owl-create-api'
import Dialog from './dialog'
Vue.use(CreateAPI)
Vue.createAPI(Dialog)
```
```js
// .vue
this.$myDialog({
$props: {
content: 'Content',
btns: [{
text: 'OK'
}]
},
$events: {
}
}).show()
```
## 更多参数示例
```js
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 更新数据
```js
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
```js
this.$dialog(null, (createElement) => {
return [
createElement('p', 'other content')
]
}).show()
```
- object params
```js
this.$dialog({
content: 'I am content',
onCallback: () => console.log('on-events callback')
}).show()
```
- $create
```js
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](https://github.com/cube-ui/vue-create-api)
* [源码分析](https://juejin.im/post/5d4cb305e51d45620064bb0d)