# vue3-webpack 更新说明

# 项目地址

# 文档

# 使用差异

# Service

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

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

# cl-admin, cl-admin-crud

引用方式替换

// vue2.x
import { BaseService } from "cl-admin";
import { ContextMenu } from "cl-admin-crud";

// vue3.x
import { BaseService } from "@/core";
import { ContextMenu } from "@/crud";

# Element-plus

// vue2.x
this.$message.success("提示");

// vue3.x
ElMessage.success("提示");

# Ref

import { useRefs } from "@/core";

setup() {
    const { refs, setRefs } = useRefs();

    onMunted() {
        // 使用
        console.log(refs.value.name)
    }

    return {
        refs,
        setRefs
    }
}
<template>
	<div :ref="setRefs('name')">绑定 ref</div>
</template>

# Types

内置说明参数

TIP

vscode 下使用会自动引入, 无需担心路径

# CrudLoad

cl-crud 回调 load 说明

onLoad({ ctx, app }: CrudLoad) {
    ctx.service().done()
    app.refresh()
}

# Form

cl-form 自定义表单参数说明

setup() {
    const options = reactive<Form>({
        title: "自定义表单",
        items: [
            {
                label: "姓名",
                prop: "name"
                component: {
                    name: "el-input"
                }
            }
        ]
    });

    onMounted() {
        // 使用 setRefs 绑定 cl-form
        refs.value.form.open(options);
    }
}
<cl-form :ref="setRefs('form')"></cl-form>

# Upsert

cl-upsert 新增, 编辑配置说明

setup() {
    const upsert = reactive<Upsert>({
        items: [
            {
                label: "姓名",
                prop: "name"
                component: {
                    name: "el-input"
                }
            }
        ]
    });

    return {
        upsert
    }
}
<cl-upsert v-bind="upsert"></cl-upsert>

# Table

cl-table 表格配置说明

setup() {
    const table = reactive<Table>({
        columns: [
            {
                label: "姓名",
                prop: "name"
            }
        ]
    });

    return {
        table
    }
}
<cl-table v-bind="table"></cl-table>

# ContextMenu

cl-context-menu 右键菜单配置说明

import { ContextMenu } from "@/crud";

setup() {
    const list = reactive<ContextMenuItem []>({
        {
            label: "刷新",
            callback: (_: any, done: Function) => {
                done()
            }
        }
    });

    function openCM(e) {
        ContextMenu.open(e, {
            list
        })
    }

    return {
        list,
        openCM
    }
}
<p @contextmenu.stop.prevent="openCM">右键打开</p>