vue - 随笔分类 - webHYT

vue3 项目中优雅的使用 SVG 图标（vite-plugin-svg-icons）

摘要：1、背景 vite-plugin-svg-icons 是一个用于 Vite 构建工具的插件，它可以帮助开发者轻松地在 Vue 项目中使用 SVG 图标。该插件的主要功能包括： SVG 图标自动导入：将指定目录下的 SVG 图标自动导入为 Vue 组件性能优化：通过预加载和缓存机制提高图标加载性能阅读全文

posted @ 2025-09-09 17:05 webHYT 阅读(1111) 评论(0) 推荐(0)

markdown——大模型返回结果展示以及打字机效果

摘要：1、背景 Markdown 是一种轻量级的标记语言，可以用一些简单语法来表达一些富文本内容。大部分大模型返回的格式是markdown格式，本文介绍一下大模型返回结果的展示 2、v-md-editor 本文中使用的是v-md-editor插件展示，大模型返回结果展示、包含打字机竖线展示，创建MdPre 阅读全文

posted @ 2025-09-09 16:06 webHYT 阅读(320) 评论(0) 推荐(0)

html中的latex数据公式展示

摘要：1、背景项目做的文档的采编结果展示，部分文档中会包含数据公式，后端返回的为采编后的html片段，用$$符号或者$符号包裹数学公式。 2、LaTex 、KaTex、MathJax LaTeX 早在1980就已经开始使用了，是一种流行的排版系统，广泛用于学术界、出版业和科技领域。它通过一系列的命令和标阅读全文

posted @ 2025-09-08 16:45 webHYT 阅读(243) 评论(0) 推荐(0)

vue3项目解决xss攻击

摘要：1、问题背景 Vue 内置的 v-html 指令可以渲染原始 HTML，但这会带来巨大的安全风险（XSS 攻击）。如果直接将用户输入或来自不可信来源的 HTML 字符串用 v-html 渲染，很容易导致跨站脚本攻击。 2、解决方案 vue-dompurify-html 是一个专为 Vue.js 项目阅读全文

posted @ 2025-09-05 17:17 webHYT 阅读(235) 评论(0) 推荐(0)

Vue3使用EasyOFD.js实现ofd文件自定义展示

摘要：EasyOFD.js——一个在web端展示ofd文件的控件，该控件基于CANVAS绘制。官网提供的事例，不适合用于多页ofd文件的展示，本文基于EAYSOFD实现放大、缩小、页面跳转以及多页滚动等功能 1、安装EAYSOFD依赖和EASYOFD组件 //依赖 npm i jszip x2js jb2 阅读全文

posted @ 2024-12-30 14:19 webHYT 阅读(882) 评论(0) 推荐(0)

使用element-ul实现描点导航

摘要：左侧为导航栏，点击内容滚动到指定位置，监听滚动条，左侧锚点导航高亮效果图如下：组件封装PointTags：使用el-tabs实现左侧导航 <template> <div class="point-wrap"> <el-tabs tab-position="left" v-model="activ 阅读全文

posted @ 2023-10-25 15:17 webHYT 阅读(869) 评论(0) 推荐(0)

表格自定义内容，实现超出内容省略提示

摘要：在elementUI和iview组件库中，都有对应参数设置，当内容过长被隐藏时显示 tooltip。但是当表格的一个单元格的内容过于复杂，需要自定义时，通常官网给出的配置参数会失去效果。入上图所示，可以使用组件库提供的 tooltip组件+ mouseover 事件实现，对应效果，代码如下 <!- 阅读全文

posted @ 2023-10-23 15:55 webHYT 阅读(189) 评论(0) 推荐(0)

vue 中window.onresize有时不生效问题

