@ blobatar/ veue (帮助)
Vue 3 适配器用于 斑点 ——决定性 任意字符串生成的几何化相 .
bun add @blobatar/vue blobatar
blobatar 是一个对等依赖:适配器不携带自己的渲染器.
<script setup lang="ts">
import { Blobatar } from "@blobatar/vue";
</script>
<template>
<Blobatar :name="user.email" :size="48" />
</template>
动画blobatars需要样式表,并渲染为内置的 SVG 而不是一个
<img> —— 说 :hover 永远不要在内部开火 <img>,所以这两种模式不能是
合并:
<script setup lang="ts">
import "blobatar/motion.css";
</script>
<template>
<Blobatar :name="user.email" animate="hover" />
</template>
完全选项参考生活 主读取器。 。 。 .
跟着指针
眼睛可以跟踪光标. 那层是运动系统的一部分 需要JavaScript,所以它是一个单独的子路径,除非您 导入 :
<script setup lang="ts">
import { ref } from "vue";
import { Blobatar } from "@blobatar/vue";
import { useGaze } from "@blobatar/vue/gaze";
import "blobatar/motion.css";
import "blobatar/gaze.css"; // required — the eyes hold still without it
const blob = ref();
useGaze(blob, { travel: 3, target: "pointer" });
</script>
<template>
<Blobatar ref="blob" :name="user.email" animate="always" :size="200" />
</template>
这需要裁判而不是交回一个 因为Vue你已经拥有了
这个 参考者认为是组件实例而不是一个要素
可复读 $el 关闭它,所以同样的电话工作 如果你把裁判
<svg> 换成你自己.
travel 是外出,是选择地层的地层
--mo-track-travel 开始于 0px,所以一个带有样式表的页面
游览无处可去 司机跑来跑去 眼睛也动不了 这是在
视图框单位——blobatar为100横,所以 3 占面额的3%
1.5至4读得很好。 别管它了 样式表是拥有它的
因为财产继承了,或者
任何反应:
.hero .mo-eyes { --mo-track-travel: 3px; }
选择一个,而不是两个。 这样的规则胜过 travel,因为选项是
内入 <svg> 以继承的方式达到眼睛.
当元素到达时,选项中的所有内容都会被读取一次. 目标
更改为 lookAt在你自己的监视器中:
const { lookAt } = useGaze(blob, { travel: 3 });
watchEffect(() => lookAt(watching.value ? "pointer" : "rest"));
两者都是一样的: 客户座标的点,元素, "pointer"
为光标, "rest" 将眼睛停在中间 而不恢复闲置
看着,或 null 什么都没有,谁把它拿回来。 最后一个要求
胜利者,无论谁要求的,在摇摆之前就瞄准
而不是掉下来,所以可以直接通过护身符 lookAt 没有
每按键重接一次.
版本
套装中的每个软件包都发布相同的版本,主要名称为:
生成 ——被冰冻的种子对视映射. @blobatar/vue@2 调制
gen2, 确切为 blobatar@2 已经 升级主机是选入
用户的外观正在改变, 因此对等范围在 blobatar 是一个准确的 主要的
而不是说 ^:混合对不是版本 skew,而是错误的图片.
来自 blobatar/vue
blobatar/vue 仍然存在,而且依然有效。 这个包裹再出口,所以
两者是同一组成部分,而不是两份,不能漂移。 那个子路径
在v3中被贬低并删除——没有急事,也没有等待的风险.
bunx blobatar-codemod .
bun add @blobatar/vue
代码重写 blobatar/vue 在进口中发现的规格,
require,动态 import() 并且能安全地跑两次 没有
安装任何设备; 该命令属于您 .