- 博客(33)
- 收藏
- 关注
RSS订阅原创 vue3加入购物车动画
addCart函数，利用异步将小球的位置由初始位置变成抵达位置，后将小球隐藏，在动画事件后触发小球隐藏，并返回动画结束，也可以不需要隐藏，将购物车层级比小球高即可。css想要做抛物线需要利用两个dom元素，一个向垂直移动一个向水平移动，向水平方向移动再添加贝塞尔曲线，使其抛物线更加好看点。addBall函数，将小球的初始位置和图片传到ballList中，并触发addCart加入购物车函数中。监听用户点击，去触发获取小球的初始位置信息和图片添加到ballList中创建出一个小球。
2024-08-23 17:43:57
82
原创 vue3信息大屏适配解决
1.将展示区域设置为水平垂直居中，宽高比设置1920*1080。使用css的transform来解决适配问题。4.在页面挂载后修改内容盒子的缩放比例。5.添加调整窗口大小事件。3.编写缩放比例方法。
2024-03-14 09:54:03
607
原创 根据图片地址跨域下载图片
3.由于我们只需要拿到图片链接的路径，不需要地址，因此需要截取路径。前端跨域还是需要用到axios,因此需要建立一个axios请求。4.生成链接，发送请求。
2024-02-29 11:26:49
581
原创 按钮权限设置
3.新建一个自定义指令的文件夹directive并创建文件夹module在其中创建permission.js文件。6.接下来只需要在需要的按钮上加v-permission="（对应的id）"就可以了。2.将后台返回的权限列表进行筛选将按钮list存在store中。4.在文件夹directive创建一个index.js，将其引入。1.按钮权限通过后台管理，通常是由后台将权限列表统一返回。5.在main.js中引入并注册。后台管理系统自定义按钮权限，
2024-02-18 17:28:32
472
原创 iview，Table组件二次封装实现高度自适应统一
在原有的table上获取到视图上方的距离，然后再判断table下方有多少dom盒子，再将table距上方高度，下方盒子高度，所需留白高度相加然后再加个事件监听，得到table的高度就实现了高度自适应。封装table时发现如果表头属性中有slot如何解决，开始只做了简单判断，判断了第一层slot，但当colums的children中有slot将无法识别。后台管理系统的界面留白高度总是不统一，界面中大部分都是table列表，于是需要二次封装cus-table.下面是代码。
2024-02-03 12:03:09
587
原创 vue3加入购物车特效
4. 随着窗口的变化，购物车的位置也会相应改变，所以需要监听实时位置。3.填写点击事件触发购物车加入购物车特效，2. 在页面中引入组件，创建点击事件。1.新建个购物车动画组件。
2024-01-02 10:01:07
550
原创 安卓对接，对响应的的byte值处理为10进制
公司有个apk要与硬件对接拿到实时温度和重量，使用安卓基座进行处理，他那边相应2为16进制有效值，于是需要将值进行处理拿到正确的值。5.如果转换的二进制第一位是1那么其值就为负数，此时就需要对负数的二进制进行处理，将其变成正数，4.转为2进制后可能长度不够需要进行补零操作，定义补0方法将num12S,num12S进行补零。1.安卓基座传过来的byte数据，首先将byte组转换为16进制。7.使用如果首值为负数，那么就使用twoComplete方法。2.截取数组中我们需要的值，我这对接的是需要2位。
2023-12-26 17:21:36
461
原创 vue3 响应式rem布局,附带媒体查询
3.在公共方法文件中加入flexble.js,并在main.ts中引入，我这里是放在了src中的utils文件中在main.js中引入。4.在公共样式文件style中的index添加下面代码,如果需要其他的适配也可以在此添加或修改。2.新建postcss.config.js文件跟page.json 同级目录下，写下该代码。但是在窗口无限小的时候，肯定是要固定宽度的，这时候就要用到媒体查询。我们可以在公共样式中设置媒体查询。5.在main.ts中引入该文件。
2023-12-26 16:53:19
804
原创 圆形进度加载环
1.Ui设计了个圆形进度加载环，这边采用cnavas制作。3.将该组件使用到对应位置，这样子就能展现出想要的效果了。2.封装一个组件progress-circle。
2023-09-05 16:49:00
103
原创 调取接口下载文件
2.url链接写法url链接一般只需要将后台传回的url链接调用即可，此处需注意，由于浏览器的强制缓存问题导致下载的表单不会刷新，此处需要给url链接加一个时间戳。1.后端返回文件格式一般有两种，一种是返回url链接，一种是返回blob流，此处建议blob流。3.第二种blob流的形式需要在接口请求时定义。将responseType设置为bolb。4.在调取接口判断类型下载文件。
2023-09-01 14:15:17
409
原创 动态渲染数据，实现界面批次添加数据
1.由于后端数据返回量太大，一次渲染会导致页面卡顿，于是想到利用window自带方法renderOptimization，cancelAnimationFrame来解决。1.先将后端返回得数据切割成10个一份得数组。3.在调取后端数据时进行引用。2.创建添加数据方法。
2023-08-11 10:54:45
119
原创 Vue3 实现全屏方法
浏览器自带全屏方法 document.documentElement.requestFullscreen()，和退出全屏方法document.exitFullscreen()，判断是否全屏document.fullscreenElement如果不是全屏返回null。1.定义全屏按钮，这里事引用了element-plus框架。2.定义执行的回调函数。
2023-08-08 17:41:09
1789
原创 常见的表单校验规则
在写管理系统时经常会需要表单校验，在这把经常遇到的表单校验记录下来，持续更新。3.正则由6-12字符或数字组成。1.正则由数字英文特殊字符组成。5.正则由汉字，数字，字母组成。2.正则由中文或英文字母组成。4.正则校验电话号码。
2023-08-08 10:10:24
216
原创 利用递归组件动态渲染下拉菜单
自己想手搭一个vue3+ts的后台管理项目，在构建导航栏的时候，发现根据路由权限信息动态配置导航栏，之前的vue2实现方案比较复杂于是自己利用递归组件实现导航栏。2.将路由信息引入store，后期可进行持续化存储。3.在layout页面引入菜单栏。2.创建一个导航栏组件。
2023-08-01 11:14:37
215
1
原创 js原生实现拖拽上传文件和点击上传文件
3.注意，开始清空input file上传框时用了files.outerHTML = files.outerHTML;但后续发现会影响文件删除和上传，于是就用 files.value = ''。1.公司想做一个小工具，需要编写原生的html配合后端实现一个功能，其中用到了文件的上传。2.其中系统默认的文件上传框太丑了所以需要将原生的给隐藏掉，这里贴html和css部分。利用dom的点击方法调用原生的input file方法，直接实现点击上传文间。
2023-07-25 16:49:07
693
原创 webSocket的使用及二次封装
4.在需要建立连接的页面使用，用data定义所需要的数据，在初始化页面时调用该方法。apk需要实时数据展示于是就全局封装了个webSocket。2.在引入公共函数的js文件中引入webSocket.js。3.在main.js文件中用vue实例上挂载这些函数。1.创建一个webSocket的js文件。
2023-07-19 14:27:51
252
原创 uni-app 二次封装下拉选择组件，实现v-modal数据绑定
就需要把他们单独领出来做成公共组件，下面是我所做项目需要的样式，其他需要用的小伙伴可以在这上面进行修改。3.封装下拉框，主要是因为ui设计的样式与uni-app所提供的样式不同点太多所以需要修改许多样式。2.将需要自定义的属性抛出，由于我这个项目样式统一，就没抛出很多自定义的属性。1.html结构，直接引用uni-app 自定义的组件。
2023-07-18 17:02:12
933
原创 uni-app table表格无缝循环轮播
在app的table表格数据超过定义的长度实现无缝轮播效果，本来用了网上利用定位改变top的方法，但扩展性不好，于是使用transform来实现。所以在这定义两个盒子 first-marquee ，second-marquee。其他的是我所做项目的这个table代码可以自行替换掉。1.循环轮播一般都有两个盒子，在一个盒子达到位置后立马回到初始位置替代第二个盒子的位置，3.这样一个向下无线循环滚动的功能就完成了。2.后面是css代码。
2023-07-17 16:28:47
1641
3
原创 自定义uni-app图片预览组件
图片预览组件在uni-app官网uni-previewImage实现的但是感觉他的这个满足不了自己的需求，就自己写了个。1.定义公共组件cu-previewImg.vue。2.直接在想要展示的位置引用该组件就Ok了。
2023-07-17 16:08:09
1033
2
原创 前端对数据进行分页查询处理
由于数据特殊，后端做不了分页查询功能，只能由前端对数据进行分页，查询，排序，处理数据。3.修改数据根据row所传id来改变data数据的相应的值。这边的查询时名称和类型查询，然后分页用的ivew分页。1.将数据使用计算属性computed()进行处理。2.将计算属性渲染到table表格中。这样子一个前端分页查询的数据就写好了。
2023-07-06 10:43:40
461
1
原创 Vue3图片懒加载
1.2引入useIntersectionObserver //响应式监听目标元素的可见性。1.4 在需要懒加载图片的img元素上引用。1.3在main.js注册全局方法。实现图片进入视图窗口加载图片。1.1安装vueuse插件。1.利用vueuse插件。
2023-05-26 09:47:31
411
1
原创 利用原生css写一个走马灯效果的公共组件
写一个数据看板时，由于字符长度过大导致无法全部展示，与产品讨论后决定采用走马灯效果展示数据，使用iview中的carousel组件发现放在终端屏上会卡顿，于是使用原生的css来进行编写。2.利用props定义父组件可自定义的内容。3.编写css内容修饰样式，设置轮播效果。1.定义走马灯的html结构。
2023-05-10 11:03:32
285
原创 input框名称校验防抖，且去除异步时出现的加载环
遇到一个input名称效验的功能，于是想起了之前注册账号的时候会默认提示该名称已存在，于是想复现这个功能。5.发现异步触发input框后面会显示加载环，感觉影响用户体验，于是找到加载环的class类名将其隐藏。1.首先定义一个带返回的节流函数，该函数可以写在页面中，如果复用的比较多的话也可以封装成全局方法。2.将判断名称是否重复的方法封装以下，校验规则通过callback返回值来判定表单效验规则。6.就此一个input框名称校验防抖，且去除异步时出现的加载环的效果就出来了。
2023-05-10 10:32:58
183
2
原创 手写深拷贝
/ 需要首先判断传入的对象是否为一个数组。// 对常见的“非”值，直接返回原来值。//检测一个对象是否含有特定的自身属性。//原始类型直接返回。2. 手写实现深拷贝。
2023-05-04 16:51:36
83
原创 节流，防抖
理解：在函数中加了一个节流阀，当函数执行时节流阀关上，就不能再调用该函数了。函数执行完毕就打开节流阀，让函数能继续调用。应用场景：1.多级联动导航栏 2.search搜索时，用户在不断输入值时，用防抖来节约请求资源。理解：一个方法在规定的时间内只能调用一次，如果在调用时间内又触发了，则会重新调用。应用场景：1.鼠标不断点击触发，2.某些反应比较慢的接口防止用户二次提交。
2023-05-04 14:07:03
42
原创 利用递归函数判断多维数组中的数据
因为产品提了这么个需求，需要根据权限判断用户是否跳转，于是就想到了封装一个判断多维数组返回true或false的函数。利用some函数判断跳转时输入的录用名称是否与路由中的路由名称相等。利用 || 符号判断路由是否有子路由再去递归判断。
2023-04-23 09:45:33
73
1
原创 数据类型判断方法
2.instanceof只能判断复杂数据类型且只能返回true和false。1.typeof 方法只能判断变量的基本类型。因为业务需要所以需要写一个通用的数据类型判断。
2023-04-18 16:33:54
39
1
原创 uni-app中v-model绑定后使用@input或者@blur后无法反显
uni-app中v-model绑定后使用@input或者@blur后无法反显
2023-02-09 19:50:23
960
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人