textarea 在开发中常常被使用到,但默认的 textarea 效果并不能满足我们的需求,比如信息发送框,如果直接使用 input 的话,在长文本内容中会显得十分拥挤,如果直接使用 textarea 则在未填充内容时显得过于空旷,因此我们需要自定义 textarea 的样式,使其在未填充内容时也能保持一定的宽度,同时也能在长文本内容中自动换行并调整高度。效果如下:这里主要通过监听 textarea 的 input 事件,从而获取 textarea 的内容区域高度,从而调整 textarea 的高度,实现文本内容超出宽度时高度调整的效果。代码示例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
将 monaco-editor 下载到本地,地址:https://microsoft.github.io/monaco-editor/目录结构:代码示例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./monaco-editor-0.50.0/package/min/vs/editor/editor.main.css"> </head> <body> <div id=&quo
介绍Shadow DOM 是 Web 组件规范的一部分,它允许将封装的“影子” DOM 树附加到常规 DOM 树中的元素。影子 DOM 封装了 DOM 和样式,使开发人员可以控制这些元素,而不会与页面上的其他代码或样式发生冲突。术语影子宿主(Shadow host):影子 DOM 附加到的常规 DOM 节点。影子树(Shadow tree):影子 DOM 内部的 DOM 树。影子边界(Shadow boundary):影子 DOM 终止,常规 DOM 开始的地方。影子根(Shadow root):影子树的根节点。创建 Shadow DOMconst host = document.querySelector('#host') // 创建一个 Shandow DOM 元素 const shadow = host.attachShadow({mode: 'open'}) const span = document.createElement('span') span.textContent = 'Hello World' // 向 Shadow DOM 元素内填充内容 shadow.a
在写个人小demo时需要使用到一种效果就是一开始为 input 框,当用户点击时变化为 textarea 并光标能够进行聚焦。通过 ref 来获取 textarea 组件,并使用 focus() 事件来对文本框进行光标的聚焦。<template> <NInput v-model:value="desc" v-if="!isFocusDesc" @focus="handleFocusDesc"/> <NInput v-model:value="desc" type="textarea" v-else ref="textarea" @blur="isFocusDesc = false"/> </template> <script setup> import {ref, nextTick} from 'vue' import {NInput} from 'naive-ui' let d
button 配合 document.execCommand() 实现文字加粗效果。在实现富文本编辑器的点击按钮给文本文字加粗的时候遇到了一个问题,那就是当选中文字是点击加粗按钮会取消文字的选中。想要的效果为:想要实现此效果,只要将按钮换成 button 就可以了。完整代码:<style> * { padding: 0; margin: 0; } html, body { padding: 20px; background-color: #000000; } li { list-style-type: none; } #editor { width: 800px; height: 360px; border-radius: 6px; background-color: #ffffff; border: 1px solid #cccccc;
const webSearchPrompt = ` Using the provided web search results, write a comprehensive reply to the given query. If the provided search results refer to multiple subjects with the same name, write separate answers for each subject. Make sure to cite results using \`[[number](URL)]\` notation after the reference. Web search json results: """ ${JSON.stringify(searchResult)} """ Current date: """ ${new Date().toISOString()} """ Query: &
a
不过是些许风霜罢了