https://github.com/simon-he95/vivid-typing

vivid-typing
https://github.com/simon-he95/vivid-typing

animation vivid-typing

Last synced: 10 days ago
JSON representation

vivid-typing

• Host: GitHub
• URL: https://github.com/simon-he95/vivid-typing
• Owner: Simon-He95
• Created: 2022-05-14T15:15:37.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-01-05T07:25:17.000Z (10 months ago)
• Last Synced: 2024-05-06T16:11:14.394Z (6 months ago)
• Topics: animation, vivid-typing
• Language: Vue
• Homepage: https://vivid-typing.netlify.app/
• Size: 263 KB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# Vivid Typing

[online](https://vivid-typing.netlify.app/)

# Start

```bash

 npm i vivid-typing # 安装依赖

# main.ts 引入

  import { createApp } from 'vue'

  import { VividTyping } from 'vivid-typing'

  import 'vivid-typing/dist/index.css'

  const app = createApp(App)

  app.component('VividTyping', VividTyping)

  app.mount('#app')

```

# Usage

```markdown

  # 导入css样式

  # import 'vivid-typing/dist/index.css'

  

```

 ## 更多使用技巧可以参考[Page](https://github.com/Simon-He95/vivid-typing/blob/master/playground/src/App.vue)

# API Guide

```markdown

type defaultProps = {

  interval: number  // 文字间隔

  delay: number    // 延迟多久开始

  infinity: boolean | undefined // 是否无限循环

  finish: Function | undefined  // 完成后的回调

  spiltTag: string | undefined  // 将文本以spiltTag标签分割

  spiltClass: string | undefined  // 分割的Tag加上spiltClass类

  spiltStyle: string | Function | undefined // 分割的Tag加上spiltStyle样式，支持函数可以正对每个分割的Tag独立的style 

  content: string | string[] // 渲染的内容

  stable: boolean // 默认在finish之后content会被清空在重新渲染，如果为true，会在清空后立即展示content的第一个元素

  scrollX: boolean // 实现一个横向通知栏的效果(注意实现demo效果需要外层嵌套一个div加上overflow:hidden)

  scrollY: boolean // 实现一个纵向通知栏的效果(注意实现demo效果需要外层嵌套一个div加上overflow:hidden)

  speed: number // 控制滚动的速度

  reverse: boolean // 翻转scrollX和scrollY的方向默认false,向下或向左

  tail: boolean // 默认true展示结尾的闪烁动画，如果为false，则不展示

}

```

## Feature

- support use \n to split content

- support template `<%>` like `content="Hi,<%>%>simon"`

## Problem

```

## 如果遇到以下问题: 

About Missing ref owner contextMissing ref owner context

## 解决方法: 可在项目的vite.config.ts中配置resolve: { dedupe: ['vue'] }

```