关于前端:Vue-基于Vue的页面表单自动保存

28次阅读

共计 1000 个字符，预计需要花费 3 分钟才能阅读完成。

近期波及到的一个需要，在一个有很多表单的页面，须要定时对页面内局部表单的内容调用接口进行主动保留，不便用户在下次进入页面时进行反显。

定义一个标记需被主动保留的字段的数组;
注册防抖办法;
监听表单，在变更时调用防抖办法;
在办法内依据标记辨别是否为关注字段与是否产生变更，并解决。

<script>
import {debounce} from 'lodash'

// 主动保留指标字段
const AUTO_SAVE = ['username', 'phone', relationList]
export default {data() {
        return {
            // 表单
            formData: {
                id: '',
                username: '',
                phone: '',
                relationList: [],},
            // 已保留的表单
            savedFormData: {},
            // 节流查看办法
            debouncedFormDataCheck: () => {},
        }
    },
    watch: {
        formData: {handler() {
                // 监听表单，并在发生变化时调用查看办法
                this.debouncedFormDataCheck()},
            deep: true,
        }
    },
    mounted () {
        // 反显表单
        this.initFormData()
        // 节流暂存
        this.debouncedFormDataCheck = debounce(this.saveFormDataTemplate, 5000)
    },
    methods: {
        // 反显
        async initFormData() {let res = await getTempFormDataApi({ ...})
            if(res && res.data) {
                // 复位数据
                Object.assign(this.formData, res.data)
                Object.assign(this.savedFormData, res.data)
            } else {
                // 同步暂存对象
                this.savedFormData = {...this.formData}
            }
        },
        // 暂存
        async saveFormDataTemplate() {for(let item of AUTO_SAVE) {
                // 遍历指标字段
                if(this.formData[item] !== this.savedFormData[item]) {
                    // 指标字段已变更
                    let res = await saveTempFormDataApi({...})
                    // ...
                }
            }
        }
    }
}
</script>

正文完