vue组件太多，找起来太麻烦？

双击页面元素，自动在 编辑器打开对应的vue组件

因为找组件找的很烦，正好看到vue devtool 有这个功能，简单组装下，嘎嘎好用，尤大大牛逼！！！

vue的同学们，复制粘贴到控制台试试吧

document.body.addEventListener("dblclick", (e) => {
    if (!e.target) {
        return;
    }
    const file = findFile(e.target);
    if (file) {
        console.log(file);
        window.fetch(`/__open-in-editor?file=${encodeURI(file)}`);
    }
});
function findFile(el) {
    const matchReg = /(src\/views)|(src\/view)|(src\/pages)|(src\/page)/;
    //vue2 __vue__
    //vue3 __vueParentComponent
    while (!(el.__vue__ || (el.__vnode && el.__vnode.ctx)) && el.parentElement) {
        el = el.parentElement;
    }
    if (!el) {
        return;
    }
    //vue2
    if (el.__vue__) {
        let comp = el.__vue__;
        while (!(comp.$options.__file && comp.$options.__file.match(matchReg)) && comp.parent) {
            comp = comp.parent;
        }
        return comp.$options && comp.$options.__file;
    }
    //vue3
    if (el.__vnode && el.__vnode.ctx) {
        let comp = el.__vnode.ctx;
        while (
            !(comp.type && comp.type.__file && comp.type.__file.match(matchReg)) &&
            comp.parent
            ) {
            comp = comp.parent;
        }
        return comp.type && comp.type.__file;
    }
}