vue.js - vue 组件中的 svg.js
问题描述
我在添加 SVG.js 库时遇到了很大的问题。就像如果我不这样做,我仍然无法绘制任何东西:(
我的文件:-public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
</head>
<body style="font-size:11px">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
-src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { SVG } from '@svgdotjs/svg.js'
import 'bootstrap/dist/css/bootstrap.min.css'
Vue.use(SVG);
Vue.config.productionTip = false
new Vue({
router, SVG,
render: h => h(App)
}).$mount('#app')
-src/components/picture.vue
<template>
<div class="row">
<div class="col-sm border-right" style="margin-right: 15px;background-color: #f3f3f3;">
</div>
<div class="col-auto" style="width: 703px;">
<div class="row">
<div class="col px-1 pt-1 pb-1">
<div class="border row" style="width: 653px;height: calc(100vh - 61px);overflow: auto;">
<div id="drawing">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm border-left" style="margin-left: 15px; background-color: #f3f3f3;">
</div>
</div>
</template>
<script>
import axios from "axios";
import { SVG } from '@svgdotjs/svg.js'
export default {
data() {
return {
}
},
created() {
var draw = SVG().addTo('drawing').size(400, 400)
var rect = draw.rect(100, 100)
},
methods: {
}
}
</script>
我在页面上收到此错误:
编译失败。
./src/components/Picture.vue 模块错误(来自 ./node_modules/eslint-loader/index.js):
D:\inzynierka\projekt\src\components\Picture.vue 41:17 错误“rect”被赋值但从未使用 no-unused-vars
✖ 1 个问题(1 个错误,0 个警告)
解决方案
由于重构不完整,已声明但未在代码中任何地方使用的变量很可能是错误。这样的变量会占用代码中的空间,并可能导致读者混淆。
var rect = draw.rect(100, 100)
不使用矩形。
如果你想忽略它。你可以这样做
// eslint-disable-next-line no-unused-vars
var rect = draw.rect(100, 100)
推荐阅读
- laravel - 数字海洋水滴的高内存使用率
- unix - 使用 awk 将字段从第 n 个重新排序到 NF-1
- reactjs - 使用 React Router 的 React Styleguide
- python - Pandas:根据从其他列中提取的子字符串截断列中的字符串(Python 3)
- windows - 写入已安装的 Windows 共享
- python - Keras ImageDataGenerator 验证拆分未从洗牌数据集中选择
- c# - C# wrapper Java 库生成奇怪的代码
- java - 线程“main”java.lang.IllegalStateException 中的异常:驱动程序可执行文件是一个目录
- python - 网格根据最大的小部件调整线条的大小
- javascript - 通过调用 javascript 类的对象来调用内部函数。我想通过调用类对象来打印优先队列数组