- 博客(48)
- 收藏
- 关注
RSS订阅原创 【word pdf】文档展示（流程图，公式处理方案）
前端展示Word文档及其流程图存在挑战，主要难点在于处理Word中的绘图对象（如流程图）。解决方案包括：1）服务端转换为PDF/HTML（保真度高但需后端）；2）纯前端基础预览（简单但无法显示绘图）；3）增强版前端预览（如Mammoth.js，可定制但效果有限）；4）微软官方服务（完美但需网络）。对于复杂内容，建议转为PDF展示更可靠。文中提供了Mammoth.js的Vue3实现代码示例，并指出其对绘图对象的支持有限。
2025-09-22 09:31:13
316
原创 【ResizeObserver】【页面布局】监听一个 div 元素的动态高度变化并同步设置另一个元素的高度
在 Vue3 中监听一个 div 元素的动态高度变化并同步设置另一个元素的高度，最佳实践是使用 ResizeObserver API。
2025-07-24 19:41:55
464
原创 前后端交互过程中—各类文件/图片的上传、下载、显示转换
此实现完全在客户端完成转换，无需服务器支持，适合中小型TIFF文件的转换需求。readAsDataURL 会生成一个 Data URL（以 data: 开头的字符串），它包含了文件的全部内容（base64编码）。由 JavaScript 生成的二进制数据（如 PDF、图片等），或在不使用服务器的情况下在页面中显示这些数据。注意：由于utif库处理的是TIFF文件的二进制数据，我们需要使用FileReader来读取文件。：生成的 URL 会一直存在于内存中，直到文档被卸载（页面关闭）或手动撤销（
2025-06-07 19:59:47
1295
原创 【编写Node接口；接口动态获取VUE文件并异步加载, 并渲染impoort插件使用】
本文使用vue3-sfc-loader在运行时从Node.js服务器动态加载Vue3和Vue2的单文件组件，无需依赖Node.js构建过程，同时展示了在Express应用中设置接口以及在Vue项目中使用loader的详细步骤。，它是Vue3/Vue2 单文件组件加载器。在运行时从 html/js 动态加载 .vue 文件。无需 Node.js 环境，无需 (webpack) 构建步骤。
2025-04-13 17:00:49
856
原创 前端开发—接口代理proxy
如果直接转发，请求会变成 https://your-backend.com/api/users（这可能是后端不存在的路径）。通过 replace 删除开头的 /api，路径就变成了正确的 /users。我们想代理到：https://your-backend.com/users（注意这里没有 /api 前缀）如果 path 字符串是以 /api 开头的，则删除开头的 /api 部分，保留剩余部分。前端请求：http://localhost:3000/api/users。
2025-02-20 10:31:53
1943
原创 【VUE3】中toRaw函数，defineAsyncComponent定义异步组件函数及打包后ErrorComponent
toRaw是Vue 3 Composition API中的一个函数，它接收一个由reactive或readonly方法创建的响应式代理对象，并返回该代理对象对应的原始对象。这意味着，通过toRaw函数获取的对象，对其进行的任何修改都不会触发Vue的响应式系统，从而不会引起页面的更新。
2025-02-11 11:35:20
1231
转载 【VUE3】修饰符及用法
但是，使用passive修饰符可以告诉浏览器，事件处理程序不会调用preventDefault()来阻止滚动行为，从而使得浏览器可以在滚动操作即将发生时立即进行滚动处理，提高滚动的流畅度和响应性能。这意味着如果一个父元素和子元素都有相同类型的事件监听器，并且点击了子元素，那么只会触发子元素的事件监听器，父元素的事件监听器将被忽略。例如，我们有一个父元素和一个子元素，父元素绑定了一个点击事件，子元素是父元素的一个子元素。修饰符可以确保点击子元素时不会触发父元素的点击事件，只有当点击父元素本身时才会触发。
2025-01-19 16:10:11
460
原创 【二进制流转换成图片文件，不同网络请求配置问题（Content-Type，responseType）】
fetch 是现代浏览器原生支持的 API======async与await使用======使用 x-www-form-urlencoded 格式======age: 30headers: {},});===========请求使用 FormData 格式===========});fetch 请求返回的是一个 Response 对象。responseType用于指定服务器响应的数据类型。常见的数据类型有：“”、“blob”、“document”、“json”、"
2025-01-03 12:40:48
873
原创 【React】基础及高级用法
￮ Dispatch 的参数可以是函数，可以不是，如果是函数，就更新为函数执行的结果，如果不是，直接更新为值；是在 DOM 更新之前执行的，那么 对于 css-in-js 的场景，可以解决性能问题。可以是函数，可以不是，如果是函数，就更新为函数执行的结果，如果不是，直接是值；￮ 编译是我去转化代码，AST，编译完了，我才能丢到引擎(V8)里去执行。• Dispatch， 用户修改state 的方法，同时触发更新。• 如果我有一个数据，并且这个数据改变时，我需要触发界面更新。
2024-12-23 16:28:58
886
原创 TS ES
TypeScript[4] 是一种由微软开发的自由和开源的编程语言。它是 JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。1.js一种脚本语言；ts是js的超集，用于解决大型项目的代码复杂化。4. ts不允许改变变量的数据类型；js变量可以被赋予不同类型的值。
2024-11-10 14:23:55
501
原创 【JS高阶】定时器、线程进程、事件循环EventLoop（/回流重绘）、Promise
1.宏任务（从上到下、从左到右的整体）2.微任务的Event Queue（Promise.then，async / await整体，process.nextTick【node环境】）3.宏任务的Event Queue（setTimeout / setInterval / setImmediate【node环境】）4.同一轮微任务队列中，依次顺序执行 process.nextTick 、queueMicrotask、Promise.then和async/await5.同一轮宏任务队列。
2024-10-22 17:41:37
843
5
原创 【JS高阶】【浏览器】—BOM( history vs hash、js宽高属性)、DOM(事件/监听/委托...)、ES
每个JavaScript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以，这些属性（[[scope]]）仅供JavaScript引擎存取。：[[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式链接，这种链式链接叫作用域链。定义：变量（变量作用于又称为上下文）和函数生效（能被访问的区域）。：指的就是我们所说的作用域，其中存储了运行期上下文的集合。注：来源直播视频整理。
2024-10-13 20:00:53
325
1
原创 浏览器前缀、BFC深入解析、flex布局简析、行盒line boxes对齐及vertical-align居中原理、line-height
浏览器前缀、BFC解析
2023-01-10 15:40:00
502
转载 js中数组/字符串常用属性方法归纳
js中数组/字符串常用属性方法归纳1、数组创建： new Array(5)-->创建有5个元素的数组； new Array()-->创建空数组； new Array("a","b","b")-->创建有3个元素，分别为abc的数组； []-->创建空数组； ["a","b","b"]-->创建有3个元素，分别为abc的数组；2、数组的方法： arr1.concat(arr2) --> concat()连接数组1和数组2返回
2022-02-10 14:50:19
223
原创 打包后图片不显示问题
设置publicPath在vue.config.js 配置文件中// 打包app时放开该配置 publicPath: process.env.NODE_ENV === 'development' ? '/' : '/yad-exp/mgrui',遇见bug，雅迪物流后台项目—— yad-exp-uiuni项目打包uni-app解决无法加载本地图片的方法【动态加载背景图片*唯一的解决办法！！！】特别注意：千万别忘记了【url(${indexBgImage })】<view :st
2021-06-30 18:53:53
2371
1
原创 js开发处理数据等常用语法
js开发处理数据等常用语法备注json转换时间截取push()map()定义/语法举例注意：这里注意箭头函数有两种格式：这备注标记文本引用文本H2O is是液体。210 运算结果是 1024.json转换JSON.stringify([“111”,“222”])JSON.parse("[“111”,“222”]")时间截取customRender:function (text) { return !text?"":(text.length>10?text.substr(
2021-06-24 15:59:08
217
转载 Ajax、fetch、axios的区别与优缺点；axios跨域问题
背景前端的技术发展速度非常的快，异步请求也是其重要的体现之一，从最早的原生XHR，再到JqueryAjax的统治时代，再到近来，fetch、axios等技术也开始出现并大量投入使用。原生AjaxAjax是指一种创建交互式网页应用的网页开发技术，并且可以做到无需重新加载整个网页的情况下，能够更新部分网页，也叫作局部更新。XMLHttpRequest 对象使用ajax发送请求是依靠于一个对象，叫XmlHttpRequest对象，通过这个对象我们可以从服务器获取到数据，然后再渲染到我们的页面上。现在几乎
2021-03-21 23:15:53
631
原创 ！模块化,IIFE
模块化CommonJSES6的模块化实现导出让别人使用：导入：export defaultimport使用CommonJSES6的模块化实现导出让别人使用：总导出方式导入：export defaultimport使用
2021-02-15 17:27:09
169
原创 工作区、版本库中的暂存区&版本库
工作区、版本库中的暂存区和版本库之间的关系图中左侧为工作区，右侧为版本库。在版本库中标记为 “index” 的区域是暂存区（stage/index），标记为 “master” 的是 master 分支所代表的目录树。图中我们可以看出此时 “HEAD” 实际是指向 master 分支的一个"游标"。所以图示的命令中出现 HEAD 的地方可以用 master 来替换。图中的 objects 标识的区域为 Git 的对象库，实际位于 “.git/objects” 目录下，里面包含了创建的各种对象及内容。
2020-12-21 11:24:47
143
原创 Git命令 git commit -am
git commit -m与git commit -am的区别理论实例总结使用git commit -am是不是就可以完全不使用git add命令呢？不是理论要了解git commit -m与git commit -am的区别，首先要明白它们的定义字面解释的话，git commit -m用于提交暂存区的文件，git commit -am用于提交跟踪过的文件[注意]git commit -am可以写成git commit -a -m，但不能写成git commit -m -a定义中出现了暂存区、跟
2020-12-18 17:39:26
1801
1
原创 uniapp小程序
uniapp小程序uni-app之响应式单位upx和rpxuniapp小程序除了改动外，新增了一批手机端常用的新组件js的变化工程结构和页面管理一些开发思路，以及标签的替换，方法的转换：Storagetoast标签化路由路由路由数据接收下拉刷新input placeholder样式uni-app之响应式单位upx和rpx重点：官方推荐使用rpx替代upx，参考：推荐使用rpx替代upx的公告。在普通css写法里，upx会被编译器编译；但动态绑定时，upx不能像rpx那样直接支持动态绑定，还得再使用un
2020-06-12 10:33:30
2620
原创 px em rem vw vh vmin vmax
px em rem vw vh vmin vmax总转换工具px像素（Pixel）emEM特点简介注意remrem是什么为什么web app要使用rem？1、实现强大的屏幕适配布局：2、固定宽度做法3.响应式做法4.设置viewport进行缩放rem能等比例适配所有屏幕是怎么计算出不同分辨率下font-size的值？总px：绝对单位。页面按照精确像素显示。em：相对单位。基准为父元素font-size的大小，如果自身设置font-size则按照自身来计算。rem：相对单位。相对于根节点HTML的字
2020-06-12 09:59:48
296
原创 vuex状态管理工具
vuex简介单界面到多界面的状态管理切换运行下载使用事件更改counter 大管家vuex核心概念stategettersmutations简介单界面到多界面的状态管理切换运行下载使用npm install vuex --savestore 文件夹 index.js文件夹------dddd事件更改counter 大管家vuex核心概念state...
2020-02-05 00:52:30
190
1
原创 promise（异步操作）
promisepromise的链式调用链式调用简写promise的all方法使用promise的链式调用只有第一个 setTimeout()有进行异步操作。没必要new一个promis。还不够简洁当某一层出现错误：方法3 抛出异常也可链式调用简写promise的all方法使用all方法...
2020-02-05 00:35:44
175
原创 尤克里里整理
尤克里里如何按弦如何弹奏带数字的四线谱如何按弦如何弹奏带数字的四线谱数字代表品格数（1就是1品；2就是2品）数字标记在几弦上面，就按住几弦的几品...
2019-12-27 14:55:11
658
原创 路由vueRouter
路由vue-router路由及其映射关系前端渲染后端渲染和前端路由后端路由替换安装使用Vue-router首页默认显示路由动态拼接：路由动态（拿数据）认识路由的懒加载嵌套路由添加默认路径：参数传递：用按钮跳转传参router和route由来：vue-router全局导航守卫路由及其映射关系前端渲染后端渲染和前端路由后端路由替换安装使用Vue-router首页默认显示...
2019-11-28 17:05:22
177
1
原创 vue模块化 及导入导出的使用
vue模块化模块化开发不使用模块化带来的问题CommonJSes6的模块化的导出和导入export的基本使用：export default导出统一全部导出模块化开发不使用模块化带来的问题初始模块化思想：CommonJSes6的模块化的导出和导入export的基本使用：export default导出统一全部导出...
2019-11-21 14:12:05
503
2
原创 Vue组件化
vue组件化一、组件化的使用过程注册组件基本步骤全局组件和局部组件：父子组件：注册组件的语法糖：组件模板抽离的写法：组件data必须是函数：父子组件通信父传子props子传父--自定义事件父子组件通信--结合双向绑定案例watch实现：父访问子--children-refs子访问父--parent-rootslot插槽slot-插槽的基本使用slot-具名（name）插槽的使用：编译作用域作用域插...
2019-11-21 14:03:37
252
原创 Vue基本原理及指令
vue一、认识VueVue的安装响应式、计算器（方法）MVVM创建Vue实例传入的optionsVue的生命周期v-clockv-bind计算属性es6语法补充事件监听 v-onv-if 和 v-else-if 和v-elsev-if和v-show的区别：v-for数组中哪些方法是响应式的：高阶函数v-model结合radio使用v-model：checkboxv-model：selectv-mo...
2019-11-21 11:25:03
326
1
原创 json 异步加载 时间线
json字符串解析成对象：（对象可以调用它的属性名和属性值）异步加载常用第三点利用定时器：但是一般不知道多久后执行，所以：onload事件。当下载完了就执行。IE语法：（状态码）封装成一个函数万一在绑定onreadystatechange事件之前已经加载完了，就不会触发事件了，所以：...
2019-10-03 22:07:01
215
原创 css乱笔记
target: 在浏览器中的打开方式，target=”_blank” 在新标签中打开Cursor 鼠标样式定位position（left/right）Absolute（相对父级定位）；relative（相对原来位置定位）；fixed（在中间浮动）z-index（默认值为0）10个html5增加的重要新特性和内容https://www.cnblogs.com/yonglin/p/70...
2019-08-02 00:35:49
130
原创 arguments,(深浅)克隆,三目运算符，数组，类数组
arguments,克隆,三目运算符，数组，类数组argumentsarguments.calleefunc.caller克隆argumentsarguments.calleecallee指向的是函数的引用callee指向的是函数的引用，即函数自己运用：因为函数是立即执行函数，没用函数名，想要递归怎么实现呢？需要的就是函数的引用即：小发散：func.caller没啥太...
2019-07-21 16:16:24
267
原创 （进制，类型）、This指向（显隐式绑定，new构造函数this变化）
进制类型数字类型number布尔类型boolean字符串类型stringundefined对象object（null）functiontypeof 可能返回的几个类型引用值比的是地址；对象跟对象，是两个不同房间，不相等。thisnew test()后4.谁调用它，this就指向谁题目练习：解析：...
2019-07-20 00:48:52
487
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人