移除元素

标准移除

// #移除元素 [标准移除]
import { Leafer, Rect } from 'leafer-ui'

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

const rect = Rect.one({ fill: '#32cd79' }, 100, 100)

leafer.add(rect)

setTimeout(() => {

    rect.remove() // // 等同于 leafer.remove(rect)

}, 2000)

条件移除

同 find() 方法的参数一致，内部会先 find() 再批量移除。

注意事项

需安装 查找元素插件 才能使用，或直接安装 leafer-game、 leafer-editor （已集成查找元素插件）

// #移除元素 [条件移除]
import { Leafer, Rect } from 'leafer-ui'
import '@leafer-in/find' // 导入查找元素插件

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

const rect = Rect.one({ id: 'book', fill: '#32cd79' }, 100, 100)
const rect2 = Rect.one({ fill: 'blue' }, 300, 100)

leafer.addMany(rect, rect2)

setTimeout(() => {

    // 移除 id 为 book 的元素
    leafer.remove('#book') // // 等同于 leafer.find('#book').forEach(item => item.remove())

}, 2000)

销毁移除

// #移除元素 [销毁移除]
import { Leafer, Rect } from 'leafer-ui'

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

const rect = Rect.one({ fill: '#32cd79' }, 100, 100)

leafer.add(rect)

setTimeout(() => {

    rect.destroy() // // 等同于 rect.remove() => rect.destroy()

}, 2000)

清空元素

// #移除元素 [清空元素]
import { Leafer, Rect } from 'leafer-ui'

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

const rect = Rect.one({ fill: '#32cd79' }, 100, 100)
const rect2 = Rect.one({ fill: 'blue' }, 300, 100)

leafer.addMany(rect, rect2)

setTimeout(() => {

    leafer.clear() // // 清空并销毁所有子元素

}, 2000)

销毁应用

// #销毁应用
import { Leafer, Rect } from 'leafer-ui'

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

leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100))

setTimeout(() => {

    leafer.destroy() // // 应用销毁，默认为异步方式
    // leafer.destroy(true)  //  销毁应用，同步方式

}, 2000)

恭喜 🎉

你已完成基础知识的学习，接下来带你了解几个 好玩的插件，放松一下～

下一步

交互状态

在前端环境中使用

Vue

React

在服务端渲染中使用

Nuxt.js

VitePress

Next.js