- 博客(107)
- 收藏
- 关注
RSS订阅原创 基于Element Plus的vClickOutside点击其他的地方关闭弹窗，并且添加多个忽略DOM元素
ClickOutside,vClickOutside,忽略，
2024-06-27 11:01:07
2208
原创 Echarts横坐标时间轴，并缩放数据
本文中Echarts的版本为5.5.0首先说一下我们的项目背景，就是需要一个横坐标为的数据。折线分为数值类型和枚举类型，也就是说Y坐标为数值型或者枚举型的数据；然后数据的缩放是这样的，把请求到的数据，一次性的全部显示在折线中，并且需要支持鼠标滚轮和鼠标拖拽式，缩放查看局部的数据。效果如图所示：项目中的难点主要是三部分。1、查询的到的数据，比如查询的是今天的数据，但是今天的话，只有在10点和11点有数据，其他的时间没有数据；2、横坐标下面的显示的当前缩放完成之后的时间范围；
2024-04-10 11:50:31
5284
2
原创 el-input添加mousedown事件，并且在鼠标按下的时候取消全部选中
el-input;mousedown;setSelectionRange;取消文字全选
2023-12-26 14:18:44
501
原创 element-plus中select下拉框placement改变位置不生效
然后通过对里面的DOM元素的分析，看到了位置不正确，是因为下面的下拉框的内容的宽度大于了下拉框的宽度，造成了不能在下面显示。又因为我的下拉框是在页面的右侧，所以下拉框内容只能显示在了左侧。所以从element-plus的文档中找到了对应的属性：placement。默认的就是bottom-start，然后我改成bottom和bottom-end，发现都是不可以使用的。1、设置下拉框内容的宽度， 让他的宽度小于等于下拉框的宽度；下拉框中的选项是在下拉框的下面。下拉框中的选项在下拉框的左侧。
2023-07-28 10:32:54
3690
1
原创 页面中嵌套iframe导致页面出现滚动条
经过查询发现，是因为iframe元素不是标准的块级元素，导致虽然设置了height: calc(100% - 60px);然后通过控制台查看高度也确实没有问题。但是就是出现了滚动条，这样的话，就只能通过设置iframe为块级元素来确定了。如果大家想要自己测试一下的话，可以下载下面的代码，然后通过对29行中，display:block;的注释和非注释来看下具体的表现形式；页面头部一个固定的div元素，下面是一个iframe嵌套的页面。但是发现页面会出现滚动条。
2023-05-30 17:25:48
3562
原创 Vue中，iframe中的子网页，调用父网页的方法2
这里有我原来写的文章：Vue中，iframe中的子网页，调用父网页的方法，这里面写了， 父子页面的调用。但是今天写的时候，遇到了下面的报错；Uncaught DOMException: Blocked a frame with origin "http://192.168.1.190:5500" from accessing a cross-origin frame.阻止一个源为“...
2022-06-28 17:43:00
499
原创 ZRender文档研读
ZRender文档研读 (基于4.3.2版本)不使用最新的5.x.x的版本是因为线上文档和最新版本JS文件不匹配-2022年6月13日1、文档地址1、官方文档的地址：https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable2、Github地址：https://github.com/ecomfe/...
2022-06-24 09:52:00
320
原创 Vue中组件的递归
先来说下需求，就是一个表单，会有树形结构一样，会有子表单，表单显示什么内容是后台通过接口数据来确定的；这个时候就和树形结构一样，肯定会有子组件的递归；这次是自己第一次写递归，遇到了三个问题记录下；1、第一个问题就是，循环表单；看下图然后这里的数据返回的是这样的：说明下数据字段的含义：name属性算是表头，然后里面的valueType代表的是各种不同输入框；比方说上面的7代表的是普...
2022-03-07 14:28:00
200
原创 Vue RSA加密和解密
接到一个需求，需要对我们的密码进行加密，然后再传输。以前搞过，但是不是Vue中的。现在用Vue弄一遍，大致的思路是一样的。如果你还不了解什么是RSA的话，可以看看这个和这个。话不多说，首先是安装1 npm i jsencrypt -D2 npmiencryptlong-S //encryptlong是基于jsencrypt扩展的长文本分段加解密功能安装完成之后，需要创建一个rs...
2021-12-03 15:27:00
299
原创 table中的tbody高度超出部分，显示滚动条并固定表头
最近写一个表格，用的是原生table组件，然后发现一个问题，就是没法设置tbody的高度，请看下面的截图然后搜索之后发现，是需要设置外面的table的display属性为block。但是发现设置完成之后出现了这样的现象。就是所有的数据都挤在了一起之后添加过下面的属性之后，就恢复正常了。1 tbody tr,thead tr{2 widt...
2021-11-19 14:48:00
1344
原创 js 获取正整数各个位上的数字
1 function getDigitNumber(startNumber, endNumber) { 2 var reg = /^[1-9]\d*$/; 3 if (startNumber < endNumber && reg.test(startNumber) && reg.test(endNumber))...
2021-11-02 16:39:00
461
原创 关于时间常用的一些函数的封装
保存一些常用的时间函数的封装1、首先是时间格式化函数// 时间格式化函数 formatDate(new Date(),"yyyy-MM-dd hh:mm:ss");export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullY...
2021-08-16 10:05:00
128
原创 html2canvas 轮播保存每个图片内容
接到了一个任务，就是，我们的整个页面，是一个大的轮播，然后到了固定的时间，比方说晚上12点的时候，截取每个屏幕，然后发送邮件给指定的邮箱。当然了，发送邮件的这些操作，不用前端来关心，前端只需要把屏幕的当前页截图保存下来，然后发送给后台就行了。剩下的交给后台就行了。废话不多说，先说一下用到的插件，最主要的是当然是html2canvas.js了，这是一个把屏幕内容，绘制到canvas的一个插件。...
2021-05-17 13:57:00
178
原创 基于Element的下拉框，多选框的封装
Element是有自己的多选框的，但是，他的两种表现形式不是我们所想要的。所以，就以Element的下拉多选框为基础，封装了一个自己的多选框。废话不多说，直接上图1、增加一个全部的功能，然后让选择全部之后，上面的显示框中只显示“全部”两个字2、当显示不全的时候，显示省略号3、剩下的交互逻辑，就很简单了，点击，全部，让所有的全部选中，点击取消全部，让所有的取消选中直接来看我封...
2021-02-08 10:09:00
210
原创 FDD项目中的总结
1.element中的table组件，里面的方法的参数是通过载荷的方式添加进去的，不需要自己添加 1 <el-table 2 ref="thisTable" 3 v-loading="loading" 4 :data="tableData" 5 @selection-change="handleSelectionChange" ...
2020-11-27 15:49:00
76
原创 bootstrap模态窗字体模糊
大家可以看下，上面这幅图里面的文字是不是不太清楚呢，如果是真机的话，大家应该能更加清晰的看出来，确实有点模糊。如果看不出来，咱们对比另一张图下面的这副图看起来就清楚很多了。究其原因，是因为这个弹窗上面，我们用到了一个transform属性，而且我们是设置的百分数， 里面的文字解析可能造成不是正好的PX整数，造成了文字显示不清楚。最简单的办法就是给显示不清楚的，transform改成px单...
2020-10-22 11:42:00
154
原创 ECharts 常见的问题总结
以前也用过ECharts(不得不说，这真的是百度的良心产品)，但是都是一些简单的示例。这次因为工作的需要，做了很多图表，对ECharts有了更加深刻的理解，现在来总结一下。首先是ECharts的基础知识(本次是基于Echats的4.8.0版本)第一个肯定是新手经常遇到的问题，就是，我做的图表压根就没有显示。页面还是一片空白，这个时候，通常要检查元素。用来显示表格的div中，有没有canv...
2020-08-11 11:38:00
296
原创 es5中，一个在js中导入另一个js文件。
这个函数很简单，唯一值得注意的一点是，需要在导入完成之后，执行里面的回调函数。 1 // 导入js的函数 2 function loadJS(url, callback) { 3 var script = document.createElement('script'), 4 fn = callback || function () { }; 5 ...
2020-07-28 09:16:00
438
原创 移动端字体小于12号字的时候，line-height居中的问题
今天的一个偶然机会，看到了一个解决当在安卓移动端的时候，字体小于12号字的时候，line-height设置不能居中的问题。解决方案也很简单，就是在页面中的html标签中， 添加上lang属性，并且设置为'zh-cmn-hans' 请看下面的代码：1 <html lang="zh-cmn-hans">然后我自己测试了以下，确实可以。大家可以自己测试一下。不过需要注意的一点是...
2020-07-22 10:33:00
112
原创 vue 中vuex的最简单使用
首先我们要知道什么是vuex，请看官方的解释：“Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。” 是不是看完了也是...
2020-06-10 16:30:00
63
原创 Vue C3动画 vue2-animate
最近写vue的项目，需要添加一个动画，首先想到的就是jQuery中常用的第三方库，animate，但是这个不是能完全兼容的，需要自己做处理。然后就在晚上寻找Vue版本的动画库，然后就找到了这个vue2-animate。网上的教程还是不少的，然后demo能直接运行，但是他们有一点没有写的很明白，就是在添加enter-active-class或leave-active-class属性的时候。官方...
2020-06-02 10:49:00
455
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人