我正在嘗試將@jsplumb/browser-ui社區版集成到我的應用程式中。根據團隊的建議jsplumb，我正在使用 ，@jsplumb/browser-ui但我不知道如何開始將它集成到我的Vue/Nuxtjs application.
以下是我正在遵循的步驟：
- 安裝
@jsplumb/browser-ui使用npm install @jsplumb/browser-ui --save. - 將庫包含在
nuxt-config.jsas 的一部分中script：
script: [
{
src:"node_modules/@jsplumb/core/js/jsplumb.core.umd.js",
mode: 'client'
},
{
src:"node_modules/@jsplumb/browser-ui/js/jsplumb.browser-ui.umd.js",
mode: 'client'
}
]
- 我的代碼如下：
<template>
<div class="row">
<div class="col-md-12">
<div id="diagram" style="position: relative" />
</div>
</div>
</template>
<script>
if (process.browser) {
const jsPlumbBrowserUI = require('node_modules/@jsplumb/browser-ui/js/jsplumb.browser-ui.umd.js')
const instance = jsPlumbBrowserUI.newInstance({
container: document.getElementById('diagram')
})
console.log(instance)
}
export default {
mounted () {
if (process.browser) {
console.log('MOUNTED BLOCK')
}
}
}
</script>
我不明白如何將它集成到我的應用程式中。該檔案沒有提供關于Vue/Nuxtjs
uj5u.com熱心網友回復：
使用上一個答案中所示的動態匯入并僅在瀏覽器背景關系中匯入 jsplumb 包解決了 OP 面臨的問題。
除了$refs用于 DOM 選擇之外。
uj5u.com熱心網友回復：
以下基于@kissu 評論對我有用：
<template>
<div class="row">
<div class="col-md-12">
<div id="diagram" ref="diagram" style="position: relative" />
</div>
</div>
</template>
<script>
export default {
async mounted () {
if (process.browser) {
const jsPlumbBrowserUI = await import('@jsplumb/browser-ui')
const instance = jsPlumbBrowserUI.newInstance({
container: this.$refs.diagram
})
console.log(instance)
}
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346397.html
標籤：javascript Vue.js nuxt.js jsplumb