Плагин, о котором идет речь: jquery -drawr .
Я пытаюсь добавить этот эскизный компонент в мое одностраничное приложение Vue, чтобы пользователи могли создавать эскизы чертежей. в моем приложении и сохранить их.
Но я получаю сообщение об ошибке:
Uncaught ReferenceError: строка не определена
Я добавил файл jquery в src/assets/javascripts/jquery.drawr.combined.js и требуется в моем компоненте.
И создал компонент в моем Vue проекте sketch.vue:
<template>
<div>
<canvas id="canvas"></canvas>
</div>
</template>
<script>
import '../assets/javascripts/jquery.drawr.combined.js';
export default {
data() {
return{
}
},
mounted() {
const $ = require('jquery');
$(document).ready(function ($) {
$("#canvas").drawr({
"canvas_width": 600,
"canvas_height": 600,
"enable_transparency":false,
});
$("#canvas").drawr("start");
})
}
};
</script>
Добавлены значки материалов в моем index.html:
<!DOCTYPE html>
<html lang="en">
<head>
...
<!-- sketch component imports-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.6.95/css/materialdesignicons.css" rel="stylesheet">
</head>
<body>
...
</body>
</html>
импортировано jquery в моем main.js файле примерно так:
import Vue from 'vue';
...
import {$ , jQuery} from 'jquery';
import App from './App.vue';
import router from './router/router';
import store from './store/store';
...
// USE
Vue.use(VueAxios, axios);
global.$ = $;
global.jQuery = jQuery;
new Vue({
render: h => h(App),
router,
store,
}).$mount('#app');
Вот что я вижу:
