如何在 vue.js 中使用 SVG.js 插件?

2024-05-08

我在用svg.js在我的 Laravel 项目中运行vue.js.

这就是我使用的方式svg.js

Step 1:安装svg.js作为我的 vue 应用程序中的插件。

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

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

Step 2:导入并使用插件。

import svgJs from "./plugins/vueSvgPlugin"

Vue.use(svgJs);

Step 3:那么我就可以做到这一点。

console.log(this.$svg);

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

但是我不知道如何添加svg.js插件。我想使用以下三个插件,以防有人想知道。

  1. svg.select.js
  2. svg.resize.js
  3. svg.draggable.js

我有与非合作的解决方案npm/module图书馆。

首先我将使用jsdelivr https://www.jsdelivr.com/直接从 Github 提供文件。例如https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/svg.min.js.

然后我用脚本.js https://github.com/ded/script.js/加载它们。

script.order([
  "https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/svg.min.js",
  "https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/svg.select.min.js"
], () => {
  // window.SVG is available
});

实例 https://codesandbox.io/s/7146z5vy11

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 vue.js 中使用 SVG.js 插件? 的相关文章

随机推荐