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 环境 。
开始体验
创建一个自适应窗口的交互应用,可以直接拖拽矩形。
引入 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>