https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-element-plus
对 vue3 + element-plus 各个组件的 props 参数类型， 以及涉及用到的常用类型， 进行了整理
- @qingbing/ts-v3-utils: ^2.0.15
- element-plus: ^2.6.2
- vue: ^3.4.2
# yarn 安装
yarn add @qingbing/ts-v3-element-plus
# npm 安装
npm i @qingbing/ts-v3-element-plus当前包为 element-plus 的相关类型整理，无相关参数说明
<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><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><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><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>