Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/daniel-dx/ncadmin-core
ncadmin core lib
https://github.com/daniel-dx/ncadmin-core
Last synced: 27 days ago
JSON representation
ncadmin core lib
- Host: GitHub
- URL: https://github.com/daniel-dx/ncadmin-core
- Owner: daniel-dx
- License: mit
- Created: 2018-10-27T09:09:40.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T20:12:33.000Z (almost 2 years ago)
- Last Synced: 2024-10-03T07:55:19.462Z (about 1 month ago)
- Language: JavaScript
- Size: 1.8 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ncadmin-core
ncadmin的核心组件库，包括配置开发的查询列表，编辑，详情页，弹窗等
## install
```javascript
npm install ncadmin-core
```
## Usage
``` js
// 使用其工具库
import {
ncformCommon,
eventHub,
} from 'ncadmin-core';
// 使用其组件。具体的组件请阅读下面的组件文档
```
## 工具库
### eventHub
事件总线，用于全局触发和监听事件
```js
import ncadminCore from 'ncadmin-core';
const { eventHub } = ncadminCore;
eventHub.$on(); // 监听事件
eventHub.$emit(); // 触发事件
```
### ncformCommon
ncform的通用类库，请参考ncform-common项目的文档
## 组件列表
### ncform
请参考ncform项目的文档
### nca-detail
```html
export default {
data() {
return {
}
}
}
```
### nca-detail-modal
```html
export default {
data() {
return {
}
}
}
```
### nca-edit
```html
export default {
data() {
return {
}
}
}
```
### nca-edit-modal
```html
export default {
data() {
return {
}
}
}
```
### nca-list
```html
export default {
data() {
return {
}
}
}
```
### nca-modal
弹窗组件，可配置弹窗的标题，底部按钮
弹窗里面的内容需要当一个组件来开发，组件需遵循nca-modal内容组件的规则来开发
```html
export default {
data() {
return {
visible: false,
modalConfig: {
title: '', // 弹窗标题
buttons: {
confirm: { // 确定按钮
enable: true,
name: '', // 按钮名称，默认确定
showLoading: true, // 是否在异步请求时显示loading状态
},
cancel: { // 取消按钮
enable: true,
name: '', // 取消
},
others: [
{
enable: true,
name: '', // 按钮名称
eventName: '', // 按钮触发事件名称
close: true, // 操作后是否关闭弹窗
showLoading: false, // 是否在异步请求时显示loading状态，true的情况eventName必须提供
}
]
}
}
}
}
}
```
#### 弹窗内容组件开发规则和示例
```html
import ncadminCore from '@danieldx/ncadmin-core';
const { eventHub, modalInsideMixins } = ncadminCore;
export default {
mixins: [modalInsideMixins],
methods: {
/**
* 确认按钮事件处理
* 请务必在执行确认操作后调用done方法。如果请求失败，把Error对象传给done
* 如 成功：done()或done(data) 失败：done(e)
*/
_confirmHandler(done) { },
/**
* 自定义的其它按钮的事件处理
* 请务必在执行确认操作后调用done方法。如果请求失败，把Error对象传给done
* 如 成功：done()或done(data) 失败：done(e)
*/
_btnsEventHandler(config, done) { },
}
}
```
## Widgets
### nca-label
```js
component: {
name: 'nca-label',
config: {
color: ''
},
value: ''
}
```
### nca-image
```js
component: {
name: 'nca-image',
config: {
maxWidth: ''
},
value: ''
}
```
### 组件使用方法
# edit-page.vue
通过配置开发一个新建/编辑的页面
（根据配置中的idField字段，在$route中取页面唯一值（通常为Id）。值为0时，页面为新建状态，值为其他值时，页面为编辑状态。）
具体配置参考[文档](config-edit.md)
### 示例
```html
import ncadminCore from 'ncadmin-core';
const editPage = ncadminCore.edit;
export default {
component: {
editPage
},
data: {
return {
config: {}
}
}
}
```
# list-page.vue
通过配置开发一个查询列表的页面
具体配置参考[文档](config-list.md)
### 示例
```html
import ncadminCore from 'ncadmin-core';
const listPage = ncadminCore.list;
export default {
component: {
listPage
},
data: {
return {
config: {},
// value 传时默认值如下
valueData: {
pageNum: 1,
pageSize: 20,
query: {}
}
}
}
}
```