2
votes

Comment utiliser les plugins SVG.js dans vue.js?

J'utilise svg.js dans mon projet Laravel exécutant vue.js .

Voici comment j'utilise svg.js

Étape 1: Installez svg.js en tant que plugin dans mon application vue.

console.log(this.$svg);

console.log(this.$svg.get("samplesvg"));

Étape 2: Importez et utilisez le plug-in.

import svgJs from "./plugins/vueSvgPlugin"

Vue.use(svgJs);

Étape 3: Ensuite, je peux le faire. p>

import svgJs from "svg.js/dist/svg"

export default {
    install(Vue) {
        Vue.prototype.$svg = svgJs
    }
}

Cependant, je ne sais pas comment ajouter les plugins svg.js . Je souhaite utiliser ci-dessous trois plugins, au cas où quelqu'un voudrait le savoir.

svg.select.js
svg.resize.js
svg.draggable.js

laravel javascript vue.js svg svg.js

3 commentaires

Faites de SVG un fichier global et importez-les. Cela devrait fonctionner

select.js et resize.js n'ont pas de fichiers de définition pour une importation

Les fichiers sans exportation ne sont-ils pas simplement exécutés?

3 Réponses :

1
votes

J'ai ma solution pour travailler avec une bibliothèque non npm / module .

Je vais d'abord utiliser jsdelivr pour servir le fichier directement depuis Github. Par exemple https://cdn.jsdelivr.net/npm/svg.js@2.7.1/dist/svg.min.js.

Ensuite, j'utilise script.js pour les charger.

script.order([
  "https://cdn.jsdelivr.net/npm/svg.js@2.7.1/dist/svg.min.js",
  "https://cdn.jsdelivr.net/npm/svg.select.js@3.0.1/dist/svg.select.min.js"
], () => {
  // window.SVG is available
});

Exemple en direct

0 commentaires

0
votes

J'ai dû changer d'approche en fonction du commentaire de Fuzzyma

Je viens de faire une simple importation dans mon fichier d'application, et tout a bien fonctionné. Il convient également de mentionner que j'ai utilisé les versions pour le faire fonctionner.

import * as SVG from 'svg.js/dist/svg';
import './plugins/svg.draggable/dist/svg.draggable';
import './plugins/svg.select/dist/svg.select';
import './plugins/svg.resize/dist/svg.resize';

3 commentaires

pourriez-vous expliquer comment vous avez fait cela dans le projet plus comme la structure des questions, qui était très utile, pour être opérationnel avec svg.js mais je veux aussi faire glisser, et je ne sais pas où tout mettre maintenant. en utilisant vue ui pour installer la bibliothèque et la brancher

@adamprocter ce que j'ai fait en question doit être jeté et vous devez utiliser ce que j'ai en réponse. Alors supprimez tout de la question, ajoutez des importations à partir de la réponse et tout devrait fonctionner. N'oubliez pas d'utiliser la version <3.0

Ok merci d'essayer n'était pas sûr de toutes les étapes

1
votes

Pour utiliser la version 3.x, vous le feriez soit simplement avec les importations esm:

<script src="node_modules/@svgdotjs/svg.js/dist/svg.js"></script>
<script src="node_modules/@svgdotjs/svg.draggable.js/dist/svg.draggable.js"></script>

Pas besoin d'utiliser des plugins pour vue. Utilisez simplement SVG () dans votre code lorsque vous en avez besoin. Si vous avez besoin d'autres fonctionnalités comme l '"ancien" SVG.on () , vous devez également l'importer: import {SVG, on} depuis' @ svgdotjs / svg.js ' code>

Ou vous l'incluez via des balises de script. svg.js est toujours livré avec des fichiers pré-groupés à cette fin:

import { SVG } from '@svgdotjs/svg.js'
import '@svgdotjs/svg.draggable.js'
// ...

Vous pouvez simplement utiliser la variable globale SVG dans ce cas et accéder à tout avec elle comme SVG.on(...)

0 commentaires