vue.js - react或者vue 如何实现ChatGPT 光标文字追随 效果？

Question

实现下面图中效果,？

Answer 1

我自己实现了

&:last-child{// 如果ai输出结束了，刚不显示伪元素after  .stop > *:last-child{    &:after{      content: none !important;    }  }  // 节点空时设置光标跟随  .chat:empty{    position: relative;    &:after{      display: inline-block;      content: "";      width: 4px;      height: 14px;      transform: translate(4px,2px) scaleY(1.3);      background-color: #80c9ff;      animation: cursor .6s infinite;      overflow-wrap: break-word;      box-sizing: border-box;    }  }  // 获取最后一个子节点并设置光标跟随  .chat > *:last-child {    position: relative;    &:after{      display: inline-block;      content: "";      width: 4px;      height: 14px;      transform: translate(4px,2px) scaleY(1.3);      background-color: #80c9ff;      animation: cursor .6s infinite;      overflow-wrap: break-word;      box-sizing: border-box;    }  }}

Answer 2

要实现ChatGPT光标文字追随效果，可以使用以下步骤：

1. 在React或Vue应用程序中，使用一个文本输入框（textarea）或输入框（input）来接收用户输入。
2. 当用户输入文本时，监听输入框的input事件或change事件，以便在文本发生变化时更新应用程序的状态。
3. 在事件处理程序中，获取输入框中当前选中的文本，并将其存储在应用程序的状态中。
4. 使用CSS样式来控制光标的位置和文本的追随效果。可以使用CSS的::selection伪元素来设置选中文本的颜色和背景色，并使用CSS的position属性来控制光标的位置。

下面是一个简单的React示例代码，演示如何实现ChatGPT光标文字追随效果：

import React, { useState } from "react";const ChatGPT = () => {  const [text, setText] = useState("");  const [selectedText, setSelectedText] = useState("");  const handleChange = (event) => {    setText(event.target.value);    setSelectedText(""); // Clear selected text when user starts typing again  };  const handleSelectionChange = (event) => {    const selectedText = event.target.value.slice(event.target.selectionStart, event.target.selectionEnd);    setSelectedText(selectedText);  };  return (    <div>      <textarea value={text} onChange={handleChange} onSelectionChange={handleSelectionChange} />      {selectedText && <span style={{ color: "yellow", backgroundColor: "black" }}>{selectedText}</span>}    </div>  );};export default ChatGPT;

这个示例中，我们使用了textarea元素来接收用户输入，并监听了change和selectionchange事件。当用户输入文本时，handleChange函数会更新应用程序的状态，而handleSelectionChange函数会获取当前选中的文本并更新应用程序的状态。最后，我们使用了一个条件渲染语句来显示选中的文本，并使用CSS样式来控制其颜色和背景色。