高级表单
表单页是数据输入的主要途径。合理的表单设计,可以引导用户高效地完成表单背后的工作流程
功能特性
- 交互体验:简单表单未保存、复杂表单的未保存
交互体验
简单表单的未保存
表单内容变化5秒之后,当前输入内容暂存,用户误操作离开表单,重新打开后,内容不丢失
复杂表单的未保存
表单内容变化之后,用户执行任何离开当前画面的操作,都被组织,并给出友好提示
- 系统级别提示:点击浏览器回退按钮,画面弹出提示
当前表单尚未保存,确认离开?
- 系统级别提示:点击其他画面跳转路由,画面弹出提示
当前表单尚未保存,确认离开?
- 浏览器级别提示:关闭浏览器/当前窗口,画面弹出提示
离开此网站?系统可能不会保存您所做的更改。
- 浏览器级别提示:刷新当前画面,浏览器弹出提示
重新加载此网站?系统可能不会保存您所做的更改。
Vue 实现
比较表单数据是否发生变化
const formValueCompare = () => {
const nameValueChanged = model.name !== (user.name || '');
const birthDateValueChanged = moment(model.birthDate).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]') !== moment(user.birthDate).format('YYYY-MM-DDTHH:mm:ss.SSS[Z]');
const genderValueChanged = model.gender !== (user.gender || '');
const avatarValueChanged = model.avatar !== (user.avatar || '');
const descriptionValueChanged = model.description !== (user.description || '');
return nameValueChanged
|| birthDateValueChanged
|| genderValueChanged
|| avatarValueChanged
|| descriptionValueChanged;
};
系统级别提示,监听路由离开事件
/**
* 离开当前组件
*/
onBeforeRouteLeave((to, from, next) => {
if ( formValueCompare()) {
if (confirm('当前表单尚未保存,确认离开?')) {
next();
} else {
next(false);
}
} else {
next();
}
});
效果如下
浏览器级别提示,监听路由离开事件
const beforeunloadCallback = (e: any) => {
e = window.event;
if (e) {
e.returnValue = '关闭提示';
}
return '关闭提示';
};
// 表单变化时,增加浏览器监听事件
watch(model, () => {
window.removeEventListener('beforeunload', beforeunloadCallback);
if ( formValueCompare() ) {
window.addEventListener('beforeunload', beforeunloadCallback);
}
});
// 画面卸载时,移除 beforeunload 监听
onBeforeUnmount(() => {
window.removeEventListener('beforeunload', beforeunloadCallback);
});
效果如下
刷新浏览器
关闭浏览器