这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 生在国旗下，长在春风里！国庆将至，采黎为大家带来定制头像2.0（国庆头像），让我们用代码的形式为祖国庆生！欢迎大家点赞收藏加关注哦 前言 想看效果或者想定制春节头像的小伙伴请直奔效果区域；想一睹定制头像2.0小工具的原理及实现思路请耐心阅读，本文代码片段较多 在线定制 🚀🚀🚀定制头像入口,体验地址🚀🚀🚀 🚀🚀🚀github项目地址（欢迎⭐）🚀🚀🚀 喜欢这个小工具的话，动动小手点个star⭐哦，谢谢！ 关于迭代 继定制兔年春节头像上线后，很多小伙伴体验后第一时间就给了建议、反馈；在大家的帮助下，工具也...

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 前两天我的新同事告诉我一个困扰着他的问题，就是低代码平台中存在很多模块，这些模块的渲染是由模块自身处理的，简言之就是组件请求了自己的数据，一个两个模块还好，要是一次请求了几十个模块，就会出现请求阻塞的问题，而且模块的请求都特别大。 大量的并发请求会导致网络拥塞和带宽限制。特别是当网络带宽有限时，同时发送大量请求可能会导致请求之间的竞争，从而导致请求的响应时间延长。 因此模块的加载就很不顺畅。。。 为了解决这个问题我设计了一个关于前端实现并发请求限制的方案，下面将详细解释这个并发请求限制的方案及实现源码。 核心思路及简易实...

页面效果 具体实现 新增 1、监听鼠标抬起事件，通过window.getSelection()方法获取鼠标用户选择的文本范围或光标的当前位置。 2、通过选中的文字长度是否大于0或window.getSelection().isCollapsed(返回一个布尔值用于描述选区的起始点和终止点是否位于一个位置，即是否框选了)来判断是否展示标签选择的弹窗。 3、标签选择的弹窗采用子绝父相的定位方式，通过鼠标抬起的位置确认弹窗的top与left值。 constTAG_WIDTH=280//自定义最大范围，以保证不超过内容的最大宽度 consttagInfo=ref({ visible:false,...

用到的技术 父组件向子组件的传值类型检查和默认值：您可以为props指定类型检查和默认值。这可以确保传递给子组件的数据符合期望的类型，以及在没有传递数据时具有合理的默认值。例如： props:{ message:{ type:String, default:'DefaultMessage' }, count:{ type:Number, default:0 } } 在上述示例中，message的默认值是字符串'DefaultMessage'，count的默认值是数字0。 标签组件的效果如下 封装代码 <template> <div> <el-row>...

首先，先说说我要实现的内容：如下图，点“新增”会添加一个灰框内容，form表单是一个数组，一个灰框为一个对象，各对象保存时各自校验自己表单里的内容，互不干扰！   上页面代码（看部分代码就懂了）： 1<divv-for="(item,index)informList":key="index"> 2<a-form 3ref="formRef" 4:rules="rules" 5:model="formList" 6:label-col="{style:{width:'130px'}}" 7> 8<a-row:gutter="[24,24]"> 9...

[简介]： 关键代码;<el-rowclass='midPart'style=''>{{menu.name}}</el-row>.midPart{float:left;width:4%;padding:7px7px;background:444;} [内容]： <template><divid="MidMenu"><divref='midMenu'class='midMenu'><router-linkv-for='(menu,key)inmidMenus':key='key':to='menu.link':title='men...

Vue-router路由 什么是vue-router？ 服务端路由指的是服务器根据用户访问的URL路径返回不同的响应结果。当我们在一个传统的服务端渲染的web应用中点击一个链接时，浏览器会从服务端获得全新的HTML，然后重新加载整个页面。 然而，在单页面应用中，客户端的JavaScript可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。 在这类单页应用中，“路由”是在客户端执行的。一个客户端路由器的职责就是利用诸如 History...

第一个vue-cli程序的准备工作  什么是vue-cli？ vue-cli是官方提供的一个脚手架工具，用于快速生成一个vue项目模板。 预先定义好的目录结构和代码，就好比咱们在创建maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，有利于我们更加快速的开发。 环境准备（所涉及到的命令都在命令控制板中输入）： 第一步：下载Node.js 官网下载根据自己的电脑配置需求，无脑下一步就好了； 官网地址： Nｏｄｅ.ｊｓ下载好了可以在命令控制板中验证一下 node-v检测ｎｏｄｅ.ｊｓ的版本 npm-v检测ｎｐｍ的版本 第二步：安装ｎｏｄｅ.ｊｓ淘宝镜像 //　-ｇ就是全局...

