DiagramViewer使用方法

1.安装包

本项目可以使用npm包安装，也可以使用url直接引入。

npm包地址：@snapano/diagramviewer

cdn地址：@snapano/diagramviewer

使用案例：diagramviewer-demo

使用案例：solution首页地址

2.npm包使用方法

安装

npm i @snapano/diagramviewer -S

引入包

// @ts-ignore
import DiagramViewer from '@snapano/diagramviewer'

因为diagramviewer并不是ts开发，直接引入会报ts错误，因此引入前要加@ts-ignore，忽略ts错误检查

使用

以vue3为例，在onMounted（vue2中为mounted）中调用。

import {onMounted} from 'vue'

onMounted(()=>{
   let data_url='14'
   let container = document.querySelector('#app')
   let diagram = new DiagramViewer(container,data_url);
})

如果是其他框架，请确保DiagramViewer调用的时候，container元素已经存在于真实的dom中。

3.url使用方法。

引入包

在jsdelivr上搜索@snapano/diagramviewer包，然后获取dist文件下index.js 或者index.min.js的地址。

这里我以1.0.9版本的index.min.js为例说明。

https://cdn.jsdelivr.net/npm/@ggwork/[email protected]/dist/index.min.js

在vue根目录的index.html文件中引入该js

<script src="https://cdn.jsdelivr.net/npm/@snapano/[email protected]/dist/index.min.js"></script>

使用包

DiagramViewer作为全局变量挂载到了window上，如果要使用的话，就在对应页面的onMounted方法中调用即可

import { onMounted } from "vue";

onMounted(() => {
  let data_url='14'
   let container = document.querySelector('#app')
   let diagram = new DiagramViewer(container,data_url);
});

4.如何更新npm包和url