dragmove指令继续完善: 清除全局组件的数据

问题描述

dragmove指令经过封装和多次完善，已经没啥问题了。但今天一个同事告诉我位置没有重置，我说，不应该啊，我位置在跳转登录页就清楚了，而且我都测了。

问题分析和定位

调试过程中，听另一个同事说，课件组件提升为全局了。我突然明白为啥了，之前的组件结构是这样的，

现在成了这样，

明显看到Lecture组件提升了一层，和router-view组件平级了。

清除位置信息的代码是在login的beforeEnter钩子里，

    {
        path: 'login',
        component: Login,
        beforeEnter: (to, from, next) => {
            //清空保存的各弹窗的位置信息
            clearPositionMap();
            next();
        }
    }

//清空位置信息 （退出登录的时候）
export const clearPositionMap = () => {
    positionMap.clear();
}

如果lecture组件变成了全局，那么会导致有一些组件的数据清楚了，但是left、top、right、bottom样式没有清除。

问题解决

既然定位到了问题，那么改动就简单了。我是这么改的。

//清空位置信息 （退出登录的时候）
export const clearPositionMap = () => {
    const ids = positionMap.keys();
    for(let id of ids) {
        const ele = document.getElementById(id);
        if (!ele) continue; 
        ['left', 'right', 'top', 'bottom'].forEach((direction) => {
            ele.style[direction] = null;
        });
    }
    positionMap.clear();
}

（left、top、rigtht、bottom没法清楚了，只能设置成null，让他解析失败）

总结

1. 封装指令的时候要考虑到绑定和解绑两个过程。之前只考虑了绑定，解绑是组件销毁自动做的，但是组件全局以后，没有了销毁的过程，就要手动去清ui状态了。以后要考虑全面。
2. style的清除，可以设置成null等，让样式解析失败，自然就清除了

dragmove 完善之路：
开发拖拽指令
添加位置记录功能
修改初始位置不生效的问题
显示隐藏不生效的问题