cool-admin-vue3 使用爬坑cool-admin 是基于 vue 和 element-plus开发的权限管理

cool-admin 是基于 vue 和 element-plus开发的权限管理系统。近期官方更新到vue3 + ts，就拿来改改耍耍

使用

目录结构

├──src 源文件
    │   ├── shims-vue.d.ts (描述文件)
    │   ├── main.ts (程序入口)
    │   ├── App.vue (页面挂载入口)
    │   ├── assets (资源文件)
    │   ├── components (业务组件)
    │   ├── config (系统配置)
    │   ├── cool (模块扩展入口)
    │   │   ├─ modules (模块列表)
    │   │   └─ index.ts (模块引入配置)
    │   ├── dict (字典)
    │   ├── icons (字体、图标库)
    │   │   └── svg (svg文件目录)
    │   ├── pages (基础页面)
    │   │   ├── layout (整体布局)
    │   │   │   ├── slider (侧边)
    │   │   │   ├── topbar (顶部)
    │   │   │   └── index.vue
    │   ├── views (视图页面, "/" 下的子路由)
    │   │   └── home (首页)
    │   ├── router (vue-router 路由)
    │   ├── service (axios 请求服务)
    │   ├── store (vuex 缓存)
    │   └── utils (工具)
    └──.vscode
        └── crud.code-snippets (cl-crud-ts 代码片段)

代码片段

输入 cl-crud-ts 生产一段 crud 代码，这个比较方便开发

聊天模块

这个用的是mock，可惜没有完整的功能

el-drawser 弹出会抖动

这个不知道是不是element-plus版本问题，我本地测试也一样。。。

自定义表单的组件渲染

prop 一定要写，不然绑定不到表单值里

const options = reactive<Form>({
    items: [
        {
            label: "姓名",
            prop: "name",
            component: {
                name: "el-input",
                props: {
                    clearable: true,
                    onChange(val){
                        console.log(val)
                    }
                }
            }
        }
    ]
})

refs.value.form.open(options)

组件 el-input 的参数及事件一定要放在 props 里面

模块的service

模块中的 service 一定要在 index.ts 中导出，不然无法绑定到 $service 中

service 的使用方法对比2的不同：

// vue2.x
created() {
    // 已挂载到 this 中
    this.$service.system.user.add()
}

// vue3.x
setup() {
    // 使用注入
    const $service = inject<any>("service")
    $service.system.user.add()
}

cl-table

默认是根据 view 区域自动计算 el-table 的 max-height，如果是内嵌表格就会出现高度缺少。。。官方有个参数：

继续爬坑中。。。