vue3-writer-views

vue3-writer-views 打字机插件,支持代码着色

介绍

vue3-writer-views 是一个vue3的基于chatgpt模式的打字机效果组件库，支持静态数据流，动态数据流，支持代码着色，代码复制，简化开发，

效果图

安装

npm install vue3-writer-views

or

pnpm install vue3-writer-views

API options

# 指令参数

export interface TypewriterOptions {
    className?: string // 额外类名
    privated?: boolean // 是否静态数据, 静态数据： 是一次获取的静态数据，非静态：频繁获取数据流的比如 res.body.getReader()
    text: string // 数据
    speed?: number // 打字速度，单位是毫秒
    cursor?: boolean // 是否显示光标
    isScrollToBottom?: boolean // 显示容器是否滚动到底部
}

# 组件参数同上

改变主题

import {setThemeStyle} from 'vue3-writer-views'
import {themeList,ThemeLang} from 'vue3-writer-views/theme'
// ThemeLang themes 数据类型
// themes 所有主题的集合
setThemeStyle("a11y-dark")

主题名称(ThemeList)

export type ThemeLang =
    | "a11y-dark"
    | "a11y-light"
    | "agate"
    | "an-old-hope"
    | "androidstudio"
    | "arduino-light"
    | "arta"
    | "ascetic"
    | "atom-one-dark-reasonable"
    | "atom-one-dark"
    | "atom-one-light"
    | "brown-paper"
    | "codepen-embed"
    | "color-brewer"
    | "dark"
    | "default"
    | "devibeans"
    | "docco"
    | "far"
    | "felipec"
    | "foundation"
    | "github-dark-dimmed"
    | "github-dark"
    | "github"
    | "gml"
    | "googlecode"
    | "gradient-dark"
    | "gradient-light"
    | "grayscale"
    | "hybrid"
    | "idea"
    | "intellij-light"
    | "ir-black"
    | "isbl-editor-dark"
    | "isbl-editor-light"
    | "kimbie-dark"
    | "kimbie-light"
    | "lightfair"
    | "lioshi"
    | "magula"
    | "mono-blue"
    | "monokai-sublime"
    | "monokai"
    | "night-owl"
    | "nnfx-dark"
    | "nnfx-light"
    | "nord"
    | "obsidian"
    | "panda-syntax-dark"
    | "panda-syntax-light"
    | "paraiso-dark"
    | "paraiso-light"
    | "pojoaque"
    | "purebasic"
    | "qtcreator-dark"
    | "qtcreator-light"
    | "rainbow"
    | "routeros"
    | "school-book"
    | "shades-of-purple"
    | "srcery"
    | "stackoverflow-dark"
    | "stackoverflow-light"
    | "sunburst"
    | "tokyo-night-dark"
    | "tokyo-night-light"
    | "tomorrow-night-blue"
    | "tomorrow-night-bright"
    | "vs"
    | "vs2015"
    | "xcode"
    | "xt256"

配置Options

1. 指令使用

// 按需引入
import {VueTypeWriter} from 'vue3-writer-views'
import 'vue3-writer-views/dist/style.css'
const app = createApp(App)
app.directive("type-writer", VueTypeWriter)
app.mount("#app")

// 全局，既注册组件，也注册指令，不需要【组件使用菜单的引入了】
import Vue3TypeWriter from 'vue3-writer-views'
import 'vue3-writer-views/dist/style.css'
const app = createApp(App)
app.use(Vue3TypeWriter)
app.mount("#app")

使用

定义数据

const staticText1 = `当然可以，请看下面的JavaScript代码示例：
\`\`\`javascript

function bubbleSort(arr) {
    var len = arr.length;
    for (var i = 0; i < len; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}

// 示例
var arr = [64, 34, 25, 12, 22, 11, 90];
console.log(bubbleSort(arr));
\`\`\`

使用

<div v-type-writer="{ text: staticText, privated: true, speed: 10 }"></div>

2.组件使用

import {VueTypeWriterView} from 'vue3-writer-views'

const app = createApp(App)
app.component(VueTypeWriterView.name, VueTypeWriterView)
app.mount("#app")

使用

 <VueWriterView :text="staticText" :privated="true" />

感谢您的使用