- 博客(45)
- 收藏
- 关注
RSS订阅原创 vue3使用quill富文本编辑器(附踩坑解决)
这个富文本编辑器有可能watch监听中找不到ref，如果不能正常使用可以稍微改装下在onMounted里赋值然后在setValue里抛出就好。先封装组件，建立如下目录。本文是封装成组件使用。
2024-10-18 16:48:31
3655
2
原创 vue element ui 使用el-cascader实现城市选择
TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105。CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市。provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
2024-08-15 17:21:58
522
2
原创 学习 canvas 的 globalCompositeOperation 刮刮卡
globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。源图像 = 您打算放置到画布上的绘图。目标图像 = 您已经放置在画布上的绘图。这个属性用来设置要在绘制新形状时应用的合成操作的类型，比如在一个蓝色的矩形上画一个红色的圆形，是红色在上显示，还是蓝色在上显示，重叠的部分显示还是不显示，不重叠的部分又怎么显示，等一些情况，在面对这些情况的时候，就是属性起作用的时候了。在取默认值的情况下，都是显示的，新画的图形会覆盖原来的图形。
2024-07-19 10:37:28
1597
原创 Vue3 + TS中利用 canvas 创建绘画画板==＞签名板、画笔、矩形 并转为base64图片下载
canvas的getContext()方法，返回的就是CanvasRenderingContext2D对象。注意：canvas不能用css单独设置width和height，原因自己查阅资料。（3）onMounted钩子函数中，获取 canvas 操作的接口。（1）绘画板一定会用到鼠标点击、移动等事件，所以先定义事件。（4）选择画笔（在选择前需要清空之前的数据）（5）定义获取鼠标当前位置的函数。对应的是 鼠标弹起事件。对应的是 鼠标按下事件。对应的是 鼠标移动事件。
2024-07-18 10:21:59
610
原创 web实现酷炫的canvas粒子动画背景
粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现，我们经常用来用作网站的动画背景。今天介绍两个个可以轻松创建高度可定制的粒子动画库。
2024-06-24 17:30:48
1209
原创 Nodejs运行vue项目时，报错：Error: error:0308010C:digital envelope routines::unsupported
经过探索，发现问题所在，主要是nodeJs V17版本发布了OpenSSL3.0对算法和秘钥大小增加了更为严格的限制，导致了nodeJs V17之前版本不受影刺而nodeJs V17和之后的版本会出现这个错误。也就是npm升级导致了与OpenSSL不兼容导致的初始化失败，也就是nodeJs版本过高的原因导致了运行失败。系统安装的nodeJs版本正好是V18，因此出现了这个错误系统。
2024-03-22 17:14:23
1388
1
原创 canvas绘制心形动态图片
同理，心形里插入的图片也是倒着的，简单的方法是可以先将图片提前旋转180度后导入到文件，使用时刚好再反过来为正常的。注意：该公式绘制的的心形是倒着的，需要将y轴坐标取反，即可得到正着的心形。用javaScript结合canvas用图片绘制动态心形。（t为x轴与y轴的角度）
2024-03-04 11:31:16
282
原创 vue2：＜圆形旋转菜单栏效果＞
可以通过更改data值和注释我标注的css样式处部分，就可以实现全圆的效果😄(全圆的时候会有个临界值问题，目前还没有解决，解决的话最后就不会有那种快速旋转一圈回到最开始的问题了~~~我是感觉不太舒服😭)大佬写的效果可比我的强多了，但是无从下手，所以就自己琢磨怎么写了，只能说效果勉强差不多。大家不一定非要制成菜单栏，可以看下人家的华丽效果😝，参考地址。
2024-01-26 17:36:18
1746
3
原创 canvas：如何在html5中的canvas绘制文本自动换行？
在固宽的 canvas 中，字数过多的时候，并不会自动换行，我们可以增加 canvas 本身的宽度，但这不是解决问题的根本方法。还记得之前介绍 canvas 基本 api 的时候，有一个函数，这个函数可以测量字体的宽高度，那就好办了，我们计算好我们字符串的长度加上一个大概的宽度，基本上可以处理这种换行的问题了。，保存开始截取的最后的索引，当循环变量 i 为最后一个字符的时候，直接绘制剩余部分。，如果大于 canvas 的宽度，就截取这部分进行绘制，然后重置。
2024-01-26 16:33:17
2264
原创 tween.js+three.js： 使用文档 --- Three.js
目的：将model模型的位置，从原来的(0,0,0)位置，经过1s移动到(20,50,30)的位置。模式一：// 1 设置动画const action=new TWEEN.Tween({x:0,y:0,z:0}) // 初始值.to({x:20,y:50,z:30},1000) // 目标值，毫秒数// 在动画执行期，不断被调用。其中obj为"to"里面的内容// x:20}).start()// 2 启动动画// 更新动画。
2024-01-24 15:54:37
1380
原创 vue2 ：js动画库
它是一个非常简单和小型的 Vue.js 组件，用于 Vue.js 应用程序的动画输入，它还用于约 400 字节的 JavaScript动画输入。由于这个库是相当新的，而且每个月都会发布更新的版本，因此建议仅使用这个库来为你的个人项目尝试一些新的东西。是 Vue.js 一个组件，用于应用平滑的垂直数字过渡效果，一个非常平滑和轻量级的库，可用于快速构建的个人前端项目。是Vue.js一个视差指令，它对应用程序中的图像应用可定制的视差滚动效果，它可以为平移和背景位置设置动画。
2024-01-23 09:52:33
1263
原创 vue2 ： 事件修饰符 / 按键修饰符 的使用
将vue组件转换为一个普通的HTML标签,如果该修饰符用在普通html标签上是不起任何作用的1.prevent:阻止默认事件(常用)
2024-01-22 15:44:07
1468
原创 vue2：封装全局防抖和节流函数
防抖和节流是两种常见的优化技术，用于控制事件的触发频率，以提高性能和用户体验。防抖它限制一个函数在连续触发事件后，只执行一次。当事件被触发时，防抖函数会设置一个定时器。如果在指定的时间内再次触发事件，定时器会被清除并重新设置。只有当事件停止触发一段时间后，定时器才会执行相应的函数。防抖常用于处理在用户频繁操作时的回调函数，例如在输入框输入时触发搜索操作。通过防抖，可以减少不必要的函数调用，提高性能。节流它控制函数在一段时间内的触发频率。
2024-01-22 10:31:22
1225
原创 vue3：Dplayer 使用
Dplayer是一款上手简单，功能强大的HTML5视频播放器，我们可以使用它，快速在普通HTML、Vue、React中实现视频播放的功能需求。Dplayer同时也提供了目前各大视频站都在使用的弹幕功能，让我们的视频功能更加丰富有趣。下面小千分享如何使用Dplayer在Vue3中实现视频播放及弹幕功能。
2024-01-13 11:30:42
4733
原创 vue2：使用 vue-dplayer视频播放器
在VUE中使用 vue-dplayervue-dplayer是DPlayer的vue版 支持弹幕,字幕,截图等功能。
2023-12-02 15:13:09
1877
原创 vue2：swiper vue-awesome-swiper的使用方法(细节版)
【代码】vue中swiper vue-awesome-swiper的使用方法(细节版)
2023-12-02 11:16:32
7557
原创 服务器+node+vue2：实现文件服务端上传直传七牛云服务器
引入获取上传凭证的接口 import { getQniuToken } from ‘@/api/user’引入sdk import * as qiniu from ‘qiniu-js’安装七牛云sdk cnpm i qiniu-js --save。
2023-11-28 15:58:37
714
原创 vue2： 横行滚动
methods://滑动鼠标滚轮实现横向滚动.navHistory //父盒子//清除滚动条.gzparkNav //子盒子
2023-11-04 10:16:28
621
原创 项目地址 移动端Vue模板 css ui网站
https://uiverse.io/radio-buttons?page=0https://github.com/66Web/ljq_elemehttps://github.com/caosiwei97/vue-shophttps://blog.youkuaiyun.com/weixin_42429672/article/details/103536128?spm=1001.2014.3001.5506
2023-10-12 16:43:32
136
原创 vue2： Router报错经验--Uncaught (in promise) Error: Navigation cancelled from“/mall“to “/home“ with a new
这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。push和replace 都会导致这个情况的发生。
2023-08-23 11:05:39
1296
1
原创 babylonjs： 设置材料颜色 及 自发光，环境光，散射光，镜面光
BABYLON.Color3颜色使用Web上的十六进制颜色，我们在BABYLON中一般都用BABYLON.Color3表示颜色，它有三个参数示例如下：表示rgb(255, 0,255)，其中它的参数表示百分比。在Web中我们也常使用 #FF00FF来表示它。下面代码示例是使用十六进制的#FFFFFF这样的字符串。
2023-07-06 10:35:05
1729
1
原创 three.js： 点击交互事件 含解决点击的物体与看到的不一致问题（非全屏/多边形偏移）
在 three.js 中，可以通过添加事件监听器来实现点击交互事件。
2023-07-04 10:49:02
3611
3
原创 vue2：引入lottie.js加载AE动画
首屏页面显示中，经常会引入炫酷的动态效果，实现的方法是基于PS引入AE导出的lottie.js，结合data.json实现。
2023-06-16 10:48:54
828
原创 vue2：学习Vue过程中遇到的问题---code: ‘MODULE_NOT_FOUND‘
步骤为：第一步（仅第一次执行）：全局安装@vue/cli。第二步：切换到你要创建项目的目录，然后使用命令创建项目第三步：启动项目备注：如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry。
2023-06-16 10:20:28
12686
4
原创 vue2： 外接html页面 iframe 使用
contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档，可以通过所有标准的 DOM 方法来处理被返回的对象。
2023-06-16 10:13:23
4189
原创 vue2：vue2__ref ($refs) 用法详解
如果ref 是循环出来的，有多个重名，那么ref值会是一个数组 ，此时要拿到单个ref 只需要循环就可以。mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。链接：https://juejin.cn/post/7220448609400307772。ref 需要在dom渲染完成后应用，在使用时确保dom已经渲染完成。商业转载请联系作者获得授权，非商业转载请注明出处。作者：NoSilverBullet。
2023-06-16 10:08:22
5861
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人