随笔分类 - Vue
【Vue】vue3 中 如何将el-table的表格数据下载为.xlsx格式文件
摘要：## 安装依赖 首先，你需要安装 xlsx 和 file-saver 这两个库。 ```bash npm install xlsx file-saver --save ``` 有兴趣可以看看两个库的官方说明，直接看下面使用也没问题。 [xlsx 官方介绍](https://www.npmjs.com
【Vue】vue3 v-draggable 拖拽指令封装
摘要：## 说明 需求：实现一个拖拽指令，可在父元素区域任意拖拽元素，同时如果传入的值为 father，则拖拽的时候以父元素为拖拽对象 思路： 1、设置需要拖拽的元素为absolute，其父元素为relative。 2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。 3
【Vue】Vue3+Vite 实现 SVG 组件自动加载 icons 目录下所有文件
摘要：## 1. 安装依赖插件 vite-plugin-svg-icons > vite-plugin-svg-icons 用于生成 svg 雪碧图。 > 特点： 1.预加载 在项目运行时就生成所有图标,只需操作一次 dom 2.高性能 内置缓存,仅当文件被修改时才会重新生成 [vite-plugin-s
【Vue】vue3 vue-pdf-embed 实现pdf预览、缩放、拖拽、旋转和左侧菜单选择
摘要：实际效果 安装插件 pnpm install vue-pdf-embed pnpm install vue3-pdfjs 左侧pdf菜单组件 <template> <div class="pdf-view-list"> <div class="item active-item" v-for="(it
【Vue】vite server 代理 proxy 参数配置（免重复修改）
摘要：主要为了只在环境配置里面改代理地址就行，少修改 import { defineConfig, loadEnv } from "vite"; . . . const env = loadEnv(viteConfig.mode, process.cwd()); . . . server: { host:
【Vue】vue3 元素在某区域内缩放拖拽 附加按钮缩放
摘要：示例 代码（逻辑请看注释） <template> <div class="wapper" :ref="refs.wrpapper" @wheel.prevent="scale($event)"> <div class="box" :ref="refs.box" @mousedown="dragsta
【Vue】vue2 vue3 实现 scale 缩放大屏自适应
摘要：vue3 例子 App.vue template <div class="screen-wrapper"> <div class="screen" id="screen"> <router-view /> </div> </div> script import { onMounted } from
【Vue】pinia 数据持久化插件 pinia-plugin-persistedstate 使用
摘要：为什么需要持久化？ 刷新浏览器后，重新加载页面时会重新初始化 vue、 pinia，而 pinia 中状态的值仅在内存中存在，而刷新导致浏览器存储中的数据就没了。 在实际开发中，浏览器刷新时，有些数据希望是保存下来的。如用户登录后，用户信息会存储在全局状态中，如果不持久化状态，那么每次刷新用户都需要
【Vue】Swiper 滚动插件在 vue3 的使用，并手动设置左右切换
摘要：效果图 需求展示：右上角可左右滑动并控制遮罩层显示隐藏；每行显示4个，每次滑动4个 安装 npm install Swiper yarn add Swiper pnpm add Swiper 代码 template <!-- 控制分页 --> <div class="btn" @click="add
【Vue】PC 端 postcss-pxtorem vite 页面基于宽度 rem 响应式配置
摘要：安装 npm install postcss-pxtorem vite.config.ts import postCssPxToRem from "postcss-pxtorem" ...css: { postcss: { plugins: [ postCssPxToRem({ rootValue:
【Vue】vue3 动态设置 src 地址方法
摘要：<img class="logo-srkg" :src="getImgUrl('hwtm.png')" alt="" /> const getImgUrl = (src: string): string => { return new URL(`../assets/res-kg/${src}`, i
【Vue】从 0 搭建一个 Vue3 规范化、企业级项目骨架（转载）
摘要：从0开始搭建一个Vue3.x企业级项目骨架 手把手教你用 vite + vue3 + ts + pinia + vueuse 打造企业级前端项目
【Vue】vue3 部分组件手动刷新也无法热更新
摘要：问题描述 Vue3 + Vite 项目中，对部分组件进行修改后保存，页面无变化。手动刷新页面，依旧无变化；Ctrl+F5刷新页面，依旧无变化； 以为是热更新失效了，参考百度解决后在 vite.config.ts中设置热更新： 但明明已经配置了，还是没有生效，最后看到这篇博客解决问题：点击跳转 解决方
【Vue】前端人脸识别框架 tracking.js 活体检测/拍照在 vue2 的使用
摘要：Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件（足够使用了）。 做项目
【Vue】NavBar 顶部弹窗点击弹窗外部区域关闭弹窗实现
摘要：需求场景 很常见的功能，NavBar 顶部菜单按钮点击显示自定义的弹窗，【点击页面空白区域关闭弹窗】，类似 el-Popover 弹出框的效果。点击区域外自动关闭并且联动其他弹框，并且同时只能存在一个。 代码实现 template 部分 scrtpt 部分 完整代码 2022-7-11 更新完整代码
【Vue】qs 模块解决前端 get query 请求中相同参数名问题
摘要：需求展示 GET 传参要求 customer-user/select-representatives/actionId?profileIds=xxx?profileIds=xxx?profileIds=xxx 如果选择拼接字符串，浏览器只会解析到到第一个参数，后面因为同名无法解析。 网上查到的方法都
【Vue】patch-package 基本使用，给修改的 node_modules 下源码“打补丁”
摘要：需求场景 修改 node_modules 本地跑代码在多人开发项目时，重新 npm install 之后代码会把本地的代码覆盖，这里需要增加一个打包补丁解决。 使用方法 1.安装 npm install patch-package --save-dev 2.新增脚本命令 修改 package.jso
【Vue】vue-pdf 库第三方签章不显示的解决方法
摘要：需求场景 预览 pdf 并展示 pdf 中的第三方签章 问题描述 签章无法显示 解决方法 1.找到 vue-pdf 文件夹 首先我们要找到 vue-pdf 源代码的文件夹，找到关于 pdfjs-list 的引用文件地址。 2.pdfjs-list 源码修改 这里网上很多解决方法都很坑，只是说 nod
【Vue】如何写一个表格列显隐控制的组件？
摘要：需求 公司项目需要实现对表格列的显示隐藏进行配置，额外配置可自行添加，感觉这个组件挺泛用的，随便记录下。 这里只是说简单的显隐控制，复杂的只是在页面里面多写而已，核心代码是一样的。 简单的： 比较复杂的： 代码实现 表格页面.vue <column-setup @columnSetup="colum
