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