Javascript 使用vue指令清空文本字段

我有一个自动完成的文本字段。在那里，我可以放置任何文本，并打开匹配的结果集。如果我单击外部，它将清空文本字段。这是clickOutside指令代码

如何基于外部单击清空文本字段

单击外部指令

    import Vue from 'vue';

const nodeList = [];
const ctx = '@@clickoutsideContext';

let startClick;
const counter = 0;

const isServer = Vue.prototype.$isServer;

/**
 * added this on event function for direct dom manipulation
 */
const onEvent = (function() {
    if (!isServer && document.addEventListener) {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            }
        };
    }
    return function(element, event, handler) {
        if (element && event && handler) {
            element.attachEvent(`on${event}`, handler);
        }
    };
})();

!isServer &&
    onEvent(document, 'mousedown', e => {
        startClick = e;
    });

!isServer &&
    onEvent(document, 'mouseup', e => {
        nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
    });

// setting up mouse events

function createDocumentHandler(el, binding, vnode) {
    return function(mouseup = {}, mousedown = {}) {
        if (
            !vnode ||
            !vnode.context ||
            !mouseup.target ||
            !mousedown.target ||
            el.contains(mouseup.target) ||
            el.contains(mousedown.target) ||
            el === mouseup.target ||
            (vnode.context.popperElm &&
                (vnode.context.popperElm.contains(mouseup.target) ||
                    vnode.context.popperElm.contains(mousedown.target)))
        )
            return;

        if (
            binding.expression &&
            el[ctx].methodName &&
            vnode.context[el[ctx].methodName]
        ) {
            vnode.context[el[ctx].methodName]();
        } else {
            el[ctx].bindingFn && el[ctx].bindingFn();
        }
    };
}

/**
 * v-clickoutside
 * @desc Only trigger when click outside
 * @example
 * ```vue
 * <div v-element-clickoutside="handleClose">
 * ```
 */
export default {
    bind(el, binding, vnode) {
        nodeList.push(el);
        const id = counter + 1;
        el[ctx] = {
            id,
            documentHandler: createDocumentHandler(el, binding, vnode),
            methodName: binding.expression,
            bindingFn: binding.value
        };
    },

    update(el, binding, vnode) {
        el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
        el[ctx].methodName = binding.expression;
        el[ctx].bindingFn = binding.value;
    },

    unbind(el) {
        const len = nodeList.length;

        for (let i = 0; i < len; i += 1) {
            if (nodeList[i][ctx].id === el[ctx].id) {
                nodeList.splice(i, 1);
                break;
            }
        }
        delete el[ctx];
    }
};

从“Vue”导入Vue；
常量节点列表=[]；
常量ctx='@@clickoutsideContext'；
让startClick；
常数计数器=0；
const isServer=Vue.prototype.$isServer；
/**
*为直接dom操作添加了此on事件函数
*/
const onEvent=（函数（）{
if（！isServer&&document.addEventListener）{
返回函数（元素、事件、处理程序）{
if（元素&事件&处理程序）{
元素addEventListener（事件，处理程序，false）；
}
};
}
返回函数（元素、事件、处理程序）{
if（元素&事件&处理程序）{
attachEvent（`on${event}`，handler）；
}
};
})();
!IServer&&
OneEvent（文档'mousedown'，e=>{
startClick=e；
});
!IServer&&
OneEvent（文档'mouseup'，e=>{
forEach（node=>node[ctx].documentHandler（e，startClick））；
});
//设置鼠标事件
函数createDocumentHandler（el、绑定、vnode）{
返回函数（mouseup={}，mousedown={}）{
如果(
！vnode||
！vnode.context||
！mouseup.target||
！mousedown.target||
el.contains（鼠标移动目标）||
el.contains（mousedown.target）||
el==mouseup.target||
（vnode.context.popperrem）&&
（vnode.context.popperElm.contains（mouseup.target）||
包含（mousedown.target）））
)
返回；
如果(
绑定表达式&&
el[ctx].methodName&&
上下文[el[ctx].methodName]
) {
context[el[ctx].methodName]（）；
}否则{
el[ctx].bindingFn&&el[ctx].bindingFn（）；
}
};
}
/**
*v-ClickOut
*@desc仅在单击外部时触发
*@example
*“vue
* 
* ```
*/
导出默认值{
绑定（el、绑定、vnode）{
节点列表推送（el）；
常数id=计数器+1；
el[ctx]={
身份证件
documentHandler:createDocumentHandler（el、绑定、vnode），
方法名称：binding.expression，
bindingFn:binding.value
};
},
更新（el、绑定、vnode）{
el[ctx].documentHandler=createDocumentHandler（el，绑定，vnode）；
el[ctx].methodName=binding.expression；
el[ctx].bindingFn=binding.value；
},
解除绑定（el）{
const len=节点列表长度；
对于（设i=0；i

---

现在，实现此功能需要哪些代码更改或配置？任何建议都会对我有帮助。

任何您不使用默认模糊事件的原因。是的，我正在使用默认模糊事件。我已经改变了问题，有什么解决办法吗？