我如何可以将dhtmlxGantt显示屏与我的组件配合使用？

Question

我使用dhtmlxGantt，因为我在我的项目中需要甘特图，但是我遇到了显示问题。我使用vuejs组件，这就是为什么我将dhtmlxGantt的代码放入我的组件中但显示不清晰的原因这是我的代码：//甘特组件

    <template>
 <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">


                    <div class="card-body">
                        <div id="gantt_here">

                    </div>
                    </div>

             </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        created(){
       gantt.init("gantt_here");
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
<style scoped>
body{
    margin: 10px ;
}
</style>

并且我称这两个文件为

    <script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" rel="stylesheet">

请我需要帮助

Answer 1

VueJS对于组件外部的javascript组件非常复杂，在这种情况下，我可以建议您进行组件库的内部导入并尝试使用它，因为我从未使用过此组件，所以我不知道它是否使用jQuery，但是有使用jQuery in VueJS的方法。例如，使用命令npm install --save @types/dhtmlxgantt安装库，然后将其导入到组件中。

<script>
import gantt from '@types/dhtmlxgantt'

export default {
  ...
  created() {
    gantt.init("gantt_here");
  }
}
</script>