插件介绍

• 插件介绍
  • 1. 概要说明
    • 1.1 地址
    • 1.2 插件描述
    • 1.3 重要依赖
    • 1.4 插件安装
  • 2. 包说明
  • 3. 示例
    • 3.1 Message 示例
    • 3.2 MessageBox 示例
    • 3.3 Notification 示例
    • 3.4 Other 示例

1. 概要说明

1.1 地址

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 插件安装

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

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

2. 包说明

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

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

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