вызывать внешние функции javascript внутри экземпляра vue - PullRequest
Новая
       9

вызывать внешние функции javascript внутри экземпляра vue

0 голосов
/ 14 февраля 2019

Ниже приведен набор внешних функций javascript, которые я вызываю из экземпляра vue 

// debounce
function debounce(func, wait, immediate) {

    let timeout;

    return function() {
        let context = this, args = arguments;
         later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };

        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}
// -- end debounce

// animate css
function animateCss(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd);
}
// -- end animate css

и моего экземпляра vue 

new Vue({
    el : '#app',
    template : '#search-tpl',
    methods : {
        onKeyDown : debounce(function(){
             animateCss('#searchboxui-wrapper', 'fadeOutDown',function(){
                document.querySelector('#searchboxui-wrapper').style.display = 'none';  
            });
        }
    }
})

, но он всегда выбрасывает меня undefined, даже если я объявлю пакет axios или пакет socketio, мне будет брошена undefined, любая помощь, идеи, пожалуйста?

PS: я использую Vue CLI 3

enter image description here

1 Ответ

0 голосов
/ 14 февраля 2019

Создайте внешний файл js, скажем, externals.js, используйте импорт, чтобы импортировать все или определенные функции из этого файла и использовать их в своем коде Vue:

Содержимое в externals.js: 

    // debounce
    function debounce(func, wait, immediate) {

        let timeout;

        return function() {
            let context = this, args = arguments;
            later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };

            let callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    }
    // -- end debounce

    // animate css
    function animateCss(element, animationName, callback) {
        const node = document.querySelector(element)
        node.classList.add('animated', animationName)

        function handleAnimationEnd() {
            node.classList.remove('animated', animationName)
            node.removeEventListener('animationend', handleAnimationEnd)

            if (typeof callback === 'function') callback()
        }

        node.addEventListener('animationend', handleAnimationEnd);
    }
    // -- end animate css
export {debounce, animateCss}

Содержание в VueJS: 

import {debounce, animateCss} from '../../js/externals.js'

new Vue({
    el : '#app',
    template : '#search-tpl',
    methods : {
        onKeyDown(){
            debounce(function(){
                animateCss('#searchboxui-wrapper', 'fadeOutDown',function(){
                    document.querySelector('#searchboxui-wrapper').style.display = 'none';
                });
            });
        }
    }
})
...