seyu-vfx v1.1.3

Seyu VFX

简介

基于 Vue3 将一些网页特效封装成组件，可以更加灵活的使用他们。

前往 Gitee 仓库

使用介绍

• 全局导入

import { createApp } from 'vue'
// 导入组件库
import seyuVfx from "seyu-vfx"

const app = createApp(App)
//注册组件库
app.use(seyuVfx)

app.mount('#app')

• 按需导入

import { FloatDown } from 'seyu-vfx'

• 请在合适的位置导入样式

import "seyu-vfx/src/style.css"

组件文档

FloatDown

可以理解为樱花飘落特效的组件但这里可以自定义一些效果。使用方式也很简单：

<FloatDown>
  <div>这里是内容哦</div>
</FloatDown>

属性

• imgList: Array，自定义飘落图片，默认是樱花图案；
  • 接收一个数组，组件中使用 new Image() 加载数组的每一项，所以可以是图片路径也可以是其它。
• minWidth: Number，图片最小宽度，默认 30，单位像素，不能小于零；
  • 组件中会随机设置图片的宽度，但不会低于该属性；
  • 无需设置最大宽度，图片的最大宽度为最小宽度的1.5倍；
• minHeight: Number，图片最小高度，默认 25，与 minWidth 类似；
• count: Number，生成飘落图片的数量，默认 10，不能小于零；
• xSpeed: Number，横向移动速度，默认 1，不能小于零，值越大移动越快；
• ySpeed: Number，纵向移动速度，默认 1，不能小于零，值越大移动越快；
• direction: 'left' | 'right'，飘落方向，默认 'left'；
• disableRotate: Boolean，禁止旋转，默认 false，飘落的图片默认会自动旋转，设置该属性可以禁用旋转。

插槽

• default 默认插槽，飘落的图片会显示在插槽内容之上，若想让部分内容在飘落图片之上可以将 css 的 z-index 的值设置高于 50，
• above 与默认插槽相比，飘落的图片会在该插槽下方

方法

• start: (reset?: Boolean) => void
  • 开始飘落动画；
  • 参数 reset，是否重置当前页面中飘落的图片
• stop: (clear?: Boolean) => void
  • 停止飘落动画；
  • 参数 clear，是否清除页面中飘落的图片

CompassClock

罗盘时钟组件。 Tip: 组件提供日期格式、间距、字体大小等设置，请根据使用时的放置位置进行大小调整，若空间不足会导致内容重合，反之会留出大量空白。

<CompassClock />

属性

• format: Array，需要显示的日期,数组项类型为字符串，包含以下内容：
  • Year: 显示年份；
  • Month: 显示月份；
  • Day: 显示日；
  • Week: 显示周；
  • Hour: 显示小时；
  • Minute: 显示分钟；
  • Seconds: 显示秒。
  • 以上项除 Week 外均为中文数字格式，若需要使用阿拉伯数字格式请将首字母改为小写即可；
  • Week 显示的格式为 “星期X”，week 显示的格式为：“周X”；
  • 除 Year 外其它日期格式均可存在多个，不过应该不会这么做；
  • 默认将日期的中文数字格式全部显示。
• gap: Number，每一圈日期的间距，默认 10，单位像素；
• fontSize: Number，字体大小，默认 14，单位像素；
• color: String，字体颜色，默认 #000000；
• highlightColor: String，当前时间的高亮颜色，默认 #09c。

方法

• start: () => void
  • 开启定时器
• stop: () => void
  • 关闭定时器

本次更新内容

• 优化 FloatDown 组件，在组件离开页面时停止动画渲染。
• 调整了 FloatDown 组件包裹 above 插槽元素的样式，使其占满整个画布。
• CompassClock 组件新增控制定时器的函数。

结语

该组件库的作者只是一个初出茅庐的小前端，若在公共项目使用本库请三思。另外，作者准备搭建一个静态网站来展示这些组件。