last-year-components

This template should help get you started developing with Vue 3 in Vite.

1.引入
2.使用

2.1.泡泡组件
2.1.1 参数
2.1.2 方法

2.2 拖拽功能
2.2.1 参数
2.2.2 方法

2.3 打字机
2.3.1 参数
2.3.2 方法 2.3.3 事件

2.4 时间
2.4.1 参数
2.4.2 方法

1.引入

//按需引入
import { LyBubble } from 'last-year-components'
//或者全部引入
import components  from 'last-year-components'

2.使用

1.泡泡组件

import { LyBubble } from 'last-year-components'
const lyBubble =new LyBubble(options)

1.1 参数

options:

| 参数名:类型 | 简介 | | --------------------- | ------------ | | size : number | 泡泡的数量 | | BubbleOptions: object | 泡泡样式入参 |

BubbleOptions:

| 参数名:类型 | 简介 | | ---------------------- | ----------------- | | shadowColor : string | 阴影颜色(rgba) | | shadowBlur : number | 阴影模糊程度 | | shadowOffsetX : number | 阴影在x轴上的偏移 | | shadowOffsetY : number | 阴影在y轴上的偏移 | | fillStyle ; string | 泡泡背景色(rgba) |

1.2 方法

| 方法名 | 功能 | | ------ | ------------ | | create | 创建泡泡组件 | | remove | 删除泡泡组件 |

2.拖拽功能

import { LyWinMove } from 'last-year-components'
const lyWinMove =new LyWinMove(options)

2.1 参数

options: | 参数名 | 类型 | 简介 | | ------ | ------ | ------------------------------ | | MoveId | string | 需要移动的盒子的id | | DownId | string | 鼠标按下拖动的盒子的id(可不传) |

2.2 方法

| 方法名 | 功能 | | ------ | ------------ | | create | 创建拖拽功能 | | remove | 移除拖拽功能 |

3.打字机

import { LyTypewriter } from 'last-year-components'
const lyTypewriter =new LyTypewriter(options)

3.1 参数

options: | 参数名 | 类型 | 必填 | 简介 | | ---------- | ------------------------------- | ---- | ------------------------------ | | el | string | 否 | 容器的选择器 | | content | string | 是 | 内容 | | startSpeed | number | 否 | 开始打字速度 | | endSpeed | number | 否 | 删除打字速度 | | waitTime | number | 否 | 等待时间 | | isWay | ['once' , 'roundTrip' , 'loop'] | 否 | 只显示一次，往返一次，无限循环 |

3.2 方法

| 方法名 | 功能 | | ------------- | ------------ | | typeCharacter | 开始打字 | | stopTyping | 停止打字 | | setContent | 修改打字内容 |

3.3 事件

| 事件名 | 功能 | 说明 | | --------- | --------------------------------------------------------------- | ---------------------------------------------- | | character | 获取每次打字时当前的内容(content)和当前一轮打字是否结束(status) | callBack(data:{content:string,status:boolean}) |

const lyWinMove =new LyTypewriter(options)
lyWinMove.typeCharacter()
lyWinMove.on('character', (data: {content:string,status:boolean}) => {
    console.log(data.content)  //当前打字的内容
    console.log(data.status)  //当前打字轮次是否结束
  })

4.时间

import { LyTime } from 'last-year-components'
const lyTime =new LyTime(options)
 lyTime.create()
 lyTime.destroy()

4.1 参数

options: | 参数名 | 类型 | 必填 | 简介 | | ------ | ------ | ---- | ------------ | | el | string | 是 | 容器的选择器 | | props | Object | 否 | 时间相关参数 |

props:

| 参数名 | 类型 | 必填 | 简介 | | -------- | ------- | ---- | -------------- | | is12 | boolean | 是 | 是否是12小时制 | | isSecond | boolean | 否 | 是否显示秒 | | isZodiac | boolean | 否 | 是否显示农历 | | isWeek | boolean | 否 | 是否显示星期 | | isYear | boolean | 否 | 是否显示年 | | isYMD | boolean | 否 | 是否显示年月日 | | color | Object | 否 | 字体颜色 |

4.2 方法

| 方法名 | 功能 | | ------- | ------------ | | create | 创建时间组件 | | destroy | 销毁组件 |