在 Next.js 中使用

注意事项

leafer 及元素不能直接挂载到响应式数据上，会造成内部层层代理，拖慢运行速度

leafer-view.tsx

'use client' // 标识为client代码

import { useEffect } from 'react'
import { ILeafer } from '@leafer-ui/interface'

export default function LeaferView() {
  useEffect(() => {
    let leafer: ILeafer
    let isDestroy = false

    import('leafer-ui').then(({ Leafer, Rect }) => {
      // 必须在 useEffect 中异步加载代码，才有 canvas context 环境
      if (isDestroy) return

      leafer = new Leafer({ view: 'leafer-view' })

      const rect = new Rect({
        x: 100,
        y: 100,
        width: 200,
        height: 200,
        fill: '#32cd79',
        cornerRadius: [50, 80, 0, 80],
        draggable: true,
      })

      leafer.add(rect)
    })

    return () => {
      if (leafer) leafer.destroy() // 开发环境useEffect会执行2次，必须及时销毁
      isDestroy = true
    }
  })

  return (
    <div
      id="leafer-view"
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
      }}
    ></div>
  )
}

page.tsx

import LeaferView from './leafer-view' // 引入client组件

export default function Home() {
  return <LeaferView />
}