vue指令的坑：完善dragmove指令

昨天封装了dragmove指令，今天用封装的dragmove指令把项目中的相关代码给替换掉。过程中遇到了一些问题，有考虑不全的问题，也有vue指令本身的坑。

1. 考虑不全的情况

这个指令是给元素加上拖拽的功能，并且在拖拽结束的时候把位置信息保存到全局的一个地方，路由切换再切换回来，可以恢复之前的位置。这个已经实现。可我忽略了退出登录再次登录，需要重置默认值。

这个问题的解决思路就是在路由切换到登陆的时候清空positionMap这个全局的Map。代码写在路由钩子里。

    {
        path: `/login`,
        name: 'login',
        component: Login,
        props: route => ({ params: route.params }),
        beforeEnter: (to, from, next) => {
            //清空保存的各弹窗的位置信息
            clearPositionMap();
            next();
        },
        description: '登录页'
    }

2.vue指令本身的坑

位置的改变是通过设置left和top等内联样式生效的。在指令inserted的时候从全局的positionMap取出保存的位置信息来恢复，但是如果元素这时候还有别的v-bind:style="left:0px"的话，会被后者覆盖，导致恢复不了保存的位置。

这是vue指令本身的坑，多个指令操作同一个属性的时候，没法保证顺序。

解决思路有两个，一个是初始的位置用css设置，然后从positionMap里取出的位置就可以用style覆盖了。二是设置一个延时，这样就可以保证dragmove的style设置在最后。第二种方式太过不优雅，而且也会有闪一下的现象，最终我采用了第一种方式。

总结

1. 重构已有的代码，想要做到不遗漏，需要把所有的代码都看一遍。不过等重构完有bug再改也无可厚非，只要整体的思路是正确的。

2. vue指令的顺序的坑：多个指令操作同一属性的顺序问题，以后封装指令要注意。