vue-mxdraw v0.0.11

vue-mxdraw 使用说明

安装

yarn add vue-mxdraw

如果项目为typescript开发环境，需要安装three@^0.113.2的类型声明

yarn add three@^0.113.2 -D

插件依赖mxfun.min.js 如果不指定组件mxFunSrc属性 请将mxfun.min.js文件移动到public/js目录下

使用

js项目中使用

main.js

import Mxdraw from "vue-mxdraw"
Vue.use(Mxdraw)

Vue组件 App.vue

<template>
    <Mxdraw 
        ref="Mxdraw"
        mxFunSrc="./js/mxFun.min.js">
    </Mxdraw>
</template>
<script>
export default {
  name: 'App',
  mounted() {
    console.log(this.$refs.Mxdraw.mxDrawObject)
    setTimeout(()=> {
      // 提供的全局方法
      console.log(this.$mxFun)
    }, 1000)
  }

}

### ts项目中获取使用图纸对象和$mxFun全局变量
> Vue组件 App.vue
``` typescript
<template>
    <Mxdraw 
        ref="Mxdraw"
        @mxFunInit="mxFunInit"
        @mxDrawObjectInit="mxDrawObjectInit"
        mxFunSrc="./js/mxFun.min.js">
    </Mxdraw>
</template>
<script langt="ts">
import { Component, Vue } from "vue-property-decorator"
import { MxdrawCompoent as MxdrawType, MxCADObject } from 'vue-mxdraw/types/Mxdraw';
// 使用$refs需要定义类型
@Component
export default class App extends Vue{
  $refs!: {
    Mxdraw: MxdrawType
  }
  mxFunInit() {
    console.log(this.$mxFun)
  }
  mxDrawObjectInit(mxDrawObject: MxCADObject) {
    console.log(this.$refs.Mxdraw.mxDrawObject)
    console.log(mxDrawObject)
  }
}
</script>

Mxdraw 属性说明

Mxdraw 事件说明

Mxdraw 插槽说明

其他