当前位置： 首页 > news >正文

vue3+vite 批量引入组件动态使用

news 2026/4/6 21:40:50 

import { ref, reactive, toRaw, markRaw, defineAsyncComponent, onMounted } from 'vue'
import type { Component } from 'vue'// vue3+vite 批量引入组件动态使用
const modules = import.meta.glob<Component>('./details/*.vue') // 明确指定导入的模块类型为Component
const components: any = ref({})
Object.entries(modules).forEach(([path, asyncCom]) => {const name = path.replace(/\.\/details\/(.*)\.vue/, '$1')try {components.value[name] = markRaw(defineAsyncComponent(asyncCom))} catch (error) {console.error(`动态导入组件 ${name} 时出错:`, error)}
})

使用

<main class="card-bg mt-16"><!-- 这里可以使用生成的list数组来动态渲染el-tabs组件，示例如下 --><el-tabs type="border-card" v-model="state.cardActive"><el-tab-pane v-for="(tab, index) in state.tabs" :key="index" :label="tab.label" :name="tab.key"><component :is="components[tab.key]" /></el-tab-pane></el-tabs></main>

在这里插入图片描述

相关文章：

vue3+vite 批量引入组件动态使用

import { ref, reactive, toRaw, markRaw, defineAsyncComponent, onMounted } from vue import type { Component } from vue// vue3vite 批量引入组件动态使用 const modules import.meta.glob<Component>(./details/*.vue) // 明确指定导入的模块类型为Component con…...

编程日记 2024/12/4 13:25:38

设计模式——方法链or流式接口

方法链或流式接口是一种编程模式或设计模式。核心思想是通过返回对象自身的应用&#xff0c;使得可以在一个表达式中连续调用多个方法。 c中实现这种模式 1.基本语法规则 &#xff08;1&#xff09;每个可链接的方法都返回对象自身的引用&#xff08;通常是*this&#xff09…...

编程日记 2024/12/4 13:23:36

JAVA OPCUA 服务端开发，客户端连接会话监听和订阅事件监听

前言 关于使用milo开源库，开发opc ua服务器，有网友咨询如何设置服务端如何监听客户端的连接或断开事件，如何监听客户端发起订阅事件的代码实现，于是我完善了这部分的空缺整理整了这篇教程，希望能解决有同样需求，但是遇到困难的网友！因为milo没有官方文档的教程且网上详…...

编程日记 2024/12/4 13:22:35

pytest相关总结

1.pytest -v -s -v将测试用例名称和用例中的输出进行展示&#xff0c;将每条用例脚本的内容逐行进行结果展示&#xff1b; -s 参数是为了显示用例执行层级的打印信息 pytest使用总结笔记 - fengf233 - 博客园 2....

编程日记 2024/12/4 13:21:34

cin/cout的性能优化和缓冲区同步问题

目录 背景导入 问题 1.1ios::sync_with_stdio(false) 1.2为什么要解除C/C IO流同步? 1.3使用场景 2.1cin和cout的绑定关系 2.2为什么要解除绑定关系? 2.3注意事项 背景导入 大家可以先看一下这段背景知识;后面我会谈谈自己的理解; 1.在C中&#xff0c;标准输⼊输出流…...

编程日记 2024/12/4 13:19:32

redisson-spring-data与Spring-Data-Redis的版本关系问题

redisson-spring-boot-starter https://github.com/redisson/redisson/tree/master/redisson-spring-boot-starter https://github.com/redisson/redisson/tree/master/redisson-spring-data#spring-data-redis-integration 将 Redisson 与 Spring Boot 库集成。依赖于Spring…...

编程日记 2024/12/4 13:17:30

Puppeteer代理认证的最佳实践和示例

在现代网络环境中&#xff0c;代理服务器的使用越来越普遍&#xff0c;尤其是在数据抓取、网页自动化测试和网络监控等领域。Puppeteer作为一个流行的Node库&#xff0c;它提供了高级的API来控制Chrome或Chromium浏览器。在某些情况下&#xff0c;我们需要通过代理服务器来执行…...

编程日记 2024/12/4 13:16:29

js 字符串 只显示数字

1. 使用正则表达式的match方法 原理&#xff1a;正则表达式\d用于匹配一个或多个数字。match方法会在字符串中查找与正则表达式匹配的部分&#xff0c;并返回一个包含所有匹配结果的数组。示例代码&#xff1a; let str "abc123def456"; let numbers str.match(/…...

编程日记 2024/12/4 13:08:19

STM32标准库-FLASH

FLASH模仿EEPROM STM32本身没有自带EEPROM&#xff0c;但是自带了FLASH存储器。 STM32F103ZET6自带 1M字节的FLASH空间&#xff0c;和 128K64K的SRAM空间。 STM32F4 的 SPI 功能很强大&#xff0c;SPI 时钟最高可以到 37.5Mhz&#xff0c;支持 DMA&#xff0c;可以配置为 SPI协…...

编程日记 2024/12/4 13:00:08

PowerShell：查找并关闭打开的文件

