@vuepress-denaro/vuepress-plugin-moefy-canvas
Version:
Decorate your web pages with lovely canvas animations.用可可爱爱的 canvas 动效装饰你的网页.
101 lines (100 loc) • 3.93 kB
JavaScript
import { Meteor } from '@moefy-canvas/theme-meteor';
import { Popper, PopperShape } from '@moefy-canvas/theme-popper';
import { Ribbon } from '@moefy-canvas/theme-ribbon';
import { Sakura } from '@moefy-canvas/theme-sakura';
import { Sparkler, SparklerMode } from '@moefy-canvas/theme-sparkler';
import { classNameByBEM } from '@vuepress-denaro/core/client';
import { defineComponent, h, onBeforeUnmount, onMounted } from 'vue';
import { theme, canvasOptions as userCanvasOptions, themeConfig as userThemeConfig, } from './const.js';
import '../styles/moefy-canvas.scss';
export const DenaroMoefyCanvas = defineComponent({
name: 'DenaroMoefyCanvas',
setup() {
const id = classNameByBEM('moefy-canvas');
let moefyCanvas = null;
const getCanvas = () => {
const canvas = document.getElementById(id);
return canvas;
};
onMounted(() => {
switch (theme) {
case 'ribbon': {
const themeConfig = {
size: 90,
...userThemeConfig,
};
const canvasOptions = {
opacity: 1,
zIndex: 0,
...userCanvasOptions,
};
moefyCanvas = new Ribbon(themeConfig, canvasOptions);
break;
}
case 'sakura': {
const themeConfig = {
numPatels: 30,
...userThemeConfig,
};
const canvasOptions = {
opacity: 1,
zIndex: 0,
...userCanvasOptions,
};
moefyCanvas = new Sakura(themeConfig, canvasOptions);
break;
}
case 'popper': {
const themeConfig = {
shape: PopperShape.Star,
size: 1.75,
numParticles: 10,
...userThemeConfig,
};
const canvasOptions = {
opacity: 1,
zIndex: 0,
...userCanvasOptions,
};
moefyCanvas = new Popper(themeConfig, canvasOptions);
break;
}
case 'sparkler': {
const themeConfig = {
mode: SparklerMode.TRAIL,
...userThemeConfig,
};
const canvasOptions = {
opacity: 1,
zIndex: 0,
...userCanvasOptions,
};
moefyCanvas = new Sparkler(themeConfig, canvasOptions);
break;
}
case 'meteor': {
const themeConfig = {
numParticles: null,
particleColor: {
light: 'rgba(102, 175, 239, .2)',
dark: 'rgba(245, 236, 66, .2)',
},
...userThemeConfig,
};
const canvasOptions = {
opacity: 1,
zIndex: 0,
...userCanvasOptions,
};
moefyCanvas = new Meteor(themeConfig, canvasOptions);
break;
}
}
moefyCanvas && moefyCanvas.mount(getCanvas());
});
onBeforeUnmount(() => {
moefyCanvas && moefyCanvas.unmount();
});
return () => !__VUEPRESS_SSR__ ? h('div', { class: id }, h('canvas', { id })) : h('');
},
});