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