In vue, how to use trigger to simulate blur events and find the code. Use element-ui at the same time

the elemnt-ui used. Want to simulate blur events. Find the code

Javascript
Jul.06,2021

html 

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

js 

this.$refs.input.blur()

Let's have a universal version that triggers arbitrary events (including custom events) to any element other than abstract component tags such as template, transition, etc., which can be native dom tags, custom component tags or even elements looped by v-for. For example, trigger the "foo" event to the tag)

html 

< ref="xx" />

js 

import Vue from "vue"

export default {
    methods:{
        // xxdom
        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;
        },
        // xxrefdom
        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")
            }
        }
    }
}

Previous: React developer tools in production mode

Next: JS page DIV scrolling jump problem, find a master to solve

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu