javascript - jQuery BlockUI + Vuejs + Webpack -
i creating vue directive work vuejs! have made work in other project made laravel + vuejs.
now doing on pure front-end project have used vue-cli create project webpack!
at first had problem make tooltip directive works , solved following code:
tooltip-directive.js
import vue 'vue' import _ 'lodash' const buildoptions = (config) => { return { ... title: config.title || '', ... } } vue.directive('pml-tooltip', { bind: function (el, binding) { let config = _.isstring(binding.value) ? buildoptions({ title: binding.value }) : buildoptions(binding.value) window.jquery(el).tooltip(config) }, unbind: function (el) { window.jquery(el).tooltip('destroy') } })
webpack.base.config.js
... plugins: [ new webpack.provideplugin({ $: "jquery", jquery: "jquery", "window.jquery": "jquery" }) ] ...
main.js
import vue 'vue' import app './app' require('bootstrap') // init directives require('./utils/directives/index') /* eslint-disable no-new */ new vue({ el: '#app', render: h => h(app) })
that's how code working (i need require bootstrap on main.js can use plugins on app!
now there block-ui directive:
import vue 'vue' import 'block-ui' const doblock = (bool, el) => { bool ? window.jquery(el).block() : window.jquery(el).unblock() } vue.directive('pml-block', { bind: function (el, binding) { doblock(binding.value, el) }, update: function (el, binding) { doblock(binding.value, el) } })
it returns follow error: uncaught (in promise) typeerror: __webpack_provided_window_dot_jquery(...).block not function(…)
somebody knows how solve it? have tried import jquery , use without window.
still not working!
i don't understand right way use jquery plugins directives webpack!
on laravel project use compile files (plugins , vuejs files) gulp , works great! webpack felling bit confused on how make things work!
Comments
Post a Comment