2303_77072102的博客

在给定的 Vue.js 组件代码中，根据optionKey的不同值，展示了不同的表单内容并定义了不同的表单验证规则。// 应用场景: 我们可以先写好多个不同的表单类型和验证规则，然后根据不同的场景我们可以直接通过策略分配，通过组合不同的表单项目从而搭建不一样。这种方式带来了可扩展性和易维护性，当您需要添加新的表单类型或不同的验证规则时，只需简单地往optionMap对象内添加新的策略即可。// 优点：这样的设计允许在不同的场景下使用不同的策略，而无需修改主要的逻辑。

错误写法：不能通过重定向path写法 只能通过加载组件的写法不然页面每次一刷新第一次就会进入到404页面。我们只需要在routes.ts的routes里面配置一条重定向路由即可。需求当用户访问非加载过的页面需要全部重定向到404页面。

问题:我司项目嵌套了一个二开的编辑器页面，由于编辑器很大，初次进入编辑的时候需要加载很久大概3S左右才能显示页面。后续有需求需要通过router路由跳转到编辑器页面，每次在点击跳转按钮的时候会在当前页面停留4s到9s不等才能前往到编辑器页面。老总说用户体验很不好叫我先进入到编辑页面再去加载数据。动态路由使用 components 就是懒加载的路由路径 类似 () => import('@/views/home/index.vue') 你只需要在你项目的返回懒加载路径改成我下面这个写法就可以了。

事件通常不会被触发。这是因为浏览器认为这个图片已经成功加载过了,所以不会再次触发。这是因为浏览器认为这个图片已经成功加载过了,所以不会再次触发。很简单 在图片容器上面加一个唯一的key就行了 用时间戳就行了。属性值没有发生变化,即使图片是从网络上加载的,当图片从浏览器缓存中加载时,

需求:我司是做AIGC项目最近和地铁项目有关需要实现海报效果图，并且需要使用画布拖拽和修改上传删除等等功能 当时连续加班花了10个工作日搓出来 实现挺简单的但是Canvas数据处理还是挺麻烦的 大概功能如图下首先我们需要引入Fabric.js 这个库封装好了原生的Canvas的Api使用uniapp和vue项目。

我司项目突然要做平板兼容,我在调试的时候发现当屏幕尺寸低于960px发现样式但凡是以rpx单位的全部失效，如果是以px为单位那么影响就比较小，当时解决方案是写了不少媒体查询和把单位rpx改成px，步骤配置 找到文件pages.json。官网也有文字说明但是文字比较多 配置。

我司突然来了个大数据项目需要使用长连接 本来心想用定时器解决的但是后面业务涉及到一个操作最多同时只能一个人触发。这样的话定时器就无法满足需求的，就需要使用WebSocket。1.首先创建WebSocket实例对象 这是JS原生自带的无需下载第三方库 如果需要心跳检测一定要封装成函数 调用 不需要就可以直接找个位置即可。2.创建生命周期钩子监听各个阶段的事件。5.完整代码复制接口 开箱即用。

比如这种场景：有一个canvas的涂鸦区域，用户可以在canvas上随便涂写啥，在该区域的特定位置会加一些点击事件，比如切换大小颜色啥的，此时就可以在该区域下加上按钮，把不同事件添加到不同按钮上。，它定义了在何种情况下元素可以成为鼠标事件（或触摸事件）的目标。这个属性可以控制元素是否可以被点击、是否可以触发鼠标事件，或者是否应该忽略鼠标事件，让事件传递给下面的元素。现在有一个层级很高的遮罩层和一个按钮它们兄弟级关系 遮罩层脱离了文档流 按钮有一个点击事件 现在需要点击按钮触发按钮的点击事件。

这是因为这里的数据是初始化产生的，并不能跟着local变化而响应变化，关于这一点，我是放在了computed里面解决的。这是因为切换语言是修改的全局变量locale，当页面一刷新，相当于又重置为默认值了，所以上面。开发了一个跨境项目需要实现国际化语言,这里采用的是vue-i18n库实现 超简单。