Get-SmbOpenFile 打开 Windows PowerShell 并运行 Get-SmbOpenFile | Format-List 若要仅显示特定文件共享的连接&#xff0c;请使用 Where-Object 运行 Get-SmbOpenFile。 Get-SmbOpenFile | Where-Object Path -eq "C:\Data\" | Format-List Get-SmbSession 显…...

编程日记 2024/12/4 12:59:07

【AI系统】昇腾异构计算架构 CANN

昇腾异构计算架构 CANN 本文将介绍昇腾 AI 异构计算架构 CANN&#xff08;Compute Architecture for Neural Networks&#xff09;&#xff0c;这是一套为高性能神经网络计算需求专门设计和优化的架构。CANN 包括硬件层面的达芬奇架构和软件层面的全栈支持&#xff0c;旨在提供…...

编程日记 2024/12/4 12:57:05

STM32 HAL库开发学习3.STM32启动浅析

STM32 HAL库开发学习3.STM32启动浅析 一、STM32启动模式&#xff08;也称自举模式&#xff09;1. MSP与PC指针赋值2. F1系列的启动模式&#xff1a;3. F4系列启动模式4. F7系列启动模式5. H7系列启动模式 二、STM32启动过程1. MSP 栈顶地址2. PC值3. Reset_Handler4. 启动文件内…...

编程日记 2024/12/4 12:56:04

FakeLocation 1.3.5 BETA 提示校园跑漏洞修复解决

任务一 作者对此又进行了更新&#xff0c;在本次更新中&#xff0c;我们依旧使用hookvip进行破解 本次的更新&#xff0c;使得包名强制写入更加严重&#xff0c;之前靠一些方法已经无法阻止appconfigs.xml的文件的修改&#xff0c;而且使得验证加强&#xff0c;和云端加强&…...

编程日记 2024/12/4 12:55:03

Figma入门-约束与对齐

Figma入门-约束与对齐 前言 在之前的工作中&#xff0c;大家的原型图都是使用 Axure 制作的&#xff0c;印象中 Figma 一直是个专业设计软件。 最近&#xff0c;很多产品朋友告诉我&#xff0c;很多原型图都开始用Figma制作了&#xff0c;并且很多组件都是内置的&#xff0c…...

编程日记 2024/12/4 12:49:58

腾讯元宝深度搜索AI多线程批量生成TXT原创文章软件

腾讯元宝深度搜索AI多线程批量生成TXT原创文章软件说明&#xff1a; 腾讯元宝深度搜索AI&#xff1a;能够理解用户意图&#xff0c;对搜索结果进行提炼和总结&#xff0c;直接提供用户所需的答案或信息摘要&#xff0c;从而提升用户体验。 腾讯元宝深度搜索AI&#xff1a;通过…...

编程日记 2024/12/4 12:40:50

Git操作学习1

一、一些Linux相关指令 在当前目录下&#xff0c;创建文件并写入内容&#xff1a;echo "这是第一个文件">file1.txt 查看文件的内容&#xff1a; cat file1.txt 会显示&#xff1a;这是第一个文件 修改文件名&#xff1a;mv file.txt file4.txt 把file.txt修改…...

编程日记 2024/12/4 12:38:48

【计算机网络】细说IP

文章目录 概述IP地址的组成IP地址的分类IP地址的作用 分类一、A类IP地址二、B类IP地址三、C类IP地址四、D类IP地址五、E类IP地址 协议报文子网掩码一、定义与功能二、表示方法三、子网掩码与IP地址的关系四、子网掩码的设置与配置五、实例说明 IPv6一、定义与背景二、地址格式与…...

编程日记 2024/12/4 12:33:43

树与图深度优先遍历——acwing

题目一&#xff1a;树的重心 846. 树的重心 - AcWing题库 分析 采用暴力枚举&#xff0c;试探每个点&#xff0c;除去之后&#xff0c;连通分量最大值是多少&#xff0c; 各个点的最大值找最小的 因为可以通过 dfs 来得到 根u以下点数&#xff0c;以及可以求各分树的点数&am…...

编程日记 2024/12/4 12:32:42

vue3.0 根据富文本html页面生成压缩包（含视频在线地址、图片在线地址、前端截图、前端文档）

vue3.0生成压缩包&#xff08;含在线地址、前端截图、前端文档&#xff09; 需求描述效果开始下载插件包基本代码构造 点击下载按钮1.截图content元素&#xff0c;并转化为pdfcanvas putImageData、getImageDatagetImageData 获取指定矩形区域的像素信息putImageData 将这些数据…...

编程日记 2024/12/4 12:28:36

WPF+LibVLC开发播放器-LibVLC在C#中的使用

LibVLC在C#中的使用 安装包Nuget使用控件使用播放器初始化加载视频文件 视频教程&#xff1a; 使用WPFLibVLC快速开发一个播放器 安装包Nuget 安装下面两个包,必须安装两个 一个是相关框架对应的包&#xff0c;Winform就安装LibVLCSharp.Winform;WPF就安装LibVLCSharp.WPF&am…...

