深色模式
Hooks 函数
useCurtInstance
获取当前 vue 组件实例及相关操作函数
useCurtInstance(): useCurtInstanceResult
useCurtInstanceResult-useCurtInstance()返回值currentInstance: ComputedRef<ComponentInternalInstance | null>- 当前组件实例currentProps: ComputedRef<Record<string, any>>- 当前组件接收到的属性globalVars: ComputedRef<Record<string, any>>- 当前应用全局变量existEmit: (emitName: string) => boolean- 判断当前组件是否存在指定的分发事件
vue
<script setup lang="ts">
import { useCurtInstance } from "@easyui/element-plus-pro";
const emits = defineEmits(["update"]);
const { existEmit } = useCurtInstance();
console.log(`当前组件是否存在 update 分发事件:${ existEmit("onUpdate") }`);
</script>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
useComputeModel
对象及数组类型计算属性值修改辅助函数
useComputeModel(): useComputeModelResult
useComputeModelResult-useComputeModel()返回值getAryEntryModel: <T> (array: ComputedModelSource<T[]>, index: number) => WritableComputedRef<T>- 修改数组类型属性单个元素值getAryPickModel: <T> (array: ComputedModelSource<T[]>, indexes: number[]) => WritableComputedRef<T[]>- 修改数组类型属性多个元素值getObjEntryModel: <T> (object: ComputedModelSource<object>, keyPath: string) => WritableComputedRef<T>- 修改对象类型属性单个元素值getObjPickModel: <T> (object: ComputedModelSource<object>, pickKeys: string[]) => WritableComputedRef<T>- 修改对象类型属性多个元素值
vue
<template>
<!-- 修改数组类型属性单个元素值 -->
<input v-model="firstCar" placeholder="请输入" />
<!-- 修改对象类型属性单个元素值 -->
<input v-model="useName" placeholder="请输入" />
</template>
<script setup lang="ts">
import { computed } from "vue";
import { useComputeModel } from "@easyui/element-plus-pro";
const { getAryEntryModel, getObjEntryModel } = useComputeModel();
const emits = defineEmits(["update:cars", "update:user"]);
const props = defineProps({
cars: { type: Array as () => string[], default: () => ([]) },
user: { type: Object as () => Record<string, any>, default: () => ({}) }
});
const carList = computed<string[]>({
get: () => props.cars || [],
set: (value: string[]) => emits("update:cars", value)
});
const userInfo = computed<Record<string, any>>({
get: () => props.user || {},
set: (value: Record<string, any>) => emits("update:user", value)
});
const firstCar = getAryEntryModel(carList, 0);
const useName = getObjEntryModel(userInfo, "name");
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30