Element Plus global enhancements

Importing the Fast.Element.Plus root immediately applies team defaults and enhances three ElMessageBox singleton shortcuts. These examples use native El* components without repeating those defaults.

Changed defaults

Native component	Fast default
ElDialog	draggable: true
ElForm	labelWidth: "auto"、labelSuffix: "："、scrollToError: true
ElInput	showWordLimit: true
ElInputNumber	controls: false
ElSelect	Chinese loading/empty text, collapseTags: true, collapseTagsTooltip: true
ElTable	border: true、highlightCurrentRow: true、rowKey: "id"
ElTree	defaultExpandAll: true、checkOnClickNode: true、highlightCurrent: true
ElTreeSelect	The Select and Tree defaults above, plus expandOnClickNode: false

Form and input defaults

View code

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>

Selector, table, and tree defaults

View code

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>

Draggable native dialogs

View code

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 shortcuts

Alert, confirm, and prompt default to Chinese titles/buttons, dragging, and no accidental close through the overlay or Escape. With asynchronous beforeClose, confirmation shows button/global loading and closes after the callback settles.

Alert, confirm, prompt, and asynchronous close

View code

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>