给网页装一台小空调

右上角是机身,右下角可以打开遥控器。试试开机、调温,再收起遥控器:空调会继续运行。

推荐:安装 npm 包

npm install @yunlefun-home/air-conditioner-widget@0.4.3
import { cdnAssets, mountAirConditioner } from '@yunlefun-home/air-conditioner-widget'

// 在客户端、DOM 就绪后挂载;页面组件卸载时调用 widget.remove()。
const widget = mountAirConditioner(document.body, {
  ...cdnAssets,
  placement: 'top-right',
  enableAudio: false,
})

适合有构建工具的项目。cdnAssets 使用与已安装包版本一致的字体、音频和 Logo,也可以改为自托管资源。

博客模板:复制一段脚本

把下面这段固定版本的 jsDelivr 代码放进网站的全局页头或页脚,无需构建。默认关闭音效;加上 data-audio="true" 可启用声音。

改成 data-placement="top-left" 可安装在左侧。键盘用 Tab、Enter / 空格操作,Esc 收起遥控器。手机可直接点按。

自托管时将整个 widget 目录一起部署;跨站加载需允许字体和音频的跨域访问。完整安装说明