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,themeList} from 'vue3-writer-views'
import type {ThemeLang} from 'vue3-writer-views'
// ThemeLang 默认主题的数据类型
// themeList 所有主题的集合.
setThemeStyle("a11y-dark")

使用自定义主题(仅支持全局导入)

1. 考虑外接cdn 存在不稳定性，
2. 如果有自定义的代码着色需求的css

import {setThemeStyle,themeList} from 'vue3-writer-views'
import type {ThemeLang,ThemeItem} from 'vue3-writer-views'

// 外置样式，注意：使用外置样式，内置样式表即失去作用，在vfor的时候需要使用外置的样式列表
const themeList: ThemeItem[] =  [
    {
        // 主题名称
        name: "an-old-hope",
        // 外链接地址，可存在多个，如果一个链接请求失败，则会启动下一个链接文件，直到可以请求成功的链接
        cdn: [
            "https://cdn.jsdelivr.net/npm/[email protected]/styles/an-old-hope.min.css",
            "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/an-old-hope.min.css",
        ]
    },
    {
        name: "a11y-dark",
        cdn: [
            "https://cdn.jsdelivr.net/npm/[email protected]/styles/a11y-dark.min.css",
            "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-dark.min.css",
        ]
    }
]

// 使用默认的主题库
setThemeStyle("a11y-dark")

// 使用自定义的主题库
setThemeStyle("a11y-dark", themeList)

组件默认主题名称(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,{closeConsoleHint?: false})
app.mount("#app")

2. 定义数据

// 定义数据
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));
\`\`\`

3. 使用

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

4. 组件使用

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

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

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

感谢您的使用