# dascom-le-editor

> 标签编辑器组件库，基于 Vue 3 + Fabric.js，支持矩形/圆形/线条/文字/条码/二维码/图片/计数器等元素的设计与编辑。

## 安装

```bash
npm install dascom-le-editor
```

## 使用

```js
import 'dascom-le-editor/dist/editor.css'
import editor from 'dascom-le-editor'

// 实例化，传入 html dom + 可选配置参数
const editorIntance = new editor(dom, {
  width: 85.6,          // 标签宽度 (mm)，默认 85.6
  height: 54,           // 标签高度 (mm)，默认 54
  dpi: 203,             // 画布渲染默认 DPI
  showVarnish: false,   // 是否显示光油配置面板，默认 true
  enabledTools: [       // 启用的工具栏组件（白名单），不传则全部启用
    'rect',             // 矩形
    'circle',           // 圆形
    'line',             // 线
    'text',             // 文字
    'barcode',          // 条码
    'barcode2d',        // 二维码
    'image',            // 图片
    'counter',          // 日期计数器
    'json',             // json
    // 'textname',       // 名字
  ],
  // disabledTools: ['textname'],  // 另一种用法：禁用指定组件（黑名单）
})

// 导出当前画布 JSON
const toExportJson = async () => {
  const json = await editorIntance?.exportJson()
}

// 导入 JSON 数据，新开编辑 tab
const toImportJson = async (fileJson: any) => {
  await editorIntance?.loadJson(fileJson)
}

// 导出当前画布图片
const toExportImage = async () => {
  const data = await editorIntance?.getImage()
}

// 销毁编辑器实例
editorIntance.destroy()

// 设置多图层开关
editorIntance.setMultiLayerEnabled(isShow: boolean)

// 是否展示打开文件栏
editorIntance.toggleEditTabs(isShow: boolean)

// 开启自动保存
editorIntance.openAutoSave((data) => {

}, 10000)
```
