<iframe id="sketch" src="/static/js/marvinjs-15.6.29-all/editor.html" style="width: 703pxheight: 428px"></iframe>
2.将所需的js文件加载到所需要的页面
import '../../../static/js/marvinjs-15.6.29-all/js/marvinjslauncher.js'
import '../../../static/js/marvinjs-15.6.29-all/gui/lib/promise-1.0.0.min.js
3.进入页面时进行加载
handleDocumentReady(e) {
var p =MarvinJSUtil.getEditor("#sketch")
var that =this
p.then(function (sketcherInstance) {
marvinSketcherInstance = sketcherInstance//购买授权之后可以获取到
marvinSketcherInstance.setDisplaySettings({//增加左侧的选项
"toolbars":"search"
})
}, function (error) {
})
}
4.点击将结构式生成mol字符串数组
search_makesure() {
var mol =null
var that =this
marvinSketcherInstance.exportStructure(this.structureType).then(function (source) {
mol = source
if (marvinSketcherInstance.isEmpty() || !mol ||null == mol ||"" == mol) {
alert("请画出结构式")
}
that.mol_val = mol
console.log(that.mol_val)
})
}
5.var marvinSketcherInstance 在vue项目中不能放在data里面进行定义，获取不到授权信息，将此变量放在export default 之外。
所需介绍及链接地址：
百度 marvin js使用介绍
官网 简介 示例 如何嵌入
以上是对marvin js的初步了解，只包括怎么在项目中进行引入，与后台接口的对接仍在完善。
他们是一个东西，没什么区别。js组件就是把一系列的功能封装起来，包装成一个对象。比如一个表格组件，一个表单组件等等。一个组件必然包含了某种特定的职能，目的在于可以复用。比方说，你的网站需要展示一个万年历，那么最基本的方法，就是自己画table,自己写逻辑，麻烦得一笔。假如我有100个页面，那么是不是说我要把这些代码复制100遍？？所以，为了避免这种麻烦，就可以把万年历封装成一个组件，然后做成一个js文件发布，别人下载就行了。首先要理解什么是json,在js中json实际上就是一个对象了，可以通过jquery的方法将json转化成字符串，或者将字符串转化为json。
$.parse(),这个方法可以把字符串转成Json。
JSON.stringify()方法用于把json转成字符串。
js中一般可以直接对json进行操作的，比如一个json对象为：
var obj = {name:'abd'}
那么可以直接通过"."来获取对象的属性，
obj.name//abd
就可以拿到对象的值了。
