glodon-bimface-vue/README.md

Bimface Component for Vue

# glodon-bimface-vue

BIMFACE提供的开箱即用的VUE组件，便于开发者快速将BIMFACE引入到VUE项目中。

注意：此组件适用于Vue2版本的项目，如需在Vue3中使用，请安装glodon-bimface-vue3

**[BIMFACE官网](https://bimface.com)**

## 使用方式

1. 在项目中安装glodon-bimface-vue:

```
npm install glodon-bimface-vue --save
```

2. 在需要引入BIMFACE的VUE页面或组件中引入glodon-bimface-vue:
   
```
import {BimfaceComponent, Glodon, onBimfaceModelLoaded} from 'glodon-bimface-vue'
```
+ ```BimfaceComponent```是VUE组件，可注册到```components```中，在```template```模板中使用；

+ ```Glodon```是BIMFACE提供的各类接口的根级命名空间，可参考[BIMFACE文档中心](https://bimface.com/docs-center)了解如何进行BIMFACE二次开发；

+ ```onBimfaceModelLoaded```用于注册模型加载完成事件，模型加载后，开发者可通过加载完成事件得到BIMFACE的```app```、```viewer```实例对象，进行二次开发；

3. 基本的使用方式参考：

```
<template>
  <div id="app">
    <BimfaceComponent style="height: 100vh;" :viewToken="viewToken" />
  </div>
</template>

<script>
import {BimfaceComponent, Glodon, onBimfaceModelLoaded} from 'glodon-bimface-vue'

export default {
  name: 'App',
  components: {
    BimfaceComponent
  },
  data() {
    return {
      viewToken: ''
    }
  },
  created() {
    onBimfaceModelLoaded(({app, viewer}) => {
      console.log('Bimface Model Loaded', app, viewer);
    })

    // getViewToken为异步获取模型viewToken的方法，由开发者基于后端API自行封装，此处仅为模拟异步接口返回viewToken值的示例
    const getViewToken = () => new Promise((resolve) => setTimeout(() => resolve('68063517918c46269445b255fb429e3c'), 3000));

    getViewToken().then((value) => this.viewToken = value);
  }
}
</script>
```