De-yu's Note
  • Deyu Notebook
  • Side Project
    • Stock
    • ChatBox
    • SnowCraft
    • ScrollBar
  • 架構問題
    • 解決 RTK Query data 為 undefined 的實務做法
    • 透過 xstate 解決UI 狀態問題
  • 技術觀點
    • 為什麼需要 store
    • Router 作用
    • react 和 next.js 差異
    • monoRepo vs Multiple Repo
  • Performance
    • React 優化
  • JS Coding
    • Curry
    • Debounce
    • Throttle
  • map
  • memo()
  • Promise 實作
  • Promise Function
  • Testing
    • 使用 Jest 、 React Testing Library 、MSW 建立測試環境
  • Miscellaneous
    • Event Loop
    • Browser
    • Code Review
    • Storage
  • AMD 、 CommonJS 、 ES modules
  • JWT
  • Next.js
  • 用過的 module
  • Internet
    • UDP
  • TCP/IP
  • SSL TLS
  • HTTP
  • AI 工作流
    • Page 1
Powered by GitBook
On this page
  • 背景
  • 功能
  1. Side Project

ChatBox

PreviousStockNextSnowCraft

Last updated 20 days ago

簡介

是一個基於 Vue 2 + TypeScript 的輕量級聊天框組件

背景

在工作上曾經開發過一個腳本化的 chatBox 將這個功能抽出做成小 Project

功能

interface SingleScript {
  title: string;
  type: string;
  option?: ChatOption[];
  next?: string;
}

透過 next 欄位決定下一個對話框的 id

type 決定對話框的顯示模式

title 代表內容

Demo

https://de-yu.github.io/vue-chatbox/demo/