🐟「Sakana! Widget Vue」

Origin Repo

Sakana! Widget for Vue2/3.

Vue组件包装的石蒜模拟器，通过vue-demi库实现了同时支持Vue2和Vue3.

Pre-Requirements

• 如果使用项目使用Vue2，在安装前需要安装@vue/composition-api和vue-demi作为peerDependencies

• 如果项目使用Vue3，只需要安装vue-demi

Install

npm install @lovekicher/sakana-widget-vue

或

yarn add @lovekicher/sakana-widget-vue

• Vue2

import Vue from "vue";
import SakanaWidget from "@lovekicher/sakana-widget-vue";
Vue.use(SakanaWidget);

• Vue3

import { createApp } from "vue";
import SakanaWidget from "@lovekicher/sakana-widget-vue";
const app = createApp({});
app.use(SakanaWidget);

Usage

Quick Start

创建一个没有控制栏，并初始化为泷奈的组件

<SakanaWidget :controls="false" character="takina"/>

Props

原有的option均作为组件prop传入，且支持响应式。 如果选项不支持动态修改，会销毁实例并自动重建。

支持的选项：

• autoFit
• character
• controls
• rotate
• size
• stroke
• threshold

state也作为prop传入并在修改时自动调用setState

关于autoFit的限制

✅ 无需要求父级DOM容器是一个BFC，内部已经提供了一个容器进行组件挂载

License

Released under MIT License, please note that the 2 default images should not be used for any commercial activities. This project used to be a secondary development based on sakana-widget.

Image source: 大伏アオ @blue00f4 pixiv