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

标签 javascript laravel vue.js svg svg.js

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

这就是我使用svg.js

的方式

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

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

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

第 2 步:导入并使用插件。

import svgJs from "./plugins/vueSvgPlugin"

Vue.use(svgJs);

第 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直接从 Github 提供文件。例如https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="255653420b4f5665170b120b14" rel="noreferrer noopener nofollow">[email protected]</a>/dist/svg.min.js .

然后我使用script.js加载它们。

script.order([
  "https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="730005145d190033415d445d42" rel="noreferrer noopener nofollow">[email protected]</a>/dist/svg.min.js",
  "https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f0f5e4adf0e6efe6e0f7ade9f0c3b0adb3adb2" rel="noreferrer noopener nofollow">[email protected]</a>/dist/svg.select.min.js"
], () => {
  // window.SVG is available
});

Live Example

关于javascript - 如何在 vue.js 中使用 SVG.js 插件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55588400/

相关文章:

php - 如何让 onblur 和 onfocus 在 php 脚本中工作?

php - fatal error : Call to a member function query() on null (Laravel 5. 2)

css - Laravel 从资源 css 和 js 目录访问 css 和 js 文件

laravel - $model->get() 上 Eloquent Model 时间戳的时区错误,但使用 print_r() 正确

javascript - 单击按钮以允许网页在两次单击之间进行处理

javascript - 如何确保在允许提交我的表单之前勾选我的确认复选框

javascript - 范围变量在 ng-click 处理程序中不可见

javascript - Vue 中测量溢出不正确

javascript - VueJS 组件未加载

javascript - 用 setInterval 替换 vue.js 模板