@qingbing/ts-element-plus v2.0.3

• version
• 1. 在 node 中安装使用
• 2. element-plus 各个组件参数整理说明
• 3. 使用示例
  • 3.1 Message 示例
  • 3.2 MessageBox 示例
  • 3.3 Notification 示例
  • 3.4 Other 示例

version

• 2.0.3
  • 修改对类型导入需要使用 import type
• 2.0.2
  • types
    • 整理了 element-plus 大多数组件需要的枚举并定义成类型
• 2.0.1
  • loading
    • class EPLoading
      • static instance(): EPLoading: 获取 loading 实例
      • begin(cb?: TCallableVoid): void: 开始 loading 组件
      • close(cb?: TCallableVoid): void: 关闭 loading 组件
  • message
    • class EPMessage
      • static msg(message: TMessage, type?: messageType): void: 消息提示: default 状态
      • static success(message: TMessage): void: 消息提示: success 状态
      • static info(message: TMessage): void: 消息提示: info 状态
      • static warning(message: TMessage): void: 消息提示: warning 状态
      • static error(message: TMessage): void: 消息提示: error 状态
  • message-box
    • class EPMessageBox
      • static alert(message: TMessage, options?: TCMessageBoxOptions, appContext?: AppContext | null): Promise`: alert 提示框
      • static confirm(message: TMessage, options?: TCMessageBoxOptions, appContext?: AppContext | null): Promise<MessageBoxData>: confirm 确认框
      • static prompt(message: TMessage, options?: TCMessageBoxOptions, appContext?: AppContext | null): Promise<MessageBoxData>: prompt 输入框`
  • notification
    • class EPNotification
      • static msg(options: TCNotificationOptions): NotificationHandle: 通知消息
      • static info(message: TMessage, options?: TCNotificationOptions): NotificationHandle: 通知消息(消息模式)
      • static success(message: TMessage, options?: TCNotificationOptions): NotificationHandle: 通知消息(成功模式)
      • static warning(message: TMessage, options?: TCNotificationOptions): NotificationHandle: 通知消息(警告模式)
      • static error(message: TMessage, options?: TCNotificationOptions): NotificationHandle: 通知消息(错误模式)
  • prevent-click
    • class PreventClick
      • static process: Alone: 独占进程实例
      • static start(cb: TCallableVoid, runningTipMessage?: TMessage | null): 事件开始执行函数
      • static over(cb?: TCallableVoid): 事件结束必须执行
  • props
    • 整理 element-plus 各组件参数类型，以 TC{ComponentName} 的形式定义

1. 在 node 中安装使用

npm install @qingbing/ts-element-plus

2. element-plus 各个组件参数整理说明

通过导入模块， 可获取到 element-plus 各个组件的 props 参数类型。组件参数类型以 TC{ComponentName} 的形式存在， 各个组件的默认值可参考 src/test/props.ts

3. 使用示例

3.1 Message 示例

<template>
  <el-button @click="messageDefault">Default</el-button>
  <el-button type="success" @click="messageSuccess">Success</el-button>
  <el-button type="info" @click="messageInfo">Info</el-button>
  <el-button type="warning" @click="messageWarning">Warning</el-button>
  <el-button type="danger" @click="messageDanger">Danger</el-button>
</template>

<script setup lang="ts">
import { EPMessage } from "./../index";

const messageDefault = () => {
  EPMessage.msg("message default");
};
const messageSuccess = () => {
  EPMessage.success("message success");
};
const messageInfo = () => {
  EPMessage.info("message info");
};
const messageWarning = () => {
  EPMessage.warning("message warning");
};
const messageDanger = () => {
  EPMessage.error("message error");
};
</script>

3.2 MessageBox 示例

<template>
  <el-button type="success" @click="messageBoxAlert">Alert</el-button>
  <el-button type="info" @click="messageBoxConfirm">Confirm</el-button>
  <el-button type="warning" @click="messageBoxPrompt">Prompt</el-button>
</template>

<script setup lang="ts">
import { Dump } from "@qingbing/ts-utils";
import { EPMessageBox, EPMessage } from "../index";

const messageBoxAlert = () => {
  EPMessageBox.alert("alert message", {
    title: "Alert title",
    callback: (action: string) => {
      EPMessage.warning(`Click type: ${action}`);
    },
  });
};
const messageBoxConfirm = () => {
  EPMessageBox.confirm("message success", {
    title: "Confirm",
    type: "warning",
    confirmButtonText: "确认",
    cancelButtonText: "取消",
  })
    .then((res) => {
      console.log(res);
      EPMessage.success("Delete Success");
    })
    .catch((err) => {
      console.log(err);
      EPMessage.warning("Delete Failure");
    });
};
const messageBoxPrompt = () => {
  EPMessageBox.prompt("Please input your No.", {
    title: "提示标题",
    inputPattern: /^1\d{10}$/,
    inputErrorMessage: "Invalid No.",
  })
    .then(({ value }) => {
      EPMessage.success(`Your No. is ${value}`);
    })
    .catch((action) => {
      EPMessage.info(`Input canceled`);
      Dump.log(action);
    });
};
</script>

3.3 Notification 示例

<template>
  <el-button type="default" @click="notificationMsg">message</el-button>
  <el-button type="success" @click="notificationSuccess">Success</el-button>
  <el-button type="warning" @click="notificationWarning">Warning</el-button>
  <el-button type="info" @click="notificationInfo">Info</el-button>
  <el-button type="danger" @click="notificationError">Error</el-button>
</template>

<script setup lang="ts">
import { EPNotification } from "../index";

const notificationMsg = () => {
  EPNotification.msg({
    message: "Notification message",
  });
};
const notificationSuccess = () => {
  EPNotification.success("Notification <success>", {
    title: "Success",
  });
};
const notificationWarning = () => {
  EPNotification.warning("Notification <warning>", {
    title: "Warning",
  });
};
const notificationInfo = () => {
  EPNotification.info("Notification <info>", {
    title: "Info",
  });
};
const notificationError = () => {
  EPNotification.error("Notification <error>", {
    title: "Error",
  });
};
</script>

3.4 Other 示例

<template>
  <el-button type="primary" @click="loadingHandle">Loading</el-button>
  <el-button type="primary" @click="clickNoRepeat">click-no-repeat</el-button>
</template>
  
<script setup lang="ts">
import { EPLoading, PreventClick } from "../index";

const loadingHandle = () => {
  const loadingInstance = EPLoading.instance();
  loadingInstance.begin(() => {
    console.log("beginning");
    setTimeout(() => {
      loadingInstance.close(() => {
        console.log("ending");
      });
    }, 2000);
  });
};

const clickNoRepeat = () => {
  PreventClick.start(() => {
    console.log(222);
    setTimeout(() => {
      PreventClick.over(() => {
        console.log("over");
      });
    }, 2000);
  });
};
</script>