У меня есть директива Vue, которая использует плагин JQuery для применения маски ввода к входу (требования моего босса, она должна работать с JQuery и плагином, который загружает _Layout страницы). Хорошо, пока что я сделал следующее:
const directive = (function createDirective() {
// . . .
function dispatchToVue (e) {
const vueEv = new Event('input', { bubbles: true });
e.target.dispatchEvent(vueEv);
}
function registerMask(el, binding) {
$(function () {
const $el = $(el);
const maskConfig = getMaskConfig(binding);
$el.maskMoney(maskConfig);
$el.maskMoney('mask');
el.addEventListener('keyup', dispatchToVue);
});
}
return {
bind: function (el, binding, vnode) {
// Checks if JQuery is loaded
function checkJquery() {
if ($) {
registerMask(el, binding);
} else {
setTimeout(function () {
checkJquery();
}, 500);
}
}
checkJquery();
},
update: function (el, binding, vnode) {
// . . .
}
};
}());
export default directive;
Это работает, но, как вы можете видеть, у меня есть таймер, который проверяет каждую полсекунду, если загружен JQuery, что неоптимально. Просматривая inte rnet, я нашел статью о том, как работать с Vue и JQuery, но он использует жизненный цикл mount
компонента, чтобы знать, когда компонент может использовать JQuery. Согласно директиве, у меня нет этой возможности.
Есть идеи? Заранее спасибо.