![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
文章平均质量分 61
小萌新的采坑之路
月下脆竹書閣
这个作者很懒,什么都没留下…
展开
-
axios封装 手动取消接口请求
axios 手动取消接口请求原创 2024-05-15 09:51:51 · 336 阅读 · 1 评论 -
前端自定义导出excel内容(xlsx插件用法)
【代码】前端自定义导出excel内容(xlsx插件用法)原创 2024-04-01 09:53:34 · 734 阅读 · 0 评论 -
echarts点击某一行显示菜单
echarts 菜单点击事件原创 2024-04-01 09:44:11 · 224 阅读 · 0 评论 -
SVG标签内容转base64
echarts 图表是用svg渲染的,所以需要获取svg标签的内容即可。原创 2024-04-01 08:52:42 · 274 阅读 · 0 评论 -
echarts 图表/SVG 图片指定位置截取
需求:如下图所示,需要固定头部legend信息。原创 2024-03-30 17:34:07 · 400 阅读 · 1 评论 -
js 拼接HTML时 onclick方法和传参报错[onject Object] 和 unexpected end of input`
2.页面刚进去 注册点击函数(3.js 中 写点击函数内容。原创 2024-03-30 11:11:37 · 498 阅读 · 0 评论 -
VUE2+THREE.JS 销毁,防止越来越卡顿
将场景相关的参数重置,防止页面卡顿原创 2023-12-04 16:56:30 · 1192 阅读 · 0 评论 -
VUE2+THREE.JS 按照行动轨迹移动人物模型并相机视角跟随人物
人物按照上一篇博客所设定的关键点位置,匀速移动。原创 2023-12-04 15:56:12 · 1090 阅读 · 0 评论 -
VUE2+THREE.JS 设定巡航行动轨迹
我们写3D时,常常会有按照一定轨迹去浏览模型,所以,我们要先确认行动轨迹,渲染出行动轨迹以后,再让人物按照行动轨迹去移动。原创 2023-12-04 15:02:53 · 1060 阅读 · 1 评论 -
VUE+THREE.JS 点击模型相机缓入查看模型相关信息
引入模型所要呈现的3DSprite精灵模型,优势在于可以随着视野的变化,跟随方向变化,大小是近大远小的模式。所以:设定最小的距离和最大的距离,当模型相对于相机距离远,就设定缩放因子为0.8,也不能将缩放因子固定,因为当相近模型点击时,弹框会越来越近,直至占满整个屏幕,由于我这里是一个弹框,我希望他能够点击关闭,所以多加了个关闭事件。模型相对相机距离近,就设定缩放因子为0,表示不缩放。必须要写这个 要不然会导致模型无法推拽移动。,使其稍远一点,默认是1。原创 2023-12-01 09:40:28 · 718 阅读 · 4 评论 -
VUE2+THREE.JS 模型上方显示信息框/标签(CSS3DSprite精灵模型)
CSS3DSprite精灵模型面向摄像机,场景缩放时,缩小放大跟随着,会被模型遮挡,可以被射线拾取。CSS3DRenderer用于通过CSS3的transform属性, 将层级的3D变换应用到DOM元素上。如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换,那么这一渲染器十分有趣。同时,它也可以将DOM元素与WebGL的内容相结合。在添加标注前需要先给模型命名。原创 2023-11-30 17:11:50 · 2093 阅读 · 7 评论 -
VUE2+THREE.JS点击事件
THREE.JS点击事件原创 2023-11-30 16:32:56 · 567 阅读 · 0 评论 -
VUE2+THREE.JS辉光设定和解决辉光导致背景变暗的问题
给我的设计好的fbx模型,已经设定好了模型发光材质,所以直接添加辉光效果,就可以自动发光。animate方法中增加。原创 2023-11-30 16:12:03 · 768 阅读 · 0 评论 -
VUE2+THREE.JS项目搭建
three.js 是一个 是基于WebGL 封装的一个易于使用且轻量级的 3D 库,ThreeJS 对 WebGL 提供的接口进行了非常好的封装,简化了很多细节,大大降低了学习成本,同时也极大地提高了性能。用户不需要详细地学习 WebGL,就能轻松创作出三维图形,是前端开发者研发 3D WEB 应用的主要工具。原创 2023-11-30 15:05:15 · 1387 阅读 · 0 评论 -
THREE.JS 3D模型服务器报404问题(VUE fbx文件在本地能显示 服务器上不显示报404)
作为新手,新建立的threeJS模型,本地运行模型是可以显示的 ,但服务器模型却报404。原创 2023-09-22 13:34:24 · 880 阅读 · 0 评论 -
iview时间控件 动态不可选日期 可选择24小时范围内 时间往后退24小时
设定options2值disabledDate(date) 内部的,原创 2023-08-24 17:20:11 · 1071 阅读 · 0 评论 -
echarts 之 科技感进度条
/ 100% 处的颜色。// 设置条形图的边距。// 0% 处的颜色。原创 2023-08-23 16:28:30 · 1384 阅读 · 1 评论 -
什么是防抖和节流?有什么区别?如何实现?
防抖和节流的使用原创 2023-07-05 09:28:32 · 73 阅读 · 0 评论 -
monaco editor 代码高亮编辑器
monaco editor原创 2023-06-08 15:51:44 · 872 阅读 · 0 评论 -
echarts 图表导出PDF(带滚动条)/图片导出PDF
使用函数时,参数为当前DOM节点,返回值为true时会被忽略。:指定是否使用ForeignObject绘制,默认为false,使用ForeignObject可以支持复杂的CSS样式和布局,但是在一些浏览器中可能存在性能问题。:指定是否显示日志信息,默认为false,如果设置为true,则会在控制台输出日志信息。:指定截图的缩放比例,默认为1,可以设置为其他值来提高图像质量,但会导致截图时间增加。:指定截图的高度,如果不指定,则使用自动计算的高度。:指定截图的宽度,如果不指定,则使用自动计算的宽度。原创 2023-06-06 20:31:46 · 3051 阅读 · 5 评论 -
Vue iview Selece下拉框内部套用Radio 点选按钮(change阻止默认事件问题)
主要问题点:Select 和 Radio组件的均为change事件,如何阻止冒泡原创 2023-03-09 09:13:17 · 846 阅读 · 0 评论 -
数组去重的七种方法
数组去重的六种方法原创 2023-01-30 10:31:20 · 424 阅读 · 0 评论 -
封装WebSocket通讯
websocket 封装【同一页面,有多个websocket请求】2.父组件使用原创 2022-12-16 11:01:57 · 410 阅读 · 0 评论 -
Vue之iconfont
由于两个地方的iconfont.css文件中的字体命名都是"iconfont",而且样式命名也是相同的,导致问题的出现。:由于我是因为自己的iconfont的与luckysheet的iconfont冲突,所以我全局替换了。(如果没有项目,请先到 资源管理->我的项目->点击新建项目):新建/编辑iconfont项目时,如下红框所呈现的部分,【(font family ) (前缀)(图标名称)】5.将下载到本地的zip解压,复制到项目中。2.搜索想要的图标,加入购物车。2.将引入的图标 从。原创 2022-12-14 19:27:56 · 988 阅读 · 0 评论 -
CSS之display:grid的用法和动态:before content内容
CSS之display:grid的用法和动态:before content内容原创 2022-12-14 08:58:11 · 1959 阅读 · 0 评论 -
vue 动态组件 render/jsx
无法渲染组件,只能显示原生的dom,操作起来实在是不方便。查阅了之后,发现可以用render或者jsx实现【这个方法并不能触发,需要使用原生事件。(可能是因为这个组件中并没有click事件)分别是compiler(模板)模式和runtime模式(运行时)。可是如何自己实现双向绑定,我用的是组件,并不是像官网一样。中设定value时并没有赋初始值。后,就开始想如何进行数据双向绑定。(虽然不高级,但好用啊。原创 2022-11-23 20:35:58 · 1548 阅读 · 0 评论 -
在vue table中使用treeselect 下拉内容不显示问题
table外层时,他是可以显示成功的,但当在table内部时,就显示不成功了。原创 2022-11-23 19:42:04 · 3261 阅读 · 0 评论 -
酷炫效果 进度条
重要点记录:1.从粗到细的进度条(设定父div 的相对定位,利用三角形的思想,渲染此进度条)2.smtline 的css完整代码如下:原创 2022-11-10 14:46:18 · 9686 阅读 · 5 评论 -
Echarts之环形图 && 自定义title居中
因为我这里是多个环形图 所以 使用了动态绑定html。先上效果图 蓝色发光的环形圈 是背景图片。原创 2022-11-08 17:30:01 · 3587 阅读 · 0 评论 -
Vue之table2excel应用--前端表格导出
前端将后台传过来的数据,自定义去导出,不仅减少了再次去loading后台接口的时间,而且提高的用户体验度。但弊端是只能是当前表格所获取到的所有信息。后来发现可以自定义编辑【红色框起来的就是我自己写的,但水平与垂直居中还是没有生效…②.可以发现,excel的默认设定属性,将preserveColors(保存颜色) 改为true。2.添加到Vue项目中【public->新建文件夹table2excel->添加到此处】注意:我截图的这部分是对td属性的设定,还有关于对tr属性的设定,看源码即可分辨出来。原创 2022-10-27 20:00:05 · 2502 阅读 · 0 评论 -
Echarts之球形水波纹
【echarts-liquidfill@3兼容echarts@5、 echarts-liquidfill@2兼容echarts@4】1.展示图:【左侧即为水波图,右侧是想要展示的信息列】球形水波纹是比较与饼图展现方式 更灵动 更高级的一种。原创 2022-10-27 19:29:42 · 1675 阅读 · 2 评论 -
SPC后续之vue-awesome-swiper轮播图
vue-awesome-swiper轮播图原创 2022-10-24 10:31:13 · 443 阅读 · 0 评论 -
SPC后续之鼠标位置出现隐藏数据弹框
类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。IE事件中没有这2个属性。鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。用的是相对定位+绝对定位,所以 当多个折线图时,每个位置 都是一样的,无法满足我的需求。,点前两个还是可以的,当第三个折线图时,就会有错位的情况,原创 2022-10-24 10:02:51 · 160 阅读 · 0 评论 -
vue-cli3 css引入背景图片不显示问题
VUE-CLI3 css 背景图片不显示问题原创 2022-10-20 10:34:15 · 3002 阅读 · 0 评论 -
Vue 功能实现之①、一键复制 ②、ctrl+s保存等键盘监听事件 ③、每三个数字字符加一个逗号④、前端过滤集合⑤、指定顺序排序⑦数组指定位置截取⑧滚动条置顶⑨ 值位置整体切换⑩、搜索的文本高亮
所以要解决这个bug就是要做一个兼容写法,在安全域下使用 navigator.clipboard 提升效率,非安全域退回到 >同时 发生的时候,发现自己并没有监听执行内部的打印命令。逻辑概述:点击0索引值,将0值切换到1索引,依次往后推,末尾值到首位。本地测试是没有问题的,但更新到服务器的时候,却不生效。安全域包括本地访问与开启TLS安全认证的地址,如。,具体原因不知道,但换了拼接到的div就好了。,而没有定位到某一具体对象,所以带下标即可。的时候,就会监听执行。是不生效的,研究后发现。原创 2022-10-07 14:48:21 · 4302 阅读 · 0 评论 -
vue 项目挂载 刷新后报404
这是官网链接,说的很仔细了,为什么刷新后会报404解决方案链接hash模式和history模式的区别原创 2022-09-15 15:47:54 · 518 阅读 · 1 评论 -
iview table 滚动条到底部 及样式设定
iview table滚动条到底部原创 2022-08-30 11:23:49 · 887 阅读 · 0 评论 -
Vue表单校验与正则表达式
Vue表单校验与正则表达式原创 2022-08-29 19:26:37 · 1201 阅读 · 0 评论 -
Vue/JS 实现在Excel2003中,用A表示第一列,B表示第二列...Z表示第26列,AA表示第27列,AB表示第28列...依次列推。请写出一个函数, 输入用字母表示的列号编码,输出它是第几列
Vue/JS 实现在Excel2003中,用A表示第一列,B表示第二列...Z表示第26列,AA表示第27列,AB表示第28列...依次列推。请写出一个函数, 输入用字母表示的列号编码,输出它是第几列原创 2022-07-06 16:04:43 · 440 阅读 · 0 评论 -
使用G6和vue完成项目流程设定---G6实例
G6的增删改查节点<template> <el-dialog :title="flowId?'edit flow':'add flow'" :visible="showModal" class="sourceModal" :append-to-body="true" :fullscreen="true" @close="close"> <div id="flowBox"> <div class="flow-box-icon">原创 2021-10-11 14:18:27 · 1118 阅读 · 0 评论