背景 在做管理台项目时，我们会经常使用到表单+表格+弹窗表单的组合，以完成对数据的增、删、查、改。 在vue2+elementui项目中，使用弹窗dialog+表单form，实现对数据的添加和修改。 每次关闭弹窗时，使用resetFields方法对表单进行重置。 下一次打开弹窗时， 如果是添加数据，那么会呈现空的表单。 如果是修改数据，那么表单上已预填好了数据。 很多小伙伴可能会遇到表单重置的初始值问题，如图。 问题具体描述为：每次关闭弹窗时，表单不是重置为我们设置的空数据，而是重置为在该页面上第一次打开弹窗时表单的数据。 这意味着，如果我们进入页面后第一次打开的是修改弹窗，那么以后...

直接上代码 //拉起确认收货组件 if(wx.openBusinessView){ wx.openBusinessView({ businessType:'weappOrderConfirm', extraData:{ //merchant_id:'1230000109',//用户交易商户号 //merchant_trade_no:"1234323JKHDFE1243252",//商户订单号 　　　　transaction_id:"4200001918202309184260377001"//用户交易单号 }, success:e=>{ console.log("e1",e) this...

前言 Vue3是一个功能强大的前端框架，它引入了一些令人兴奋的新特性，其中最引人注目的是ref和reactive。这两个API是Vue3中响应式编程的核心，本文将深入探讨它们的用法和差异。 什么是响应式编程？ 在Vue中，响应式编程是一种使数据与UI保持同步的方式。当数据变化时，UI会自动更新，反之亦然。这种机制大大简化了前端开发，使我们能够专注于数据和用户界面的交互，而不必手动处理DOM更新。 Ref ref是Vue3中的一个简单响应式API，用于创建一个包装基本数据类型的响应式引用(也可以包装复杂类型，只不过底层还是由reactive的方式实现的)。它的主要优点是能够轻松包装基本数据类型，...

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 使用Canvas绘制一个验证码组件 前言 验证码，这一日常伴随我们的要素，是我们在线交互的重要安全保障。你的手机短信里是否被它占据半壁江山，今天我们就来聊聊如何在网页上实现一个简单的验证码组件。大家在登录网站时为了防止被恶意攻击或者多次点击操作，使用验证码是最常用的实现方式。在学习完Canvas后，通过Canvas实现简单的验证码就比较简单了，该组件已开源上传npm，可以直接安装使用，源码已上传Git，地址在文尾。 聊聊Canvas 1、在开始绘制Canvas时，我们需要先创建一个html节点，并为其设置宽高 <c...

搭建后台管理系统模板 2.1项目初始化 今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范，需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复，需要使用husky来做commit拦截，需要使用commitlint来统一提交规范，需要使用preinstall来统一包管理工具。 下面我们就用这一套规范来初始化我们的项目，集成一个规范的模版。 2.1.1环境准备 nodev16.14.2 pnpm8.0.0 2.1.2初始化项目 本项目使用vite进行构建，vite官方中文文档参考：cn.vitejs.dev/guide/ pnp...

这里给大家分享我在实际生活中总结出来的一些知识，希望对大家有所帮助 一.SDK引入 这里提供两套引入流程，一套是vue2.0及其他h5项目，一套是vue3.0的引入流程 不懂的也可以看我之前的一篇详细流程 记录--微信调用jssdk全流程详解 1.js引入 直接在你的页面里引入js文件就行 <scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> 2.weixin-js-sdk引入 先调用全局命令 npminstallweixin-js-sdk 然后修改main.js,加上以上代码 ...

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助   前言 可选链运算符(?.)，大家都很熟悉了，直接看个例子： constresult=obj?.a?.b?.c?.d 很简单例子，上面代码?前面的属性如果是空值（null或undefined），则result值是undefined，反之如果都不是空值，则会返回最后一个d属性值。 本文不是讲解这种语法的用法，主要是想分析下日常开发中，这种语法滥用、乱用的问题。 滥用、乱用 最近在codereview一个公司项目代码，发现代码里用到的可选链运算符，很多滥用，用的很无脑，经常遇到这种代码： constuserName...