Element Plus 全局增强

导入 Fast.Element.Plus 根入口时会立即应用团队约定的 Element Plus 默认值，并增强 ElMessageBox 三个快捷单例方法。以下案例均直接使用原生 El* 组件，没有重复传入这些默认属性。

已修改的默认值

原生组件	Fast 默认值
ElDialog	draggable: true
ElForm	labelWidth: "auto"、labelSuffix: "："、scrollToError: true
ElInput	showWordLimit: true
ElInputNumber	controls: false
ElSelect	中文加载/空数据提示、collapseTags: true、collapseTagsTooltip: true
ElTable	border: true、highlightCurrentRow: true、rowKey: "id"
ElTree	defaultExpandAll: true、checkOnClickNode: true、highlightCurrent: true
ElTreeSelect	选择器和树组件的上述默认值，并设置 expandOnClickNode: false

表单、输入框与数字输入默认值

查看代码

Vue

<template>
	<ElForm :model="form" style="max-width: 520px">
		<ElFormItem label="项目名称">
			<ElInput v-model="form.name" maxlength="12" placeholder="默认显示字数统计" />
		</ElFormItem>
		<ElFormItem label="副本数量">
			<ElInputNumber v-model="form.count" :min="1" :max="10" />
		</ElFormItem>
	</ElForm>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const form = reactive({ name: "Fast", count: 1 });
</script>

选择器、表格与树默认值

查看代码

Vue

<template>
	<div class="demo-stack" style="width: 100%">
		<ElSelect v-model="selected" multiple style="width: min(100%, 420px)">
			<ElOption v-for="item in options" :key="item" :label="item" :value="item" />
		</ElSelect>
		<ElTable :data="rows" style="width: 100%">
			<ElTableColumn prop="name" label="项目" />
			<ElTableColumn prop="status" label="状态" width="120" />
		</ElTable>
		<ElTree :data="tree" node-key="id" style="width: 100%" />
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const selected = ref(["Vue", "Element Plus", "Fast.Element.Plus"]);
const options = ["Vue", "Element Plus", "Fast.Element.Plus", "TypeScript"];
const rows = [
	{ id: 1, name: "Fast.Element.Plus", status: "维护中" },
	{ id: 2, name: "Fast.NET", status: "稳定" },
];
const tree = [
	{
		id: 1,
		label: "Fast 系列",
		children: [
			{ id: 11, label: "Fast.Element.Plus" },
			{ id: 12, label: "Fast.NET" },
		],
	},
];
</script>

原生对话框默认拖拽

查看代码

Vue

<template>
	<ElButton type="primary" @click="visible = true">打开原生 ElDialog</ElButton>
	<ElDialog v-model="visible" title="默认可拖拽的 ElDialog" width="min(520px, 90vw)">
		<p>此处没有传入 draggable；导入 Fast.Element.Plus 根入口后默认值已变为 true。</p>
		<template #footer>
			<ElButton @click="visible = false">关闭</ElButton>
		</template>
	</ElDialog>
</template>

<script setup lang="ts">
import { ref } from "vue";

const visible = ref(false);
</script>

ElMessageBox 快捷方法增强

alert、confirm、prompt 默认使用中文标题和按钮，可拖拽，并禁止通过遮罩或 Escape 意外关闭。传入异步 beforeClose 时，确认阶段会显示按钮及全局 Loading，异步完成后默认关闭。

Alert、Confirm、Prompt 与异步关闭

查看代码

Vue

<template>
	<div class="demo-row">
		<ElButton @click="showAlert">Alert</ElButton>
		<ElButton type="warning" @click="showConfirm">Confirm</ElButton>
		<ElButton type="success" @click="showPrompt">Prompt</ElButton>
		<ElButton type="primary" @click="showAsyncConfirm">异步 beforeClose</ElButton>
	</div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";

const showAlert = (): void => {
	ElMessageBox.alert("默认标题为“温馨提示”，确定按钮为“确定”。").then(() => ElMessage.success("已确认"));
};

const showConfirm = (): void => {
	ElMessageBox.confirm("默认显示取消按钮，并禁止点击遮罩或按 Escape 关闭。", { type: "warning" })
		.then(() => ElMessage.success("已确认"))
		.catch(() => ElMessage.info("已取消"));
};

const showPrompt = (): void => {
	ElMessageBox.prompt("请输入项目名称。")
		.then(({ value }) => ElMessage.success(`已输入：${value}`))
		.catch(() => ElMessage.info("已取消"));
};

const showAsyncConfirm = (): void => {
	ElMessageBox.confirm("确认后模拟异步保存；完成前按钮和全局遮罩保持 Loading。", {
		type: "info",
		beforeClose: (action, instance, done) => {
			if (action !== "confirm") {
				done();
				return;
			}
			instance.confirmButtonLoading = true;
			window.setTimeout(() => {
				instance.confirmButtonLoading = false;
				ElMessage.success("保存完成");
				done();
			}, 1200);
		},
	}).catch(() => ElMessage.info("已取消"));
};
</script>