How to introduce jquery plug-in into vue

This article mainly introduces the relevant knowledge of "how to introduce jquery plug-in in vue". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to introduce jquery plug-in in vue" can help you solve the problem.

Preface

Needless to say, sometimes you really need to use some good jQuery plug-ins in Vue, so in order to use this plug-in, there is no need to introduce jQuery globally, so you need to introduce it locally, how to do it?

Take jcanvas as an example

Jcanvas is a jQuery-based canvas drawing tool, how to introduce it locally?

In vue, it makes sense that import is done, but not in jcanvas, because jcanvas cannot find a global window.jQuery object, so it will report an error when using it. What should I do?

Import $from "jquery"

Import jcanvas from 'jcanvas'; / / there is nothing to say about the above two lines

Jcanvas ($, window); / / the key is this line

At this point, you can use it directly in mounted:

$("canvas") DrawArc ({

FillStyle: "black"

X: 100

Y: 100

Radius: 50

})

Why is it done after ion-rangeslider can import? Because ion-rangeslider checks for the existence of local-scoped jQuery variables, which is more comprehensive than jcanvas considers. Jcanvas only checks whether there is a jQuery object on window, and without it, you can't hang a plug-in to jQuery.

This is the end of the introduction of "how to introduce jquery plug-ins in vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.