- 博客(187)
- 资源 (12)
- 问答 (2)
- 收藏
- 关注
RSS订阅
原创 vue实现审批流
审批流在工作成是很常见的一个功能模块,下面是一个审批流的基本样子,我们怎么用代码实现呢,我选择用vue来写的,1.首先可以将下图拆分成多个模块条件节点模块,操作节点模块,结束模块,分支模块等,2.每一层都可以添加条件模块,且条件模块是一样的,所以此处是需要递归实现的我的模块拆分如下目录:代码结构如下:完整案例展示戳这里....................................
2022-06-14 09:22:02
17953
28
原创 前端常用的一些代码段
文章目录判断多个时间区间是否有交叉A追逐B(点A向点B靠近)获取随机数区间角度b趋向角度a简单的碰撞检测el中是否包含classname判断el上有没有className,有的话就移除，没有的话就添加上xpath获取单个elementxPath获取element集合父节点parent中是否存在子节点 child隐藏element获取一个元素内的所有图像添加一个元素的事件侦听器移除一个元素的事件侦听器在给定元素上触发特定事件，且可选传递自定义数据确认指定元素是否在视口可见获取当前页面的滚动位置平滑滚动到页面顶
2021-06-19 16:10:33
1033
原创 ng-tv-focusable
文章目录简介下载动图项目中使用1.设置元素可获取焦点2.设置焦点的样式3.指定焦点移到到某一个元素上4.自定义焦点移动其它1.提一下初始化2.局部滚动（setScrollEl/resetScrollEl）3.监听焦点状态4.重置单个配置5.清除所有配置并恢复到默认配置6.所有可配置项案例源码请戳这里简介tv-focusable 是适用于在 TV 端进行网页开发时管理焦点移动的框架，以简洁的 Api 让前端网页开发就像 android 开发一样自动管理焦点。下载npm i ng-tv-focusabl
2020-11-02 13:01:21
1660
8
原创 react-tv-focusable
文章目录简介安装使用方法使用说明,react-tv-focusable一共有以下几个方法;initgetElementByPath(string)requestFocus(el, isAnimation);setScrollEl(el) / resetScrollEl();reset自定义事件注意事项1.需要等到页面渲染完,才能获取到element2. $tv.resetXXX();所有可配置项案例源码请戳这里简介react-tv-focusable 是适用于在 TV 端进行网页开发时管理焦点移动的框架
2020-11-02 10:54:55
2164
14
原创 vue-tv-focusable
文章目录简介下载使用1.设置元素可获取焦点2.设置焦点的样式3.指定焦点移到到某一个元素上4.自定义焦点移动其它1.提一下初始化2.监听焦点状态简介tv-focusable 是适用于在 TV 端进行网页开发时管理焦点移动的框架，以最简洁的 Api 让前端网页开发就像 android 开发一样自动管理焦点。下载npm i tv-focusable使用1.设置元素可获取焦点<div v-focusable>可获取焦点的元素</div><div>不可获取焦点的
2020-10-13 09:20:54
10943
84
原创 跨页面进行数据通讯
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
2024-09-02 17:34:07
566
原创 前端Worker 的应用
Web Workers 是一种允许在后台线程中运行脚本的技术，这样可以将计算密集型任务从主线程分离出去，从而避免阻塞 UI 并提高页面的响应性。Web Workers 使得 Web 应用程序能够执行长时间运行的任务，而不会影响用户界面的性能。
2024-09-02 16:18:11
674
原创 记录：vite打包报错 error during build: Error: Parse error @:1:1
网上搜索了下，没找到解决方案，找了个梯子去外面查了一圈，有人也遇到了类似的问题，打包的时候遇到import.meta.env会崩溃，于是，将页面中的打印的 “import.meta.env”相关代码去掉，再次打包就没问题了，虽然不知道为什么，但确实没问题可以了。但是打包就会报如下错误：error during build: Error: Parse error @:1:1。一直以为是vant的问题，各种升级，替换插件，发现没什么用，vant从3升级到4后，本地运行没问题，
2024-07-29 11:18:26
604
原创 deveco studio 打开官方案例，不显示运行按钮。
注意： 如果再运行的过程中有提示，Run ‘sync’,和“ Switch to @ohos/hvigor-ohos-plugin 2.4.2(which will install @ohos/hvigor 2.4.2) and import the project again.”的话，点一下。最终就可以看到图5中的运行按钮，此时点击按钮运行项目，就可以运行成了。此时会发现，运行按钮是灰色的，接下来进行如下配置，如下图。就拿官方的search举例好了。然后再次运行项目就可以了。
2024-05-14 10:05:43
752
原创 element-plus blur和select冲突失效导致移除焦点清空文本框内容失效解决方案
需求是做一个查询企业的功能，期望必须进行选择后进行查询，如果用户自主输入并没有进行选择，失去焦点的时候清空文本框里面的内容，给el-autocomplete添加@blur事件后发现，在下拉没有出现之前快速失去焦点才能触发blur，下拉列表出现后，blur就失效了，这样就很难达到失去校验清空内容。el-autocomplete添加chagne事件，每当文本框里面的内容改变了就清空v-model绑定的变量，代码如下。
2024-04-10 18:10:27
668
原创 Sora-探索AI在前端开发中的无限可能
Sora是一个由OpenAI发布的人工智能文生视频大模型，可以创建逼真视频。与传统的视频生成技术相比，Sora的独特之处在于其使用了深度学习技术，可以从头开始生成视频，而无需依赖现有的视频片段或图像。此外，Sora还具有强大的自适应能力，可以在不同的场景下产生高质量的视频内容。总之，随着人工智能技术的不断发展，AI在前端开发中的应用将会越来越广泛。作为一个人工智能文生视频大模型，Sora为前端开发带来了更多的可能性和创新。我们相信，在未来，Sora将继续发挥其优势，为前端开发带来更多的惊喜和机遇。
2024-02-26 15:43:55
604
原创 uni-app/vue封装车牌选择器
2.初始化的时候将input下的真是inputdom绑定keyup事件调用skipnext，并传入每一个input的index,同时绑定compositionstart和compositionend。3.对按键进行处理，如果当前文本框已经输入完成则跳转到下一个文本框，如果没有则停留在当前文本框，第一次输入的时候，前面的没有输入完成，则不可跳过前面的号码去输入后面的号码，当删除后则解除禁止。* ===== 使用场景 ======1.将每一个字符用文本框输入，代码如下。// 添加延迟，防止过快输入。
2023-12-27 16:31:05
1630
原创 echarts饼图扇形之间设置间距
查看文档以及网上查找，都是将边框颜色设置成和背景色一样，但是当背景是图片的时候就不适用了，试了很多方式都不理想，没办法只能从数据上下手了，最终效果如下图，思路：将list中的数据每一条后面插入一条数据，数量根据总量计算，颜色为透明，处理如下。以上为临时解决方案，如有更好的方法，可以一起交流下。// 插入一条新的颜色透明的数据用来占位。// 计算插入的数据的值。// 原始数据和颜色。
2023-12-19 17:29:40
4532
1
原创 web项目添加防调试
添加浏览器地址栏添加notdebugger=1，新建js文件debug-vconsole.js。可以打开调试页面，并且展示vconsole,去。效果如下请，没有添加notdebugger。
2023-12-01 15:53:30
286
原创 微信分享,wx.config参数设置
将这个链接生成二维码,用微信扫描打开后风险,才会显示名片,或者将这个网页挂载到公众号下面,通过公众号的菜单栏那里，进入过这个链接,然后再去分享,也会是名片。注意:复制粘贴的链接发送到微信,会是一串地址,从政地址点进去再次分享,还是一串网址,
2023-02-16 13:57:55
1554
原创 微信小程序获取昵称,头像
参考官方给出的方案是使用通过 form 中form-type 为submit 的button 组件收集用户输入的内容。尝试过绑定事件bind:change,在模拟器上可以获取到数据,但是在真机上不行,微信小程序wx.getUserProfile方法被。使用 头像昵称填写能力 开发。
2023-01-11 18:15:07
975
3
原创 微信小程序里面如何使用svg图片
首先准备一段svg代码如下:然后打开下面的网址,https://codepen.io/jakob-e/pen/doMoML将svg代码贴到下图中红线圈起来的位置,会自动转成base64,然后将base64代码部分复制下来放到浏览器里面打开,可以看到结果.最后在小程序里面使用,如下结果:
2022-12-07 17:26:27
4558
原创 hbuilderX检测不到夜神模拟器的解决方法
注意:如果\Nox\bin文件夹下没有adb.exe,将nox_adb.exe赋值一份改名为adb.exe.4.打开hbuilderX 文件=>运行=>运行到手机或模拟器运行到安卓App基座,出现如下图:点运行。注意：如果一直提示检测中,重启hbuilderX再次运行到安卓App基座.2.打开夜神模拟器,启动62001的模拟器。3.adbs文件夹下运行一下命令。
2022-10-31 14:50:17
2170
2
原创 threejs+shader绘制常用的图形
x轴渐变从圆点向右，由0到1，越来越不透明，vPosition.x的-1到0的部分，透明度按0处理。[-1,0]的部分相乘的结果和[0,1]相乘的结果是一样的，会得到对称的从两边到中间越来越透明，x*x得到x镜像叠加x*x==-x*-x；x相加，透明度超过1的,按1处理,所以范围只有x的一半。[0,1]透明度由0到1，超过1的透明度都按1处理。x+y的基础上范围缩小，透明度超过1的,按1处理。x*y的基础上范围缩小，透明度超过1的,按1处理。.................................
2022-07-19 21:34:52
4221
原创 threejs 着色器修改内置材质
想要修改内置材质需要在编译shader程序之前执行修改操作,我们用到material下的onBeforeCompile我们先将shader打印出来看下都有哪些内容,可以看到顶点着色器有以下内容接着去threejs源码里面看下begin_vertex对应的代码.如下:可以看出有定义transformed变量,我们可以对transformed进行更改,使用replace直接替换shader里面的部分代码,代码如下最终结果如下图, 平面像x轴移动了10个像素:......
2022-07-06 18:09:32
886
原创 gsap的简单用法
想像gsap.from()一个向后补间，您定义值应该从哪里开始，然后它动画到当前状态，这非常适合将对象动画到屏幕上，因为您可以按照您希望它们在结尾处看到的方式设置它们并且然后从其他地方动画。例如：可以控制的项可以查看文档ease:可调节曲线,查看运动轨迹同gsap.from()动画相反fromTo()gsap.fromTo()补间允许您定义动画的开始和结束值（与使用当前状态作为开始或结束的from()和to()补间相反）。这对于完全控制动画非常有用，尤其是当它与其他动画链接时effects:注册动
2022-06-24 16:30:18
4383
原创 vue,移动端滚动条触底加载更多
文章目录配置参数核心滚动源码配置参数const scrollProps = { threshold: { default: 0, type: Number }, hasMore: { default: false, type: Boolean }, loadMoreFn: { default: () => { }, type: Function }, el: { default: null, type: String },}参数说明:threshold:到达底部多少距离的时
2022-05-25 15:56:02
2559
原创 vscode 格式化时 配置代码换行的长度
首选项 => 设置=> 搜索 vetur点击在settings.josn中编辑代码如下:"vetur.format.defaultFormatter.html": "prettyhtml","vetur.format.defaultFormatterOptions": { "prettyhtml": { "printWidth": 800, "singleQuote": false, "wrapAttributes": false,
2022-05-07 11:40:53
9829
1
原创 Linux 部署node项目
如何安装linux虚拟机,可以看下这里安装ctrl+alt+t打开命令行工具并执行以下命令:方式一cd到bin目录 执行下面命令 【使用包里面的node运行npm模块安装n工具】./node npm install -g n再通过n工具安装系统环境的node./n v10.6.0安装系统环境的n工具（先前是在压缩包里面的）npm install -g n通过n命令切换node版本n安装指定node版本方式二先安装npm,通过 npm 安装工具 n 来管理 node 版本，升级
2022-03-25 17:25:49
3284
原创 react+ts+gulpjs将插件转成umd.js文件
目录搭建创建文件目录如下,编写好属于自己的插件,srcNavBar.txsindex.tsindex.lessgulpfile.jspackage.json思路:1.首先将ts/tsx转成es文件,顺便将文件中的.less路径改成.css2.less语法转css语法3.将所有的js/css文件打包成一个文件,暴露插件引用名称选择构建工具:gulp安装: npm install gulpts/tsx转成es文件使用插件 gulp-typescript、 gulp-babel、 @
2022-03-22 14:36:50
2194
原创 phaser
phaser常见的资源资源加载回调事件显示对象**Image****Sprite****Text****Graphics**常用显示对象属性Phaser中的显示对象容器组的创建Phaser如何渲染显示对象camerastate （类似vue中的router）state使用方式state实现多页面原理state生命周期与工作原理动画补间动画帧动画物理引擎Arcade常用方法碰撞检测P2常用方法大全Phaser.Game（游戏的核心）Phaser.GraphicsPhaser.WorldPhaser.Image
2022-03-03 21:03:32
720
原创 inquirerjs简介
这里写目录标题inquirerjs 是什么使用简单功能参数介绍方法inquirer.prompt(questions, answers) -> promiseinquirer.registerPrompt(name, prompt)inquirer.createPromptModule() -> prompt function案例普通用法多次输入 input校验 validate数字 number密码 password确认confirm选项组 list /rawlist/expand多选 che
2022-02-24 18:26:34
3280
1
原创 vue3.x+vuex 后台系统设置按钮权限
vuex，设置storeimport { createStore } from 'vuex'export default createStore({ state: { buttonPermission: { add: true, edit: false, delete: true } }, mutations: { }, actions: { }, modules: { }})编写指令：import store from
2022-02-20 13:24:24
408
原创 Phaser3 之 this.add.sprite
文章目录spriteon(event, fn [, context]) 为给定事件添加侦听器。setDepth(value) 这个游戏对象在场景中的深度。(使用setDepth：不会出现生硬的对象重叠在一起)playAfterDelay(key, delay) 等待指定的延迟（以毫秒为单位），然后开始播放给定的动画。 当多个对象使用过一个动画的时候会出同时运动同时停止的情况，使用playAfterDelay可以设置延时playReverse(key [, ignoreIfPlaying])
2022-01-20 14:42:57
2225
TA创建的收藏夹 TA关注的收藏夹
TA关注的人