- 博客(90)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 vue_cli知识点个人总结--链接
vue_cli封装axiosvue_cli插槽slotvue_cli缓存webStoragevue_cli过滤器vue_cli自定义指令vue_cli路由传参vue_cli组件通信
2021-05-05 00:27:35
230
4
原创 vue2+elementUi的两个el-date-picker日期组件进行联动
【代码】vue2+elementUi的两个el-date-picker日期组件进行联动。
2024-04-01 17:19:46
392
原创 vue实现代码编辑器,无坑使用CodeMirror
坑：本打算cv一下网上的，结果发现网上的博客教程都是错的，而且博客已经是几年前的了，我重新看了github上的，发现安装的命令都已经不一样了。我目前使用CodeMirror 5，最新版是CodeMirror 6了(更适合移动设备、更易于访问、设计更好并且维护更积极)官方地址官方文档地址√正确的安装npm install codemirror@5×错误的安装npm install codemirror。
2024-01-06 20:54:23
865
3
原创 vue自定义指令实现按钮只允许点击一次
vue自定义指令实现按钮只允许点击一次这个例子中创建了一个名为 click-once 的自定义指令，通过 bind 钩子函数给元素绑定了一个点击事件，并且利用一个变量 clicked 控制了按钮只能点击一次的行为。在点击后会执行传入指令的方法，并在一定时间后（这里是 1 秒）重新允许点击。记得将代码中的 handleClick 方法替换成你想要执行的实际操作。// 在你的 Vue 文件中
2023-12-05 11:05:42
638
原创 ResizeObserver观察元素宽度的变化
ResizeObserver 构造函数创建一个新的 ResizeObserver 对象，它可以用于监听 Element 内容盒或边框盒或者 SVGElement 边界尺寸的大小。
2023-11-20 16:39:27
152
原创 重组件的优化和页面渲染十万条数据
以下代码原理是使用requestAnimationFrame(callback) 方法。通过这张图来表示虚拟列表，红框代表你的手机，黑条代表一条条数据。优点：页面上只渲染出可视区域的内容，非常丝滑，无白屏现象。结果：这里为了录制gif不卡顿，只渲染50个重组件。结果：这里为了录制gif不卡顿，只渲染一万条。优点: 首屏渲染很快，后续的再依次加载。缺点: 快速滚动时，会出现短暂的白屏。子组件HeavyComp.vue。子组件HeavyCom.vue。的方式截取相应的数据就可以了。在Test02.vue。
2023-10-23 11:19:40
103
原创 AbortController中止请求通信[模糊搜索案例]
该示例应该渲染的结果是包含1234的模糊搜索，但是结果却是123和1234。问题：由于请求的响应的时间不同，所以快速改变输入框的值会导致界面渲染错误。如果之前的请求响应很快，在下一次请求之前就已经响应了呢，结果会渲染错吗？该案例的中止请求可以用于很多地方，比如取消上传/下载文件等。解决：如果之前的请求还没有响应成功，那么就中止之前的请求。解决之后的运行结果，可以看到之前的请求已经被取消了。答案是，当然不会，因为最后的请求结果会覆盖之前的结果。解决的代码： 很简单，打开注释掉的 3 行代码即可。
2023-10-17 15:06:57
346
原创 vue里el-form+el-table实现验证规则的写法
vue里el-form+el-table实现验证规则的写法，重点是因为使用el-form + el-table与单独使用el-form时数据不同，前者是对象+json数组，后者是对象，导致了el-form-item绑定prop时的写法不同
2023-09-04 17:04:11
745
原创 git提交代码报styleLint错误的3种解决方案
删 xxx项目 / .git / hooks 里面的pre-commit文件。这个文件提交git的时候会做一道检查，把删了就不检查了。在webstorm里commit代码时，设置取消勾选Run Git Hooks。在webstorm里取消Stylelint检查。
2023-07-20 11:06:12
1112
原创 el-table找出当前单元格与对应的上下列的值
如果当前name值与上一条数据的name值 或者 下一条数据的name值 不相等，就设置红色边框。结果，第4行没有边框是因为它对应的上一个单元格和下一个单元格的值都是一样的。以下是示例代码，对tableData数据的name字段进行处理。
2023-07-19 20:14:49
1279
原创 echarts里type为custom，自定义配置renderItem为柱状形状
echarts里type为custom，自定义配置renderItem为柱状形状echarts里type为custom，自定义配置renderItem为柱状形状echarts里type为custom，自定义配置renderItem为柱状形状主要功能：文本超过柱状形状就隐藏否则就显示，移入每一个柱状显示tooltip。<!DOCTYPE html><html lang=""><head> <title>ECharts Custom Rend
2023-06-14 17:42:24
1705
原创 JavaScript的json数组去重、删重
JavaScript两个json数组删重(使用map+filter)JavaScript一个json数组去重(使用filter)JavaScript一个json数组去重(使用reduce)JavaScript找出两个Json数组相同的属性和值(使用reduce)JavaScript对象变json数组
2023-04-25 17:20:59
1124
原创 vue中使用el-tooltip实现超出部分显示省略号且移入显示el-tooltip内容
vue中使用el-tooltip实现超出部分显示省略号且移入显示el-tooltip内容
2023-03-16 16:17:53
1274
2
原创 vue横向滚动条通过鼠标滚动控制
vue横向滚动条通过鼠标滚动控制vue横向滚动条通过鼠标滚动控制vue横向滚动条通过鼠标滚动控制<template> <ul class="scrollX"> <li v-for="(item, i) in 20">{{item}}</li> </ul></template><script>export default { name: "Test01", methods: { //
2022-05-19 14:47:06
2273
2
原创 JavaScript的常用工具方法大全【持续更新中...】
JavaScript的常用工具类大全【持续更新中...】JavaScript的常用工具类1(校验邮箱格式、校验手机格式、校验身份证号、截取字段长度、求和)JavaScript的常用工具类1(解决浮动运算、小数转成整数、检测数字是否越界、精确加减乘除法、四舍五入)JavaScript的常用工具类1(校验邮箱格式、校验手机格式、校验身份证号、截取字段长度、求和)//校验邮箱格式function checkEmail(email) { return RegExp(/^([a-zA-Z0-9]+[_|\_|
2022-05-11 10:18:05
375
原创 vue使用vant页面案例(左边下拉右边搜索、下拉和文本组件的样式、选中和删除标签)
vue使用vant页面案例--左边下拉右边搜索、下拉和文本组件的样式、选中和删除标签vue使用vant页面案例(左边下拉右边搜索、下拉和文本组件的样式、选中和删除标签)vue使用vant页面案例(左边下拉右边搜索、下拉和文本组件的样式、选中和删除标签)效果图左边下拉右边搜索下拉和文本组件的样式选中和删除标签<template> <div class="Video"> <van-nav-bar title="场站管理" fixed pla
2022-03-28 16:20:32
3149
2
原创 vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)
vue实现高德地图模糊搜索+筛选条件+定位+信息窗vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)先npm安装高德地图npm i @amap/amap-jsapi-loader --save<template> <div class="StationMap"> <van-nav-bar title="场站地图" fixed placeholder safe-area-inset-
2022-03-28 16:00:59
3438
5
原创 vue实现模糊搜索
vue实现模糊搜索案例<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div id="app"> <input type="text" v-model='search' />
2022-03-25 16:22:29
5880
原创 JavaScript下载后端返回的文件流
JavaScript下载后端返回的文件流/* 创建一个js写以下代码 */import axios from 'axios';/*先安装： npm install js-file-downloadmain.js引入 import fileDownload from 'js-file-download';* *//** url: 请求接口地址* fileName: 文件名，例如: ccc.p
2022-01-24 14:25:13
3515
原创 CSS的flex常用布局
CSS的flex常用布局CSS的flex左边固定右边自适应例子CSS的flex左边固定右边自适应例子CSS的flex两边固定中间自适应例子CSS的flex上下固定中间自适应例子CSS的flex单行省略号CSS的flex多行省略号
2022-01-17 10:38:59
545
原创 CSS的图片设置两端渐变
CSS的图片设置两端渐变CSS的图片设置两端渐变CSS的图片设置两端渐变<html> <div class="bg-old">原图</div> <div class="bg-new">效果图</div></html><style> .bg-old{ width: 500px; height: 50px; margin-top: 20px; background: url("/imgs/2
2022-01-07 15:27:09
935
原创 JavaScript的佛祖保佑
JavaScript的佛祖保佑JavaScript的佛祖保佑JavaScript的佛祖保佑console.log([ " _ooOoo_", " o8888888o", " 88\" . \"88", " (| -_- |)", " O\\ = /O", "
2022-01-04 14:05:39
415
原创 JavaScript的弹窗
JavaScript的弹窗JavaScript的弹窗JavaScript的弹窗<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
2021-12-24 14:57:00
113
原创 JavaScript的toast
JavaScript的toastJavaScript的toastJavaScript的toast<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-sc
2021-12-24 14:47:15
1061
原创 JavaScript实现进制相互转换
JavaScript的16进制转10进制JavaScript的16进制转10进制JavaScript的16进制转10进制<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0
2021-12-24 14:32:56
10333
5
原创 JavaScript动态创建元素
JavaScript动态创建元素JavaScript动态创建元素JavaScript动态创建元素<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, m
2021-12-24 14:26:15
188
vue_cli.zip
2021-05-06
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人