工作栏目
这里讲的是工作中常用的一些配置和一些方便日后CV的代码
喝西瓜汁的兔叽Yan
前端开发工程师
展开
-
解决右键打印html只能识别1页的问题
hello,大家好久不见,昨天在开发中遇到了一个问题,就是在自己开发的网页中右键-->打印,由于页面内容过多,打印出来的内容只被识别到一页。针对这一问题,查阅了好多资料最终解决啦。原创 2023-08-16 09:46:16 · 9200 阅读 · 8 评论 -
一篇文章让你彻底学会--节流(并且自己可以手写)
Hi,有的小伙伴们在面试的时候会被要求手写,很多都被难着了吧,宝贝,那你你没有理解节流函数。今天,就让我带你攻克它!原创 2023-04-23 09:40:14 · 1033 阅读 · 1 评论 -
一篇文章让你彻底学会--防抖(并且自己可以手写)
一篇文章让你学会防抖。原创 2023-04-21 16:52:03 · 1217 阅读 · 0 评论 -
vue3中使用base64加密(两种方法)
Hi,今天分享一个在vue中使用base64对用户名、密码进行加密的小案例。我们是可以有两种方法的:1.使用插件:js-base642.引入文件。原创 2023-04-17 11:45:33 · 6208 阅读 · 0 评论 -
antd-vue中树结构显示 在线数/总数,实现在线人员绿色高亮,排序在前。(超难)
antd-vue中树结构显示 在线数/总数,实现在线人员绿色高亮,排序在前。最近开发中,遇到了一个需求,需要使用到antd-vue下的Tree组件。需要实现的功能点如下:1.树结构是部门的组织机构,包含的有部门内容和人员。2.每个树节点标题需要显示(在线人数/总数)的格式。3.对于在线人员,需要图标点亮,并且排序在最上方展示。对于离线人员,需要图标暗掉。原创 2023-03-02 15:21:46 · 1618 阅读 · 1 评论 -
导出Excel表格(调用后端接口方式)
在开发中我们会遇到导出Excel表格的需求,但是导出分为前端生成和后端生成。前端生成的方式CSDN其他小伙伴已经做出了很多教程,是依赖xlsx插件。但是,今天我讲的是,调用后端接口的方式生成Excel表格。原创 2023-02-14 09:05:28 · 2402 阅读 · 0 评论 -
antd-vue的修改树选择器treeData的属性名(递归实现)
在项目开发中,使用了antd-vue中的树选择器,但是antd-vue的树选择器的treeData的键值对是title和value.但是我们后台给的数据是title和key,这就对应不上了,所以需要我们递归修改一下数据即可。原创 2023-02-14 08:48:09 · 1342 阅读 · 0 评论 -
重磅!!!Vue3中的响应式语法糖(官网更新)
ref()其实,$ref()的使用就是这么简单,我们只需要注意:每一个会返回 ref 的响应式 API ($ref、$computed等)都有一个相对应的、以 $ 为前缀的宏函数。当遇到解构/直接赋值时,响应式都会丢失!!!栗子1:hooks解构出的响应式。原创 2023-02-07 14:52:27 · 2924 阅读 · 3 评论 -
日常避坑--input输入框type=number仍可以输入“e“,“.“等符号
input输入框type=number仍可以输入"e","."等符号原创 2023-02-02 09:53:08 · 1622 阅读 · 0 评论 -
Vue3中的全局事件总线(兄弟间传值)
vue3的全局时间总线兄弟组件之间传值原创 2023-02-01 13:57:46 · 2202 阅读 · 0 评论 -
数组中reduce方法详解
1.首先我们要明白redeuce是干什么的?2.我们再要明白什么时候用reduce?答:reduce在业内统称为数组的累加方法。我们一般会在1.数组求和,求乘积2 . 计算数组中每个元素出现的次数3 . 数组去重4 . 数组扁平化(将二维,或者多维数组转化为一维数组)等等等等使用reduce。说白了,基本上数组方法能做的事情,reduce都能做.原创 2023-01-31 11:57:54 · 783 阅读 · 0 评论 -
避大坑!Vue3中reactive丢失响应式的问题
避开直接赋值和结构,reactive直接包裹一个对象。简单数据类型使用ref()来进行定义。原创 2023-01-09 17:15:27 · 8807 阅读 · 7 评论 -
使用Vite搭建vue3+TS项目
vite 是一个基于 Vue3 单文件组件的非打包开发服务器,它具有快速的冷启动,不需要等待打包操作;并且官网说是下一代的前端构建工具。原创 2023-01-08 09:21:31 · 2588 阅读 · 0 评论 -
Vue3中修改父组件传递到子组件中的值(全网少有)
/此处是父组件中引入的子组件 < ChildrenView v - model : num = "num" / > //定义数据 let num = ref(10);//定义num为10,传递给子组件< script setup > //子组件接收父组件传递过来的数据 let props = defineProps({});原创 2022-12-16 15:24:04 · 8301 阅读 · 3 评论 -
vue中使用js生成txt文件
栗子:原创 2022-12-05 16:35:44 · 2282 阅读 · 0 评论 -
可视化大屏--响应式适配解决方案flexible.js
我们先下载flexible.js插件(在工程化时代之前,人们都是下载的flexible.js文件,工程化之后,我们依赖npm等包管理工具进行下载)那么,在可视化大屏的基础上,我们肯定是要适配所有的屏幕设备,不能出现一换电脑,样式就紊乱的情况。1.找到node_modules下的lib-flexible下的flexible.js。so,我们也不需要自己写媒体查询了,有现成的flexible.js的插件。最近公司开了第二个项目,是一个可视化大屏。2.修改对应代码为以下代码。然后重启Vscode即可。原创 2022-11-24 09:42:08 · 1486 阅读 · 3 评论 -
WebGL--vue+openlayers实现轨迹回放动画
【代码】WebGL--vue+openlayers实现轨迹回放动画。原创 2022-11-23 14:06:04 · 1209 阅读 · 0 评论 -
WebGL--Vue+openlayers实现绘制多边形并且计算出多边形内有多少物体数量
如果使用法二,请删除data中的polygonPoints。法一:自己写的isAtRegion()函数。methods中的isAtRegion()原创 2022-11-22 17:42:17 · 802 阅读 · 0 评论 -
WebGL--vue+openlayers实现覆盖物+popup
最近公司有需求,需要用到openlayers实现在地图上面绘制多边形,并且轨迹回放,实现弹出框,国内资料太少了,所以在这里放上openlayers的学习教程以及这个案例的代码。原创 2022-11-22 17:31:30 · 714 阅读 · 0 评论 -
工作中常用的插件
工作中常用的npm插件。原创 2022-11-18 08:45:29 · 705 阅读 · 0 评论 -
vue中深度选择器
例如你使用了ElementUI的走马灯(轮播图)组件,你想修改其中的样式,但是你设置样式不起作用,这个时候就是因为组件的scoped的影响,所以,不妨试试我们的深度处理器吧。为了防止在一个组件内引入了子组件,而子组件没有加scoped。我们可以看到,子组件加了scoped后,父组件对h3的css样式就不会影响到子组件,如果子组件没加scoped,就会影响到也变成红色。scss: ::v-deep(如果使用了预处理器都可以使用这个(::v-deep 如果使用了预处理器都可以使用。原创 2022-11-04 20:33:11 · 5225 阅读 · 0 评论 -
antd-vue中的表格排序
在使用antd-vue的表格想实现排序,但是不知道怎么弄的可以看这里,此处讲解了一个是数字类的排序(例如成绩),一个是字符串类的排序(例如姓名)。对于数字类型的排序更简单了,我们只需要直接return出a-b即可,此处以上图卡号为例.首先,antd的官方说了,在定义列columns时,里面有一个sorter排序,如图,我们要实现对字符串的排序,按照设备类型进行排序。,下面是定义列的数据格式。原创 2022-10-27 10:26:41 · 2510 阅读 · 0 评论 -
antd-vue中的下拉选择框搜索失效的问题
Hi,最近在开发中(vue3+TS)遇到了antd-vue中的下拉选择框,案例说看官方文档就能实现的,但是这个选择框自带了搜索功能,最后搜索功能失效。原创 2022-10-21 14:20:38 · 3297 阅读 · 0 评论 -
好久不见呀!封装的格式化时区时间来啦!
hello,好久不见,今天开发时候遇到了一个后台返回来的时间格式的数据,本来想用dayjs进行格式化,可是最后也没有头脑,于是就有了下面的函数,快用起来叭!对于这么懒的后端,我们也不必吐槽,自己动动小手就解决啦。首先在我们的utils文件下新建format.js文件夹。原创 2022-10-18 15:41:52 · 380 阅读 · 0 评论 -
微信小程序的登录功能
7.前端再把phone和openid给后端存在数据库,将openid存储在本地存储,再次进来时,查询本地存储是否有openid(在生命周期onShow中先获取本地存储再判断),利用openid发起查询,再显示出来即可。3.后端调用TX的开放接口将appid,secrect与code发送,把收到的openid与session_key发送给前端。4.前端再把openid,session_key,iv,encrypteData发送给后端,让其进行解密。1.前端需要调用wx.login()获取code。...原创 2022-07-29 17:54:08 · 558 阅读 · 0 评论 -
小程序中请求数据的二次封装
代码】小程序中请求数据的二次封装。原创 2022-07-29 17:37:46 · 255 阅读 · 0 评论 -
小程序中的header适配
再在视图中把行内样式高度设置为navH。获取app.js中的全局数据。原创 2022-07-29 17:36:07 · 381 阅读 · 0 评论 -
商城详情页的开发
3.给scroll-view设置高度,需要获取到屏幕的高度,在app.json里用this.getSystemInfo(),思路同适配。索引与类名保持一致,方便以后来处理,此处需要使用id来获取,而不是class[在小程序中,scroll-view的时间也要求id命名]1.利用scroll-view的scroll-into-view//根据id选择器,跳转到对应的子元素.2.根据在首页列表点击的商品id传送至详情页,详情页再根据id发送起请求,再把数据渲染。//点击获取对应的id选择器。...原创 2022-07-29 17:22:20 · 633 阅读 · 0 评论 -
购物车的实现
用map方法遍历购物车数据,让里面的shop_select等于当前data的selectAll,再用1个map遍历item(店铺)下的children(商品),修改is_goods_select为当前的selectAll。循环遍历整个购物车数据,如果整个数据下有shop_id等于当前cart下的shop_id,用every遍历当前店铺数据下的children(产品)的goods_is_select是否为true,是的话店铺选中。让当前店铺下的is_shop_select取反,保证点击实现选中与未选中切换。.原创 2022-07-28 21:41:07 · 712 阅读 · 0 评论 -
vue3中的路由与vuex
代码】vue3中的路由与vuex。原创 2022-07-26 19:48:58 · 370 阅读 · 0 评论 -
vue实现登录功能
4.客户端收到Token以后可以把它存储起来,比如放在Cookie里或者localStorage里。\6.服务端收到请求,然后去验证客户端请求里面带着的Token,如果验证成功,就向客户端返回请求的数据。\3.验证成功后,服务端会签发一个Token,再把这个Token发送给客户端。\5.客户端每次向服务端请求资源的时候需要带着服务端签发的Token。\2.服务端收到请求,去验证用户名与密码。\1.客户端使用用户名跟密码请求登录。......原创 2022-07-26 15:06:50 · 3109 阅读 · 0 评论 -
Axios的二次封装
代码Axios。原创 2022-07-24 16:45:34 · 157 阅读 · 0 评论 -
vue2路由与vuex
main.js挂载store。原创 2022-07-24 13:22:06 · 521 阅读 · 0 评论 -
常用的代码片段(mysql)
database—db.js原创 2022-07-06 13:57:46 · 378 阅读 · 0 评论 -
常用的代码片段
vue3的代码神器移动端的base.csssrc–styles–base.cssApp.vue中引入设置项目自启动vue.config.js中:vue代理跨域vue.config.js中:可视化服务项目的flexable.jssrc–utils–flexable.js原创 2022-06-27 14:15:39 · 326 阅读 · 0 评论 -
新电脑的前端开发环境的安装配置
工作换新电脑了,想不起来怎么配置,自己就回来看一下吧。原创 2022-06-27 12:39:53 · 4977 阅读 · 0 评论