npm package: @qingbing/ts-v3-element-plus
Description: 常规typescript 版本的 element-plus 的一些接口总结和封装功能及函数
Author: qingbing
Latest version: 2.1.6

# 插件介绍

- [插件介绍](#插件介绍)
  - [1. 概要说明](#1-概要说明)
    - [1.1 地址](#11-地址)
    - [1.2 插件描述](#12-插件描述)
    - [1.3 重要依赖](#13-重要依赖)
    - [1.4 插件安装](#14-插件安装)
  - [2. 包说明](#2-包说明)
  - [3. 示例](#3-示例)
    - [3.1 Message 示例](#31-message-示例)
    - [3.2 MessageBox 示例](#32-messagebox-示例)
    - [3.3 Notification 示例](#33-notification-示例)
    - [3.4 Other 示例](#34-other-示例)

## 1. 概要说明
### 1.1 地址

[https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-element-plus](https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-element-plus)

### 1.2 插件描述

对 vue3 + element-plus 各个组件的 props 参数类型， 以及涉及用到的常用类型， 进行了整理

### 1.3 重要依赖

- @qingbing/ts-v3-utils: ^2.0.15
- element-plus: ^2.6.2
- vue: ^3.4.2

### 1.4 插件安装

```bash
# yarn 安装
yarn add @qingbing/ts-v3-element-plus

# npm 安装
npm i @qingbing/ts-v3-element-plus
```

## 2. 包说明

当前包为 element-plus 的相关类型整理，无相关参数说明

## 3. 示例



### 3.1 Message 示例

```vue
<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 示例

```vue
<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-v3-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 示例

```vue
<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 示例

```vue
<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>
```