Skip to content

leafer-ui

web 版     worker 版     node 版     小程序版

在 Web 环境中运行,已适配移动端。

安装

确保你已安装了 Node.js

sh
npm install leafer-ui
sh
pnpm add leafer-ui
sh
yarn add leafer-ui
sh
bun add leafer-ui

同时我们提供了 Playground 环境create-leafer 命令行工具,方便大家直接体验官网示例。

通过 script 标签引入

你还可以通过 script 标签引入 CDN 文件来使用 LeaferUI(可下载到本地),查看示例

注意事项

Image / PointerEvent / DragEvent 会与浏览器的全局变量冲突,需使用以下别名。

html
<script src="https://unpkg.com/leafer-ui@1.4.0/dist/web.min.js"></script>
<script>
  const { Leafer } = LeaferUI // 全局变量,包含 leafer-ui 的所有功能

  // Image、PointerEvent、DragEvent 会与浏览器的全局变量冲突,请使用以下别名代替
  const { MyImage, MyPointerEvent, MyDragEvent } = LeaferUI

  // ...
</script>
html
<script src="https://unpkg.com/leafer-ui@1.4.0/dist/web.js"></script>
<script>
  const { Leafer } = LeaferUI // 全局变量,包含 leafer-ui的所有功能

  // Image、PointerEvent、DragEvent 会与浏览器的全局变量冲突,请使用以下别名代替
  const { MyImage, MyPointerEvent, MyDragEvent } = LeaferUI

  // ...
</script>
html
<script type="module">
  import { Leafer } from 'https://unpkg.com/leafer-ui@1.4.0/dist/web.module.min.js'
  // ...
</script>
html
<script type="module">
  import { Leafer } from 'https://unpkg.com/leafer-ui@1.4.0/dist/web.module.js'
  // ...
</script>

https://unpkg.com 无法访问时,可替换为 https://cdn.jsdelivr.net/npm

浏览器环境

需要支持 ES2015 语法。

浏览器

Chrome >= 51

Firefox >= 53

Safari >= 10

Edge >= 79

Opera >= 36

IE 不支持

create-leafer 命令行工具

直接创建 Vue + Leafer 项目

在项目中 快速集成 Leafer

在项目中 安装、升级插件

Playground 环境

想直接运行官网示例代码,可以使用 Playground 环境

开始体验

创建一个自适应窗口的交互应用,可以直接拖拽矩形。

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

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

leafer.add(rect)

引入 script 的方式

html
<!DOCTYPE html>
<html>
  <head>
    <title>Demo | Leafer UI</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script src="https://unpkg.com/leafer-ui@1.4.0/dist/web.min.js"></script>
  </head>
  <body></body>
  <script>
    var leafer = new LeaferUI.Leafer({ view: window })

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

    leafer.add(rect)
  </script>
</html>

下一步

体验性能

Released under the MIT License.