money-loop
v0.1.0
Published
Self-registering money loop web component.
Maintainers
gengxing-appReadme
anime-money-loop
这个仓库现在同时提供两种交付形态：
- 站内预览页：
npm run build - 外部可嵌入的 Web Component：
npm run build:widget
npm install 用法
安装：
npm install money-loop在你的前端入口里先 import 一次，导入时会自动注册 <money-loop-scene>：
import 'money-loop';然后就可以直接在页面里使用：
<money-loop-scene width="100%" max-width="960px"></money-loop-scene>如果你的项目有 SSR，确保这段 import 只在浏览器端执行。
外部网站调用
构建 widget：
npm run build:widget产物位于：
dist-widget/money-loop-scene.js外部页面只需要引入这一个 module script，然后写自定义标签：
<script type="module" src="/dist-widget/money-loop-scene.js"></script>
<money-loop-scene></money-loop-scene>可用属性
| 属性 | 说明 | 默认值 |
| --- | --- | --- |
| paused | 布尔属性，存在即暂停 | 播放中 |
| aria-label | 可选无障碍描述 | 内置默认文案 |
| width | 组件宽度，如 640px、100% | 100% |
| max-width | 组件最大宽度，如 1280px | 1280px |
纯 HTML 示例
<!doctype html>
<html lang="en">
<body style="margin:0;padding:24px;background:#111;">
<script type="module" src="/dist-widget/money-loop-scene.js"></script>
<money-loop-scene
width="800px"
max-width="1000px"
aria-label="Money loop demo"
></money-loop-scene>
</body>
</html>React 页面示例
import 'money-loop';
export function MoneyLoopEmbed() {
return <money-loop-scene width="100%" max-width="960px" />;
}暂停示例
<money-loop-scene paused></money-loop-scene>本地开发
npm run dev预览页仍走原来的 Vite SPA 入口，导出脚本 export:webm / export:webp 也继续基于 dist/ 工作。
发布到 npm
包名固定为：
money-loop发布前会自动执行 npm run build:widget，所以直接执行：
npm publish如果要我代发，给我以下任一种发布权限即可：
- 推荐：一个对
money-loop有发布权限的 npm automation token（配置成当前环境的NPM_TOKEN）。 - 或者你先在当前环境执行
npm adduser完成登录，我再继续npm publish。