loader.config 정의


loader 모듈을 가져온 뒤, loader.config 를 통해 기본 설정을 하고, 필요한 items 을 import 합니다. 

설정은 루트 컴포넌트인 App.vue 에서 한 번만 호출하시면 됩니다.

plugin: 플러그인 파일들. (사용하지 않을 것이면 선언하지 않아도 됨.)

locales: 언어 파일 (기본값: ko.js)

theme: css 파일 테마 (기본값: default)

license: 라이센스



App.vue


<template>
  <div id="app">
    <p>@ibsheet/loader v{{loaderVersion}}</p>
  </div>
</template>

<script>
import loader from '@ibsheet/loader';

loader.config({
  registry: [{
    name: 'ibsheet',
    baseUrl: '/ibsheet'
  }]
});

export default {
  name: 'app',
  data() {
    return {
      loaderVersion: loader.version
    }
  },
  router
}
</script>

<style>
</style>




Page1.vue


컴포넌트 페이지에서 마운트 시점에 IBSheet8 객체를 생성, 언마운트 시점에 IBSheet8 객체를 제거하도록 합니다. 

<template>
  <div>
    <p>SearchMode: 2, 기본 페이지입니다.</p>
    <div id="sheetContainer"></div>
  </div>
</template>

<script>
import loader from '@ibsheet/loader';
import { SheetSampleData } from '../shared/ibsheet-data';

let sheetId = '';
const sheetEl = 'sheetContainer';

export default {
  mounted() {
    const { data, options } = SheetSampleData[0];

    loader.createSheet({
      el: sheetEl,
      options,
      data
    }).then((sheet) => {
      // 주의사항: 해당 구간에서 데이터 조회를 하면 안됩니다.
      sheetId = sheet.id;
      console.log('created sheet', sheet.id);
    });
  },
  beforeDestroy() {
    loader.removeSheet(sheetId);
  }
}
</script>


참고 사항1


.then 시점에서 IBSheet8 객체가 생성되지만, 초기화가 완료된 상태가 아니기 때문에 이 시점에서 IBSheet8 객체의 함수를 통한 조회나 수정(행추가등)등의 기능을 사용하시면 안됩니다.

이와 같은 기능의 사용은 반드시 onRenderFirstFinish 이벤트에 로직을 구성하여야 합니다.



참고 사항2


ibsheet-common.js 에 있는 IB_Preset 변수의 경우, window 객체에 들어가있습니다.

Vue 스코프와 다르기 때문에 사용시 참고해주시기 바랍니다.



참고 사항3


loader.getIBSheetStatic() 을 사용하여 시트 전역 객체를 가져올 수 있습니다.


// 시트 Static 객체 가져오기
const IBSheet = loader.getIBSheetStatic();
// id 가 sheet 인 시트 객체를 가져오기
console.log(IBSheet["sheet"]);



참고 사항4


시트 객체 자체를 data 속성에 정의하시면 안됩니다. 설정시 시트 객체를 계속해서 관찰하다보니 maximum call stack 오류가 발생할 수 있습니다.