时间戳

首页 > 解决方案 > 将第三方 js 应用程序集成到 vue.js2

javascript - 将第三方 js 应用程序集成到 vue.js2

问题描述

我正在尝试将第三方 js 应用程序集成到我的 vue.js 项目中。它是一个分子编辑器，将作为组件加载到我的页面上。链接到 js 应用程序 - https://jsme-editor.github.io/dist/index.html 这就是我想要实现的 -

<html><head>
<script type="text/javascript" language="javascript" src="jsme/jsme.nocache.js"></script>
<script>
  //this function will be called after the JavaScriptApplet code has been loaded.
  function jsmeOnLoad() {
     jsmeApplet = new JSApplet.JSME("jsme_container", "380px", "340px");
     jsmeApplet.setAfterStructureModifiedCallback(showEvent);
     document.getElementById("log").value = "";
  }
  function showEvent(event) {
    var log = document.getElementById("log");
    log.value = event.action + " at: " + event.atom + " b: " + event.bond + " m: " + event.molecule + " smiles:" + event.src.smiles() + "\n" + log.value;
  }
</script></head>
<body>
<div id="jsme_container"></div>
<textarea id="log" rows="5" cols="50"> </textarea>
</body>
</html>

到目前为止我所做的是我已将其声明为组件，如下所示 -

<template>
  <div class="hello">
    <button @click="notify">Notify</button>
    <div id="jsme-container" ref="jsmeContainer"></div>
  </div>
</template>
<script>
export default {
    name: 'newcomp',
    data() {
        return {
            jsmeIsLoaded : false,
            div_select : null
        }
    },
    props: {
        txt: String,
        height: {
            type: String,
            required: true
        },
        width: {
            type: String,
            required: true
        },
        smiles: String,
        options: String,
        onChange: Function
    },
    mounted() {
        let script = document.createElement('script')
        script.src = '/home/rathore/Desktop/test_component/src/assets/JSME_2020-12-26/jsme/jsme.nocache.js'
        document.head.appendChild(script)
        this.$nextTick(
            window.jsmeOnLoad = () => {this.jsmeIsLoaded = true;}
        )
    },
    watch: {
        jsmeIsLoaded(){
            this.div_select = this.$refs.jsmeContainer.id
            const div_loader = document.createElement('script')
            const applet_txt = 'jsmeApplet = new JSApplet.JSME("'+this.div_select+'","300px","400px");'
            //console.log(applet_txt,this.div_select)
            const div_applet = document.createTextNode(applet_txt);
            div_loader.appendChild(div_applet);
            document.head.appendChild(div_loader);
        }
    },
    methods: {
        //Unused method
        handleJsmeLoad(){
            if (this.props.options){
                this.jsmeApplet = new window.JSApplet.JSME(this.div_select, this.props.width, this.props.height, {options: this.props.options});
            }
            else {
                this.jsmeApplet = new window.JSApplet.JSME(this.div_select, this.props.width, this.props.height);
            }
            this.jsmeApplet.setCallBack("AfterStructureModified", this.handleChange);
            this.jsmeApplet.readGenericMolecularInput(this.props.smiles)
        },

        handleChange(jsmeEvent){
            if (this.props.onChange) {
              this.props.onChange(jsmeEvent.src.smiles())
            }
        },

        notify(){
            if (this.jsmeIsLoaded){
                alert("JSME LOADED!!");
            }
        }
    },
}
</script>

并称为组件 -

应用程序.vue 
template>
  <div id="app">
    <newcomp :height="'300px'" :width="'400px'" :onChange="logsmile" />
  </div>
</template>

<script>
import newcomp from './components/NewComponenet.vue'

export default {
  name: 'App',
  components: {
    newcomp
  },
  methods: {
    logsmile(smiles){
      console.log(smiles)
    }
  },
}
</script>

在这里，我尝试在 <head> 中注入 <script> 标签。它按我的预期注入，但它不起作用它给我错误 - Uncaught ReferenceError: JSApplet is not defined。并且它不会呈现编辑器。但实际上我希望它使用handleJSMELoad()方法呈现。请建议我解决方案。

标签： javascriptvuejs2vue-component

解决方案

推荐阅读