摘要：在vue中多个组件中都使用window.onresize=()=>{}，会导致前边赋值的方法被覆盖掉改成 window.removeEventListener('resize', ()=>{}) 可生效 methods: { myFunction() { ... } }, mounted(){ / 阅读全文

posted @ 2023-10-12 15:25 webHYT 阅读(876) 评论(0) 推荐(0)

elementUI表格多选框toggleRowSelection无效

摘要：前言项目中遇到一个需求：弹框中有一个带分页的多选表格，在用户切换分页时，需要记录用户当前选择，在切换回上页时，显示用户已勾选项使用elementUI 表格多选框的toggleRowSelection发现并没有效果。一开始以为是切换分页后没有等待页面加载完成后就调用了该函数所以无效；解决1：添阅读全文

posted @ 2023-09-15 17:46 webHYT 阅读(3570) 评论(1) 推荐(0)

vite中导入全局样式变量（less、sass）

摘要：1、先新建vars.less文件，定义基础样式变量2、在vite.config.ts 下添加配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from "path"; // 阅读全文

posted @ 2023-08-14 15:24 webHYT 阅读(3344) 评论(1) 推荐(0)

package-lock.json锁定镜像地址404的处理方法

摘要：前言最近接触了一个新的vue项目，安装依赖是一直无法安装成功，有部分依赖包的地址报404，查看package-lock.json，发现其中部分依赖使用了公司私有的镜像库，但是目前该镜像库已关闭，访问该包地址返回404. 解决方案如下1、删除package-lock.json，重新npm i 生成新的阅读全文

posted @ 2023-06-29 11:46 webHYT 阅读(435) 评论(0) 推荐(0)

vue项目因修改环境变量导致生产包体积过大

摘要：前言：最近接触一个比较大的vue项目，发现打包后的项目文件体积很大，最大的的一个js有17M，于是用 Vue CLI report 分析一下 Vue CLI（@vue/cli）自带的 webpack 包体积优化工具，它可以查看各个模块的 size 大小，方便优化。只需要在 build 后面加上 - 阅读全文

posted @ 2023-06-29 11:32 webHYT 阅读(371) 评论(0) 推荐(0)

web前端性能优化之资源文件加载优化

摘要：前言首屏速度是用户体验的最关键一环，而首屏速度最大的决定性因数就是资源的加载速度而资源的加载速度 = 资源大小 + 网速资源大小影响的方面有1、压缩（如Gzip） 2、一部分代码分割出来做异步加载，需要的时候在加载 3、写代码的时候尽量精简本文主要针对，资源文件加载的优化。异步资源加载一般有两阅读全文

posted @ 2023-06-26 11:23 webHYT 阅读(194) 评论(0) 推荐(0)

Vue路由使用总结

摘要：1、多级路由（1）配置路由规则，使用children配置项： // 编写配置项 const router = new VueRouter({ routes: [ { path: '/about', component:About, }, { path: '/home', component: Ho 阅读全文

posted @ 2023-06-12 14:05 webHYT 阅读(45) 评论(0) 推荐(0)

Vue路由的基本使用

摘要：1、相关理解 1.1 vue-router的理解 vue的一个插件库，专门用来实现SPA应用的 1.2 对SPA应用的理解 1、单页Web应用（single page web application，SPA） 2、整个页面只有一个完整的页面。index.html 3、点击页面中的导航链接不会刷新页面阅读全文

posted @ 2023-06-09 11:33 webHYT 阅读(85) 评论(0) 推荐(0)

Vue脚手架配置代理

摘要：前言前端在向后端请求资源时通常会遇到跨域问题，当我们是用vue脚手架构建项目时，可以通过配置代理解决跨域问题参考文档：devServer.proxy 方法一：在vue.config.js中添加如下配置： module.exports = { devServer: { proxy: 'http: 阅读全文

posted @ 2023-06-09 10:46 webHYT 阅读(90) 评论(0) 推荐(0)

vue 插槽

摘要：1、作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间的通信方式，适用于父组件==》子组件 2、分类：默认插槽、具名插槽、作用域插槽 3、使用方式：（1）、默认插槽父组件中： <Category> <div>html结构 </div> </Category> 子组件中： <tem 阅读全文

posted @ 2023-06-08 17:50 webHYT 阅读(53) 评论(0) 推荐(0)

Vue组件和Vue实例的理解

摘要：关于VueComponent： 1、组件本质是一个名为VueComponent的构造函数，并且不是程序员定义的，是Vue.extend生成的 2、我们只需要写组件引入<Demo />,Vue解析时会帮我们创建demo组件的实例对象，即Vue帮我执行的： new VueComponent(option 阅读全文

posted @ 2023-06-08 17:33 webHYT 阅读(90) 评论(0) 推荐(0)

消息订阅与发布（pubsub）

摘要：1、一种组件间通信的方式，适用于任意组件间通信，适用于任意前端框架 2、使用步骤：（1）、安装pubsub：npm i pubsub-js （2）、引入：import pubsub from ‘pubsub-js’ （3）、接收数据：A组件想要接收数据，则在A组中订阅消息，订阅的回调留在A组件自身阅读全文

posted @ 2023-06-08 17:23 webHYT 阅读(114) 评论(0) 推荐(0)

Vue全局事件总线（GlobalEventBus）

摘要：Vue全局事件总线1、一种组件间通信的方式，适用于任意组件间通信。 2、安装全局事件总线 // main.js 中安装全局事件总线 new Vue({ render: h => h(App), beforeCreate() { Vue.prototype.$bus = this // 安装全局事件阅读全文

posted @ 2023-06-08 17:15 webHYT 阅读(130) 评论(0) 推荐(0)

webHYT

随笔分类 - vue

公告