@fatewa/lugia
v2.0.3
Published
## 使用前配置
Downloads
7
Readme
Lugia组件V2说明
使用前配置
安装axios element-plus vue3.x版本
npm i '@fatewa/lugia'
或
yarn add '@fatewa/lugia'// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementUI from 'element-plus'
import 'element-plus/dist/index.css'
import Lugia from '@fatewa/lugia'
createApp(App)
.use(ElementUI)
// 全局注册组件
.use(Lugia)
.mount('#app')组件内使用
<template>
<Lugia :renderer="renderer" :options="config" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ElementRenderer } from '@fatewa/lugia'
import config from './config.jsx'
export default defineComponent({
name: 'Test-Index',
data () {
return {
renderer: new ElementRenderer(),
config
}
}
})
</script>
<style scoped>
</style>
provider 配置详解
lang 配置
配置整体所有功能按钮的语言配置(不填默认内置语言)
| 字段名 | 类型 | 描述 | | ----------- | ------ | -------------------- | | filter | String | 搜索按钮文字配置 | | resetFilter | String | 重置搜索按钮文字配置 | | create | String | 新建按钮文字配置 | | update | String | 编辑按钮文字配置 | | delete | String | 删除按钮文字配置 | | operation | String | 操作列列名文字配置 |
features 配置
配置分页、新建、编辑、删除功能是否存在(不填默认所有功能都有)
| 参数 | 类型 | 描述 | | ------ | ------- | ------------ | | page | Boolean | 分页是否存在 | | create | Boolean | 新建是否存在 | | update | Boolean | 编辑是否存在 | | delete | Boolean | 删除是否存在 |
adapters 配置
配置全局的http请求适配器、response响应适配器、page分页适配器
| 参数 | 类型 | 描述 | | -------- | ----------- | ------------------------------------ | | http | BaseAdapter | AbstractHttpAdapter 抽象类的实现 | | response | BaseAdapter | AbstractResponseAdapter 抽象类的实现 | | page | BaseAdapter | AbstractPageAdapter 抽象类的实现 |
provider 使用示例
import Lugia, {Provider} from '@fatewa/lugia'
Lugia.provider({
// 全局语言配置 不填默认内置语言
lang: {
filter: '搜索',
resetFilter: '重置',
create: '新建',
update: '编辑',
delete: '删除',
// 操作列名
operation: '操作'
},
// 全局功能配置 不填默认所有功能都有
features: {
page: true,
create: true,
update: true,
delete: true
},
// 全局适配器配置 不填默认内置adapter
adapters: {
http: new CustomHttpAdapter(),
response: new CustomResponseAdapter(),
page: new CustomPageAdapter()
}
} as Provider)组件配置详解
props 参数
- options: 组件参数配置项
- renderer: UI渲染器实例
options参数说明
| 字段名 | 类型 | 描述 | | --------- | ---------------- | -------------------------------- | | templates | Array | 表格字段信息的描述 | | baseURL | String | 请求的基础地址信息 | | dic | Array | 需要使用的字典数据配置 | | api | String | Object | 接口的请求路径 | | lang | Object | 组件内文字配置 | | features | Object | 组件内功能开启/关闭配置 | | adapters | Object | 对http、response、page参数做适配 | | table | Object | 表格属性配置 | | operation | Object | 表格操作列属性配置 |
templates: Array 参数说明
text: String 表格中展示的列名，新增或修改时展示的中文描述
field: String 表格中绑定的列字段名，新增或修改时绑定的字段名
group: Object 对筛选或新增或修改时，展示的字段在一行内占据的宽度配置，参数为filter，edit
| 字段名 | 类型 | 描述 | | ------ | ------ | ---------------- | | filter | Number | 不写默认 3 | | edit | Number | 不写默认占据一行 |
alias: Object 字段参数的别名
| 字段名 | 类型 | 描述 | | ------ | ------ | ---------------- | | create | String | 新增时的参数名 | | update | String | 更新时的参数名 | | filter | String | 筛选时的参数名 | | query | String | 表格展示的参数名 |
filter: Object 筛选配置
| 字段名 | 类型 | 描述 | | ----------- | ------ | ------------------------------------------------------------ | | tactics | String | 可选值 'eq' | 'like' | 'lt' | 'gt | 'lte' | 'gte' | 'between' | | placeholder | String | input输入框的占位符 |
column: Object 表格列参数配置(目前适配el-table-column的配置参数)
visible: Object 对筛选、新增、修改、表格展示的显示控制，参数为filter，update、create、query
| 字段名 | 类型 | 描述 | | ------ | ------- | ---------------------------- | | filter | Boolean | 不写默认没有该字段的筛选功能 | | create | Boolean | 不写默认该字段可新增 | | update | Boolean | 不写默认该字段可修改 | | query | Boolean | 不写默认该字段展示 |
renderer: Object 自定义渲染组件，针对新增、修改、筛选、表格展示，参数为filter，update、create、query
- 当参数为String类型时可选值有 'input' | 'select' | 'radio' | 'checkbox' | 'date' | 'datetime' | 'textarea'
- ElementEnum 是一个枚举类，提供了对应String类型的枚举值(推荐使用)，详细介绍请看枚举renderer
| 字段名 | 类型 | 描述 | | ------ | --------------------------------- | ----------------------------- | | create | Function | String | ElementEnum | 函数类型必须return一个dom元素 | | filter | Function | String | ElementEnum | 函数类型必须return一个dom元素 | | update | Function | String | ElementEnum | 函数类型必须return一个dom元素 | | query | Function | String | ElementEnum | 函数类型必须return一个dom元素 |
- 回调函数参数为h，row
rules: Array 配置字段新增修改时的校验规则（使用可参照element-plus重表单验证的使用方式）
| 字段名 | 类型 | 描述 | | --------- | -------- | ------------------------------------------------------------ | | type | String | 可选参数'string' | 'number' | 'boolean' | 'array' | 'date' | 'url' | 'email' | | required | Boolean | 是否必填 true是 false否 | | message | String | 错误提示信息 | | trigger | String | 触发方式，可选值'blur' | 'change' | | min | Number | 最小 | | max | Number | 最大 | | validator | Function | 自定义验证函数 |
api 参数配置详解
当api值为String时，我们默认了CRUD四个接口，统一使用统一地址
当api值为Object，参数为filter，update、create、query
| 字段名 | 类型 | 描述 | | ------ | ------ | ------------------------------- | | filter | Object | 筛选接口配置，参数为uri，method | | create | Object | 创建接口配置，参数为uri，method | | update | Object | 编辑接口配置，参数为uri，method | | query | Object | 删除接口配置，参数为uri，method |
lang: Object 参数配置详解
| 字段名 | 类型 | 描述 | | ----------- | ------ | ---------------------- | | create | String | 新增按钮文字配置 | | operation | String | 表格操作列表头文字配置 | | filter | String | 搜索按钮文字配置 | | resetFilter | String | 重置按钮文字配置 | | update | String | 编辑按钮文字配置 | | delete | String | 删除按钮文字配置 |
features: Object 参数配置详解
| 字段名 | 类型 | 描述 | | ------ | ------- | ------------ | | create | Boolean | 是否开启创建 | | page | Boolean | 是否开启分页 | | update | Boolean | 是否开启编辑 | | delete | Boolean | 是否开启删除 |
adapters: Object 参数配置详解
- http AbstractHttpAdapter类的实现类的实例，详情请见示例
- response AbstractResponseAdapter类的实现类的实例，详情请见示例
- page AbstractPageAdapter类的实现类的实例，详情请见示例
dic: Array 参数配置详解
| 字段名 | 类型 | 描述 | | ------- | -------------------- | ------------------------------- | | key | String | 与templates中关联的字段的参数名 | | options | String | DicOptions | 字典数据的配置 |
当options值为String时，参数必须为字典接口地址我们默认请求这个地址获取字典数据
当options值为DicOptions，参数为url，label、value、data，详细配置请看完整配置
DicOptions 类型介绍
| 字段名 | 类型 | 描述 | | ------ | ------ | ------------------ | | url | String | 字典数据的请求地址 | | label | String | 对应显示的字段名 | | value | String | 对应选择的字段名 | | data | Array | 自定义的字典数据 |
插槽
header插槽
<Lugia ref="lugia" :options="ProdTmpl" :renderer="renderer"> <template v-slot:header> <el-button>详情</el-button> </template> </Lugia>**备注：**刷新表格请使用ref调用组件的query方法
table插槽
<Lugia ref="lugia" :options="ProdTmpl" :renderer="renderer"> <template v-slot:table="row"> <el-button>详情</el-button> <el-button>详情</el-button> </template> </Lugia>**备注：**row为表格当前行的数据。刷新表格请使用ref调用组件的query方法
自定义renderer实现
通过templates配置中的renderer参数用户可自定义配置需要渲染的的dom或组件
- 组件内部在接受到传入的options配置后，在执行render函数中，将循环templates中的每一项，先会检查visible中的参数是否为true或undefined
- 是, 将会判断renderer参数重是否存在对应的自定义dom
- 否, 将会渲染成输入框
- 是, 将会在执行render的过程中使用执行自定义render，渲染自定义dom
- 否, 将不会对此字段执行渲染
- 是, 将会判断renderer参数重是否存在对应的自定义dom
枚举类 ElementEnum
v2.0版本我们新增了一部分表单的枚举值，用于自定义renderer中，保存在枚举类ElementEnum中，值如下：
- INPUT：输入框表单
- SELECT：下拉选择框表单
- RADIO：单选框组表单
- CHECKBOX：多选框组表单
- DATE：日期选择器表单
- DATE_TIME：日期时间选择器表单
- TEXTAREA：文本域表单
具体使用请看完整配置
完整配置
import {
ElementEnum,
SampleHttpAdapter,
SamplePageAdapter,
SampleResponseAdapter,
TemplateConfiguration
} from "@fatewa/lugia";
export default {
// 基础api地址
baseURL: 'http://127.0.0.1:3000/v1/api',
// 接口api配置 第一种
// api: '/sjl',
// 接口api配置 第二种
api: {
query: {
method: 'get',
uri: '/sjl'
},
create: {
method: 'post',
uri: '/sjl'
},
update: {
method: 'patch',
uri: '/sjl'
},
delete: {
method: 'delete',
uri: '/sjl'
}
},
// 字典数据配置 第一种
// dic: [
// {
// templates 未设置 alias别名 同filed字段
// key: 'type_id',
// options: '/sjl/all/type'
// }
// ],
// 字典数据配置 第二种
// dic: [
// {
// key: 'type_id',
// options: {
// url: '/sjl/all/type'
// }
// }
// ],
// 字典数据配置 第三种 映射绑定字段 label默认name value默认id
// dic: [
// {
// templates 未设置 alias别名 同filed字段
// key: 'type_id',
// options: {
// url: '/sjl/all/type',
// label: 'name',
// value: 'id'
// }
// }
// ],
// 字典数据配置 第四种 label默认name value默认id
// dic: [
// {
// templates 未设置 alias别名 同filed字段
// key: 'type_id',
// options: {
// data: [
// {
// name: '测试',
// id: 1
// }
// ]
// }
// }
// ],
// 字典数据配置 第五种
dic: [
{
// templates 未设置 alias别名 同filed字段
key: 'type_id',
options: {
label: 'label',
value: 'code',
data: [
{
label: '测试',
code: 1
}
]
}
}
],
// 表格配置项 目前适配的element-plus的表格属性 字段名驼峰式
table: {
width: '50%',
border: true
},
// 操作列的配置 目前适配的element-plus的table-column属性 字段名驼峰式
operation: {
fixed: 'right',
width: 200
},
// 组件功能配置
features: {
page: true,
create: true,
update: true,
delete: true
},
// 组件内语言的配置
lang: {
filter: '搜索',
resetFilter: '重置',
create: '新建',
update: '编辑',
delete: '删除',
// 操作列名
operation: '操作'
},
// 适配器配置
adapters: {
// http请求适配器 需要传入请求基础路径 不传默认当前项目的访问地址
http: new SampleHttpAdapter('http://127.0.0.1:3000/v1/api'),
// 分页参数适配器
page: new SamplePageAdapter(),
// response参数适配器
response: new SampleResponseAdapter()
},
// 模版配置
templates: [
{
// 字段展示名称
text: '姓名',
// 字段名
field: 'name',
// 是否可见
visible: {
// 筛选时 不配置默认false
filter: true,
// 展示时 不配置默认为true
query: true,
// 新增时 不配置默认为true
create: true,
// 修改时 不配置默认为true
update: true
},
// 别名配置
alias: {
// 筛选时
filter: 'name',
// 展示时
query: 'name',
// 新增时
create: 'name',
// 修改时
update: 'name',
},
// 表格列配置 目前适配的element-plus的table-column属性 字段名驼峰式
column: {
width: '150px'
},
// 字段校验规则配置 目前适配的element-plus
rules: [
{ required: true, message: '姓名不能为空', trigger: 'blur' }
],
// 字段是否一行展示
group: {
// 筛选时
filter: 4,
// 新增或修改时
edit: 11
},
// 筛选配置
filter: {
// 筛选方式
tactics: 'eq',
// 输入框的提示文字
placeholder: '请输入名称筛选'
},
/**
* h 渲染函数
* row 当前行绑定数据
* dict 字典数据
* (h, row, dict) => {}
*/
renderer: {
// 函数式自定义
create: (h: any, row: any, dict: any[]) => {
return (<el-input v-model={row.name}/>)
},
// 枚举类型 INPUT SELECT RADIO DATE DATE_TIME CHECKBOX TEXTAREA
update: ElementEnum.INPUT,
// 字符串 'input' | 'select' | 'radio' | 'checkbox' | 'date' | 'datetime' | 'textarea'
filter: 'select'
}
}
]
} as TemplateConfiguration