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的配置参数)

字段名	类型	描述
filter	Number	不写默认 3
edit	Number	不写默认占据一行

字段名	类型	描述
create	String	新增时的参数名
update	String	更新时的参数名
filter	String	筛选时的参数名
query	String	表格展示的参数名

字段名	类型	描述
tactics	String	可选值 'eq' \| 'like' \| 'lt' \| 'gt \| 'lte' \| 'gte' \| 'between'
placeholder	String	input输入框的占位符

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
- 否, 将不会对此字段执行渲染

枚举类 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

@fatewa/lugia

Lugia组件V2说明

使用前配置

组件内使用

provider 配置详解

lang 配置

features 配置

adapters 配置

provider 使用示例

组件配置详解

props 参数

options参数说明

templates: Array 参数说明

api 参数配置详解

lang: Object 参数配置详解

features: Object 参数配置详解

adapters: Object 参数配置详解

dic: Array 参数配置详解

插槽

自定义renderer实现

枚举类 ElementEnum

完整配置

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@fatewa/lugia

Lugia组件V2说明

使用前配置

组件内使用

provider 配置详解

lang 配置

features 配置

adapters 配置

provider 使用示例

组件配置详解

props 参数

options参数说明

templates: Array 参数说明

api 参数配置详解

lang: Object 参数配置详解

features: Object 参数配置详解

adapters: Object 参数配置详解

dic: Array 参数配置详解

插槽

自定义renderer实现

枚举类 ElementEnum

完整配置

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads