标签前端下的文章 - a博客-个人博客-技术分享

vue3+ts报错：Cannot find module '@/views/Home/index.vue' or its corresponding type declarations.

方式一：在使用 vue3+typescript 添加路由引入路径的时候报错：在 vite-env.d.ts 中添加：declare module "*.vue" { import { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any>; export default component; }通过以上方式可以取消报错爆红，但是当点击路径的时候跳转地址不正确。方式二：在 tsconfig.jsdon 中添加配置："compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["./src/*"] } }

技术 · 5 天前

Cannot find module ‘path‘ or its corresponding type declarations.

在 .ts 文件上引入 path 模块的时候报错：import { resolve } from 'path'主要原因是 path 是一个 node.js 模块，node.js 本身不支持 typescript，为了解决这个问题需要安装一个 @types/node。npm install @types/node -D在引入文件的时候，如 "@/user" 按理我们需要引入 user 目录中的 index.ts 文件，但是在使用 TypeScript 时通常需要使用模块路径别名（Module Path Aliases）来简化文件引入的路径。// tsconfig.json { ..., "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] }

技术 · 5 天前

Nuxtjs3+ElementPlus 提示：[IdInjection] Looks like you are using server rendering, you must provide a id...

根据提示可以看出需要提供一个id。文档：https://element-plus.org/zh-CN/guide/ssr.html#%E6%8F%90%E4%BE%9B%E4%B8%80%E4%B8%AAid代码：// plugins/ElementPlus.ts import { defineNuxtPlugin } from '#app' import ElementPlus, { ID_INJECTION_KEY } from 'element-plus' import 'element-plus/dist/index.css' export default defineNuxtPlugin(nuxtApp => { nuxtApp.vueApp.provide(ID_INJECTION_KEY, { prefix: 1024, current: 0 }) nuxtApp.vueApp.use(ElementPlus) })

技术 · 17 天前

Nuxtjs3 + ElementPlus 提示：[Vue warn]: injection "Symbol(elZIndexContextKey)" not found.

需要配置配置 ZIndex使用SSR进行开发时，会遇到 z-index 引起的水合错误。在这种情况下，建议注入一个初始值以避免这种错误。文档：https://element-plus.org/zh-CN/guide/ssr.html#%E9%85%8D%E7%BD%AE-zindex代码：// plugins/ElementPlus.ts import { defineNuxtPlugin } from '#app' import ElementPlus, { ZINDEX_INJECTION_KEY } from 'element-plus' import 'element-plus/dist/index.css' export default defineNuxtPlugin(nuxtApp => { nuxtApp.vueApp.provide(ZINDEX_INJECTION_KEY, { current: 0 }) nuxtApp.vueApp.use(ElementPlus) })

技术 · 17 天前

ua-parser-js 解析用户设备信息

介绍ua-parser-js 是一个轻量级的 JavaScript 库，用于解析用户代理字符串，以获取有关用户的操作系统、浏览器类型、版本、设备类型等信息。GitHub文档使用npm 下载npm install ua-parser-js引入import UAParser from 'ua-parser-js'; const parser = new UAParser('[user-agent]'); // 如果不填写会自动获取当前页面上的ua const result = parser.getResult(); console.log(result);返回结果{ ua: "", browser: { name: "", version: "", major: "", type: "" }, engine: { name: "", ver

技术 · 10-21

textarea文本高度自定义-组件开发[textarea]

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

技术 · 07-30

Script 标签引入 Monaco Editor

将 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

技术 · 07-29

Shadow DOM：Web 组件的封装与控制

介绍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

技术 · 06-23

Shadow DOM：Web 组件的封装与控制

vue3实现对textarea组件光标聚焦

在写个人小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

技术 · 02-20

button 配合 document.execCommand() 实现文字加粗效果

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;

技术 · 2023-07-25

chatgpt-web项目添加联网模式的prompt

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: &

技术 · 2023-07-18

Theme Jasmine by Kent Liao