近日,我司弄了一个纯原生的微信小程序,里面刚好就用到了一个微信提供的button的bind:chooseavatar属性可以获取到用户的头像以及微信昵称。这个属性是在uniapp使用的,纯原生开发是不需要加上这个属性的,一但加上就报错了,所有在全局的app.json里面找到这个删掉就可以了。1.网上有很多方案是更新隐私协议以及降低基础库来解决的 (我是本地开发这个协议更新是针对于生产环境的(所以不可取),2.这个是我最优的解决方案,方案一在我尝试来是没有效果的。基础库降低到2.2版本左右就可以正常使用,

vue3自动导入Api以及自定义组件原理。

import { ripple } from '@/directives/waves/waves' //这是我的路径。步骤一:创建一个waves.ts文件(直接复制即可 在vue3项目保证可以用)没用ts的话就直接把语法声明去掉即可。const vRipple = ripple//这个常量名就是后面页面会使用的指令名 可以随便命名。步骤二:在需要使用的页面进行引入你创建的waves.ts路径同时注册指令。下图是使用页面的截图主要红框标注的地方即可 不然会导致水波纹定位不准确。// 自定义水波纹指令。

注意:如果打印文本的内容是后端返回或者是异步的需要绘制一个预览页面 能预览页面的DOM数据加载完成之后再去掉用打印操作 (打印操作的唤起在Mounted之前 会导致打印页面为空白的)第四步:实现打印 使用v-print="printObj"可以使被绑定的元素获得点击唤起打印页面的功能。总结：打印功能很简单绘制需要打印的页面即可 麻烦的是打印中包含条形码 我们需要做PDA扫码容错。-- 打印的范围区域 id是用来获取打印的区域 -->下面是A4和挂牌的效果图↓↓↓↓↓↓↓。第一步:安装第三方库。

解决方案 在同样的条形码条宽度手机的条形码识别宽度要小于扫描枪的识别宽度 可以配置options 的width配置项来解决。解决方案:options 的width配置项 不同打扫码枪能识别的条形码的条width宽度不一样。注意:在打印中使用条形码就不一样了 我们需要注意条形码容器的类型 可以回到第三步阅读。我司用到的扫码枪是PDA 可以在扫描出电脑上的但是无法扫码打印纸上的(注意:条形码的内容会影响条形码的长度 内容文本越长 条形码宽度越宽。怎么舒服怎么来 在打印踩的坑我放到文章第三步和结束了。

我司需求需要根据用户的实时地理位置来实现OA范围打卡功能，这就需要计算两个经纬度直接的距离。// 根据经纬度计算距离，参数分别为第一点的纬度，经度；这个工具函数复制即可 开箱即用 亲测有效。

前言：本文目的——我在el-table中使用expand嵌入了新的table,当点击顶层table行时展开新的table内容并显示，同时内层table需要实现分页效果等。:row-key="" //设置行的唯一标识，用于配合expand-row-keys使用，(行的唯一标识 expand-row-keys存放的值就是行的唯一标识):expand-row-keys="" //设置当前展开行，要求值为数组(白话就是 存放在这个数组的ID会在页面中展开,没有就不会展开)三、在内层设置展开行的书写插槽。

1.只能输入正整数且默认值是1 (栗子 后面的写法只需要更改oninput对应的函数即可)我司开的黄金项目需要在表格里面添加输入框并且需要校验用户输入的类型以及默认值。4.只允许输入正整数和正小数且小数只保留2位数同时默认值是1。亲测有效 vue2和vue3都可以用 开箱即用。4.只允许输入正整数和正小数且小数只保留2位数。这个时候我们就需要用到oninput事件了。3.只允许输入正整数和正小数。

vue3-print-nb(打印组件 页面兼容性好 vue3可以使用)jsbarcode(条形码 vue3可以使用)

*query.selectAll 参数就是class类名 可以获取到所有带skeleton-circle类名的节点 这个类名可以自己起 *//*query.selectAll 参数就是class类名 可以获取到所有带skeleton-rect类名的节点 这个类名可以自己起*//* 获取当前组件的实例 vue2里面是用this vue3里面没有this就要换成getCurrentInstance()来获取实例 *//* 我这边用的是定时器来模拟后端数据异步返回的结果从而实现骨架屏 */

/ 数组写法同时获取指定文件夹下面的所有文件。我们已经知道 "*"是代表所有文件 "**"是代表所有文件夹 它们是指目录下的所有而并不是单个文件或文件夹 当我们指定某一个目录那么他就是获取指定目录下的所有文件。