Element Plus Pro

深色模式

Hooks 函数 ​

useInstance ​

获取当前 vue 组件实例及其相关操作函数

语法：useInstance(): UseInstanceReturn ​

ts
interface UseInstanceReturn {
  // 当前组件实例
  $instance: ComponentInternalInstance | null;
  // 当前应用全局变量
  $global: Readonly<Record<string, any>>;
  // 当前组件包含的插槽名称
  $slotsNames: ComputedRef<string[]>;

  // 获取指定全局变量
  getGlobal: <T = any>(path: string, defaultValue: T) => T;
  // 获取多个全局变量
  getGlobals: (keys: string[], defaultValue: Record<string, any>) => Record<string, any>;
  // 判断当前组件是否存在指定回调
  hasEmit: (event: string) => boolean;
  // 判断当前组件是否存在指定插槽
  hasSlot: (name: string) => boolean;
  // 判断节点是否为 vue 片段
  isFragment: (node: any) => boolean;
  // 判断节点是否为注释
  isComment: (node: any) => boolean;
  // 判断节点是否为有效节点，而非 vue 片段或注释
  isValidNode: (node: any) => boolean;
  // 获取指定插槽内部子元素节点
  getSlotChildNodes: (name: string) => VNode[];
}

使用示例 ​

vue
<script setup lang="ts">
  import { useInstance } from "@easyui/element-plus-pro";

  const { $global, hasEmit } = useInstance();

  console.log("当前应用全局变量：", $global);
  console.log(`当前组件是否存在 update 回调事件：${ hasEmit("onUpdate") }`);
</script>

useModel ​

双向绑定 computedModel 或 defineModel 定义的对象属性或数组元素值

语法：useModel(): UseModelReturn ​

ts
interface UseModelReturn {
  // 修改数组类型属性单个元素值
  modelAryEntry: <T = any> (array: ModelSource<any[]>, index: number, defaultValue?: T) => WritableComputedRef<T>;
  // 修改数组类型属性多个元素值
  modelAryPick: <T = any> (array: ModelSource<any[]>, indexes: number[]) => WritableComputedRef<T[]>;
  // 修改对象类型属性单个元素值
  modelObjEntry: <T = any> (object: ModelSource<object>, keyPath: string, defaultValue?: T) => WritableComputedRef<T>;
  // 修改对象类型属性多个元素值
  modelObjPick: <T extends object> (object: ModelSource<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 { useModel } from "@easyui/element-plus-pro";

  const { modelAryEntry, modelObjEntry } = useModel();
  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 = modelAryEntry(carList, 0);
  const useName = modelObjEntry(userInfo, "name");
</script>

useProps ​

获取当前 vue 组件 props 选项

语法：useProps<T>(options?: UsePropsOptions<T>): UsePropsReturn<T> ​

ts
type UsePropsOptions<T> = {
  // 组件 props 默认值
  defaults?: WithDefaults<T>;
}

type UsePropsReturn<T> = Readonly<T> & {
  // 判断组件 props 是否存在
  $has: <K extends keyof T>(key: K) => boolean;
  // 组件 props 键名集合
  $keys: () => Array<keyof T>;
}

使用示例 ​

vue
<script setup lang="ts">
  import { useProps } from "@easyui/element-plus-pro";

  const props = useProps();

  console.log(`当前组件是否存在 visible 属性：${ props.$has("visible") }`);
  console.log("当前组件 props 键名集合：", props.$keys);
</script>

useEmits ​

获取当前 vue 组件 emits 选项

语法：useEmits<T extends EmitEvents>(): UseEmitsReturn<T> ​

ts
type UseEmitsReturn<T extends EmitEvents> = {
  <K extends keyof T>(event: K, ...args: Parameters<T[K]>): void;
} & {
  // 判断组件 emits 是否存在
  $has: (event: string) => boolean;
  // 组件 emits 键名集合
  $keys: () => ReadonlyArray<string>;
}

使用示例 ​

vue
<script setup lang="ts">
  import { useEmits } from "@easyui/element-plus-pro";

  const emits = useEmits();

  console.log(`当前组件是否存在 change 事件：${ emits.$has("change") }`);
  console.log("当前组件 emits 键名集合：", emits.$keys);
</script>

useSDataList ​

快速构建数据列表（分页列表 & 列表数据选择）

语法：useSDataList(options?: UseSDataListOptions): UseSDataListReturn ​

ts
export interface UseSDataListOptions {
  // 数据选择器配置项
  selection?: Partial<DataSelection>;
  // 数据分页器配置项
  pagination?: Partial<DataPagination>;
}

interface UseSDataListReturn {
  // 数据列表引用对象
  dataListRef: Ref<any>;
  // 选择器选择类型
  selectionType: Ref<string>;
  // 已选数据键名集合
  selectedRowKeys: Ref<string[]>;
  // 已选数据集合
  selectedRows: Ref<Record<string, any>[]>;
  // 数据选择器配置项
  selection: ComputedRef<DataSelection>;
  // 当前页码
  currentPage: Ref<number>;
  // 每页数据条数
  pageSize: Ref<number>;
  // 数据总条数
  total: Ref<number>;
  // 数据分页器配置项
  pagination: ComputedRef<DataPagination>;
  // 列表数据刷新函数
  reload: (force?: boolean) => void;
}

使用示例 ​

vue
<script setup lang="ts">
  import { useSDataList } from "@easyui/element-plus-pro";

  const { dataListRef, selection, pagination, reload } = useSDataList();

  console.log("数据选择器配置项：", selection);
  console.log("数据分页器配置项：", pagination);
</script>

useMessage ​

消息提示

使用示例 ​

vue
<script setup lang="ts">
  import { useMessage } from "@easyui/element-plus-pro";
  
  const options: Record<string, any> = {};
  
  useMessage().success("成功消息提示", { ...options });
  useMessage().warning("警告消息提示", { ...options });
  useMessage().error("错误消息提示", { ...options });
  useMessage().info("普通消息提示", { ...options });
</script>

useMessageBox ​

消息提示弹出框

使用示例 ​

vue
<script setup lang="ts">
  import { useMessageBox } from "@easyui/element-plus-pro";
  
  const options: Record<string, any> = {};

  useMessageBox().success("成功消息弹出框", { ...options });
  useMessageBox().warning("警告消息弹出框", { ...options });
  useMessageBox().error("错误消息弹出框", { ...options });
  useMessageBox().info("普通消息弹出框", { ...options });
  useMessageBox().alert("无状态消息弹出框", { ...options });
  useMessageBox().confirm("确认消息弹出框", { ...options });
  useMessageBox().prompt("提交内容弹出框", { ...options });
</script>

useNotification ​

通知消息

使用示例 ​

vue
<script setup lang="ts">
  import { useNotification } from "@easyui/element-plus-pro";
  
  const options: Record<string, any> = {};

  useNotification().success("成功通知消息", { ...options });
  useNotification().warning("警告通知消息", { ...options });
  useNotification().error("错误通知消息", { ...options });
  useNotification().info("普通通知消息", { ...options });
  useNotification().alert("无状态通知消息", { ...options });
</script>