vue中如何用trigger模拟blur事件，求代码。同时使用element-ui

Question

使用的elemnt-ui。想要模拟blur事件。求代码求代码

Answer 1

html

<input type='text' ref='input' />

js

this.$refs.input.blur()

Answer 2

来个万能版的吧，向除了template、transition之类的抽象组件标签以外的任意元素(可以是原生dom标签也可以是自定义组件标签甚至可以是被v-for循环的元素)触发任意事件(包括自定义事件。比如向hahaha标签触发"foo"事件)

html

<任意的标签 ref="xx" />

js

import Vue from "vue"

export default {
    methods:{
        // 找到要被xx对应的dom
        findDom(target){
            target = target || this.$refs.xx;
            // 找到dom元素
            let doms = [];
            if(target instanceof Vue){
                doms.push(target.$el);
            }else if(target instanceof window.Element){
                doms.push(target);
            }else if(Array.isArray(target)){
                target.forEach(t=>{
                    doms = doms.concat(this.findDom(t))
                });
            }
            return doms;
        },
        // 向带xx标记ref的元素的dom发送自定义事件
        triggerEvent(eventName){
            eventName = String(eventName);
            const event = new Event(eventName);
            const doms = this.findDom();
            if(doms.length){
                doms.forEach(dom=>{
                    dom.dispatchEvent(event)
                });
            }else{
                throw new Error("没找到dom，告辞")
            }
        }
    }
}