指南

介绍

基于
vue3 >= 3.3.0
typescript >= 4.0.0 js项目可不安装
element-plus >= 2.2.0
axios >= 0.21.4
@vueuse/core >= 10.2.1
vxe-table >= 4.7.0
vxe-pc-ui >= 4.0.0
二次封装组件

::: tip 该组件库为二次封装,为了依赖版本的一致和打包大小,该组件库不引入依赖,需要项目安装引入
:::

用法

npm i jtljia-ui

全局注册使用

// 在main.js中引入样式和全局注册
import JtljiaUi from 'jtljia-ui'
import VxeTable from 'vxe-table'
import VxeUI from 'vxe-pc-ui'
import 'jtljia-ui/dist/es/style.css'
import 'vxe-table/lib/style.css'
import 'vxe-pc-ui/lib/style.css'
const app = createApp(App);
app.use(VxeUI).use(VxeTable).use(JtljiaUi)

按需引入

// 在main.js中引入样式
import 'jtljia-ui/dist/es/style.css'
import 'vxe-table/lib/style.css'
import 'vxe-pc-ui/lib/style.css'
import { VxeTable, VxeToolbar, VxeGrid } from 'vxe-table'
import { VxeButton, VxeTooltip,VxeLoading } from 'vxe-pc-ui'
const app = createApp(App);
app.use(VxeTable).use(VxeToolbar).use(VxeGrid).use(VxeButton).use(VxeTooltip).use(VxeLoading)
// 单个.vue文件引入单个组件
;<script setup lang="ts">
  import {JtljTextDialog} from 'jtljia-ui'
</script>

jtljia-ui Volar 组件类型提示

// 需要在使用的项目的tsconfig.json文件中添加以下
compilerOptions：{
  "types": [
      "jtljia-ui/dist/es/components.d.ts",
    ],
}

快捷搭建项目模板

对于金螳螂家内部项目,我们提供了脚手架可以快速搭建项目 脚手架

更新日志

0.2.2 - 2024/07/26

1、增加上传列表组件

0.2.3 - 2024/08/05

1、列配置按钮样式和列表状态方式样式修改

0.2.4 - 2024/08/05

1、样式更新 2、解决表格在自适应高度下 分页显示不全的bug

0.2.5 - 2024/08/07

1、表格高度自适应文本修改

0.2.6 - 2024/08/08

1、修复表格未设置custom但是出现列配置的bug

0.2.7-0.2.8 - 2024/08/08

1、表格loading 样式修改

0.2.9 - 2024/08/26

1、文件上传组件支持配置列显示

0.3.0 - 2024/09/18

1、解决银行选择弹窗分页不生效

0.3.1 - 2024/11/18

1、解决表格暴露的实体中拿不到grid实例的方法 2、解决表格无数据时,列配置弹窗高度异常的问题