编程日记 2024/12/4 12:27:36

用Quartus原理图搭个抢答器：从74175到数码管，一个FPGA初学者的完整项目复盘

从零构建FPGA抢答器&#xff1a;一位工程师的74系列芯片实战手记 第一次接触FPGA开发时&#xff0c;我被Quartus原理图界面上那些密密麻麻的逻辑门和连线吓得不轻。直到把课堂上学到的数字电路知识真正落地成一个抢答器项目&#xff0c;才突然理解了那些看似抽象的触发器、计数…...

编程新知 2026/4/6 21:21:54

利用快马AI快速原型：十分钟搭建软件下载站首页与详情页

最近在帮朋友做一个软件下载站的原型&#xff0c;要求能快速上线测试用户反馈。传统开发方式从设计到编码至少需要一周&#xff0c;但这次我用InsCode(快马)平台的AI生成功能&#xff0c;十分钟就搞定了基础框架&#xff0c;分享下具体实现思路。 首页布局设计 首页需要突出展示…...

编程新知 2026/4/6 20:41:30

Fast-Check高级技巧：如何构建自定义Arbitrary生成器的完整指南

Fast-Check高级技巧&#xff1a;如何构建自定义Arbitrary生成器的完整指南 【免费下载链接】fast-check Property based testing framework for JavaScript (like QuickCheck) written in TypeScript 项目地址: https://gitcode.com/gh_mirrors/fa/fast-check Fast-Chec…...

编程新知 2026/4/6 20:31:25

VS Code官宣：全面支持Rust！

当"宇宙第一编辑器"遇上"内存安全的叛逆少年"&#xff0c;这场联姻比想象中更甜&#xff5e;最近微软悄悄放了个大招&#xff1a;VSCode 要深度集成 rust-analyzer 了&#xff01; &#x1f389; 什么意思呢&#xff1f;以前你用 VSCode 写 Rust&#xff0…...

编程新知 2026/4/6 20:07:13

8 个值得收藏的综合类在线工具网站

8 个值得收藏的综合类在线工具网站1. tool.lu&#xff1a;老牌开发者工具箱&#xff0c;胜在稳定tool.lu 是很多开发者都用过的老站。它的优势不在“花哨”&#xff0c;而在于工具体系比较成熟&#xff0c;像代码格式化、压缩、加密解密、时间处理、图片与图标处理这类高频需求…...

编程新知 2026/4/6 19:45:06

5分钟部署！《崩坏：星穹铁道》全自动助手终极指南

5分钟部署&#xff01;《崩坏&#xff1a;星穹铁道》全自动助手终极指南 【免费下载链接】March7thAssistant 崩坏&#xff1a;星穹铁道全自动 三月七小助手 项目地址: https://gitcode.com/gh_mirrors/ma/March7thAssistant 你是否每天花费大量时间在《崩坏&#xff1a…...

编程新知 2026/4/6 18:38:27

锐龙处理器终极调优指南：如何用RyzenAdj释放隐藏性能

锐龙处理器终极调优指南&#xff1a;如何用RyzenAdj释放隐藏性能 【免费下载链接】RyzenAdj Adjust power management settings for Ryzen APUs 项目地址: https://gitcode.com/gh_mirrors/ry/RyzenAdj 你是否曾觉得自己的AMD锐龙处理器性能没有完全发挥&#xff1f;或者…...

编程新知 2026/4/6 18:28:19

从白炽灯到LED：聊聊那些“不听话”的非线性元件（附特性曲线解读）

从白炽灯到LED&#xff1a;聊聊那些“不听话”的非线性元件&#xff08;附特性曲线解读&#xff09; 记得我第一次用电阻给LED限流时&#xff0c;那颗蓝色LED在我眼前发出"啪"的一声轻响就永远熄灭了。那时我才明白&#xff0c;电路世界里不是所有元件都像电阻那样&q…...

编程新知 2026/4/6 18:07:49

实战应用：用快马生成生产级服务器巡检与故障排查工具，告别xshell单点操作

最近在团队里负责服务器运维工作&#xff0c;经常需要处理各种突发故障。每次打开xshell手动敲命令排查问题&#xff0c;不仅效率低&#xff0c;还容易遗漏关键检查项。于是我用InsCode(快马)平台开发了一个自动化巡检工具&#xff0c;彻底告别了单点操作的时代。分享下这个实战…...

编程新知 2026/4/6 18:07:49

在WSL2上搞定PyTorch模型转昇腾OM：我的Atlas 200DK部署踩坑实录

在WSL2上实现PyTorch模型到昇腾OM的高效转换&#xff1a;避坑指南与实战解析 对于希望在Windows环境下完成昇腾模型转换的开发者来说&#xff0c;WSL2提供了一个近乎完美的解决方案。本文将深入探讨如何在这一环境中高效完成从PyTorch到昇腾OM模型的完整转换流程&#xff0c;同…...

编程新知 2026/4/6 17:35:30