- 博客(1394)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 Promise.prototype.then().then()学习
文章目录一、问题描述二、介绍 Promise.prototype.then方法介绍then 中的回调函数 返回值三、解析代码一、问题描述最近审核一个同事的代码如下，感觉Promise.all()用法使用有点新奇，与我平时使用不一致，效果应该是没有问题的，不然测试就会测试出来// 防控圈切换场景，支持按防控圈，资源类型过滤统计queryResource (bClear) { const params = { } let _resCamera = [] let _resPolice =
2021-06-11 18:01:06
377
原创 14.webpack4.x eslint配置
文章目录文章参考安装在vue项目中，.vue文件中的 script标签内的代码，eslint 是无法识别的，这时就需要使用插件： eslint-plugin-html规定报错时输入的信息格式Javascript Standard Style (https://standardjs.com) 此处是js一些书写规范的标准集合，根据该集合我们可以配置eslint帮助我们检查代码规范eslint-plu...
2020-01-22 15:10:12
788
原创 Mock.mock( rurl, rtype, template )拦截ajax请求——帮助前端离线开发
文章目录问题描述文章参考快速开始安装Mockjs使用案例Mock.mock( rurl, rtype, template ) 函数介绍根据配置文件，异步加载mockjs 配置文件问题描述在工作中，想自己根据后台模拟的数据，保存到本地，在网络不通的情况下，同样的写ajax请求逻辑代码，不需要模拟ajax请求，获取本地的模拟的数据，能够正常测试和开发，如果有开发环境，可以一键切换到开发环境中，而不...
2020-01-17 17:02:15
1543
1
原创 webpack 如何将 文件引入到 script 标签中
由于项目是webpack打包的，而且项目不像vue-cli脚手架定义了static 目录和index.html文件的位置，只是定义了一个。结论：无法找到，因为没有引入h5player.min.js文件，webpack 是不会把其内容构建进来的。将整个目录拷贝到工程的根目录下，与index.html在统一层级，然后使用script 引入相对路径。文件，需要webpack打包编译 第三方提供的插件。引入script 的代码。
2024-03-22 22:13:56
370
原创 Vue3 echarts tooltip 无法正常显示
在开发可视化项目的时候，使用的是 Vue2 自定义的组件（只需要传入 echarts options）就可以联动产生效果，但是，在开发项目使用的是 vue3+vite 技术栈，反复比对 options 没有问题，但是就是没有效果。最终，将自定义组件改为 Vue3的模式，就正常了代码中的备注方便以后自己理解
2024-03-17 22:30:51
1080
转载 如何使用js实现拖拽效果？
因为设置了拖拽属性的元素就可以被拖拽，结束拖拽的时候获取一下鼠标与页面的距离，减去鼠标与元素中的距离就行了，逻辑为旧有拖拽方式的第二种：盒子的位置 = 元素与页面间的距离 - 元素与盒子的距离。：返回元素与有定位的父类的上左边距，如果父类都没有定位，那么返回相对于页面的上左边距（本示例中页面内只有一个元素，故获取的值是元素相对于页面的距离）：鼠标距离触发事件的元素的上左边距（本示例中只有一个元素，故获取的值为鼠标相对于盒子元素的上左边距）// 元素的位置 = 鼠标与页面的距离 - 鼠标与元素的距离。
2023-11-28 11:58:47
1358
1
原创 “网格商品” 列表的样式（使用 float 和 grid 布局）
由于每个项目之间的间距是一致的，如果使用margin-right设置间距，那么就要求父容器的宽度 为 n * (width + margin), 但是父容器实际上少了一个 margin的宽度，就必须要换行，导致一行显示的内容少一个。如果使用flex布局，然后justify-content: space-between, 如果在一行数量没有占满，就会导致 项目之间的间距不一致。
2023-11-28 11:17:19
619
原创 基于Vue开发websocket （重连机制）
import { ajaxCtx } from '@/api/config.js'export default { data () { return { websocket: null, lockReconnect: false, // websokect 锁 heartBeatTime: 5 * 60 * 1000, // 心跳检测时长 timer: null // 定时变量 } }, beforeDestroy () {
2023-10-26 15:17:21
509
转载 前端 axios 通过 get 请求发送 json 数据
建议跟后端沟通，你把json拼在url后面，后端从url的queryString取值。或者使用post请求来传json数据。
2023-10-08 09:41:43
750
原创 vue3 vite sourcemap控制台位置不准确问题
文章目录参考解决办法参考vue3 vite sourcemap控制台报错位置错误问题, 完美解决解决办法
2023-09-27 09:01:05
197
原创 vite vue3自动引入ref、reactive、vue-router(vite 插件unplugin-auto-import)
【代码】vite vue3自动引入ref、reactive、vue-router(vite 插件unplugin-auto-import)
2023-07-19 15:14:24
739
转载 【转载】TortoiseSVN怎么恢复到以前版本-恢复到以前版本的方法
第七步骤： 将回退的代码存放到一个新的文件夹中，然后将当前SVN回退到最新的版本，然后在新的文件夹中，将历史代码再次提交，作为最新的代码。第六步：返回，点击版本，输入版本号，并点击【确定】。第一步：进到到文件目录，右键点击【空白处】。第二步：点击打开【TortoiseSVN】。第五步：查看您的想要更新的【版本号】。第三步：点击【更新至版本】。第四步：点击【显示日志】。
2023-07-07 13:53:17
4030
原创 六、Vite 常用第三方库(axios、mockjs、sass、echars、element-plus、开箱即用)
我们自己搭建一个项目: 下载vite, vue, post-css, less, babel。// 基于准备好的dom，初始化echarts实例。// 使用刚指定的配置项和数据显示图表。create-vite内置了vite。// 指定图表的配置项和数据。'ECharts 入门示例'
2023-07-07 11:41:28
351
原创 三、Vite 文件系统 import.meta.glob
匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk类似于webpack的 require.context()转义为// vite 生成的代码 const modules = {
2023-07-06 15:28:35
8897
原创 二、Vite 静态资源文件处理（json、图片、svg、js等）
/ 如果是 scss 文件 或者 .module.css 文件，会编译 scss为css,然后转为 css module 对象。// 如果引入的是Vue文件，就会编译 Vue文件，有 render函数，调用render 会生成一个 Vue实例对象。// 如果引入的是Vue文件，就会编译 Vue文件，有 render函数，调用render 会生成一个 Vue实例对象。// 如果引入的是Vue文件，就会编译 Vue文件，有 render函数，调用render 会生成一个 Vue实例对象。
2023-07-06 15:07:22
910
原创 CSS磨砂玻璃穿透效果 filter: blur(4px)；backdrop-filter: blur(4px)；
工作中，UCD 设计了一个“磨砂穿透”的效果，本想着画一个磨砂效果，然后在通过透明度穿透，实现“磨砂穿透”的效果，然而，看到。这篇文章，发现可以将这种效果做成一个通用的组件。
2023-07-05 20:48:49
796
原创 Vue3 组件转为HTML DOM节点
工作中，开发地图的时候，其中一个API需要添加HTML代码，考虑到HTML代码很多，如果去拼接HTML字符串很麻烦，而且很容易出错，另外，在给HTML添加事件的时候，很容易绑定到全局中，这样污染了全局，而且也不符合Vue组件开发的思想。解决思路：希望像Vue2那样可以直接创建一个Vue组件实例，然后获取Vue组件实例的DOM，添加到组件中。问题: Vue3 没有Vue.extend() 方法，因此Vue2 的写法不能适用。
2023-07-05 20:09:12
2185
原创 一、Vite css处理（模块module、sass less预处理、获取CSS代码字符串）
如果 css.modules.localsConvention 设置开启了 camelCase 格式变量名转换（例如 localsConvention: ‘camelCaseOnly’），你还可以使用按名导入。
2023-06-17 11:38:24
3804
原创 四、Vite 模式 && 环境变量 && env
另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。.env 类文件会在 Vite 启动一开始时被加载，而改动会在重启服务器后生效。若想在 vite build 时运行不同的模式来渲染不同的标题，你可以。
2023-06-17 11:15:30
488
原创 Vite Vue3项目中unocss/vite插件实现tailwindcss
最近在学习Vite + Vue3项目的最佳实践， 看到一些开源的项目使用到了插件，趁机了解了一下Tailwind 或者 windi 样式库。tailwindcss 库的优势，可以参考Tailwind CSS是什么？有什么优势？视频。
2023-06-14 14:23:50
1583
原创 Vue3 vite vue-router4 动态路由router.addRoute()、import.meta.glob
使用Vite创建项目工程，将Vue3的一个知识点作为一个页面，但是发现随着学习的知识点增多，页面也越来越多，每个页面都要配置Vue-router 的路由信息，很繁琐，因此想能否根据文件夹的目录来配置路由。备注：** 如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。，猜想vite肯定也提供了类似的功能。，因此，要导入三个动态加载目录的文件。, 下面的代码是不支持的。
2023-06-13 16:18:19
2827
原创 Vue3 vite 项目使用 loglevel库作为前端（浏览器）日志库
工作中，同事在分享项目的时候，说总部大佬（是从Android 转过来的）写的代码有非常多的日志，代码写的很规范，但是带来的问题日志过多，反而突出不了重点，给调试带来了麻烦——要到处去找相关的日志。虽然浏览器的控制台功能很强大，后台开发的人都知道日志的重要性，日志库一般都会有日志级别，比如 log4j，
2023-06-09 17:17:02
1391
原创 Vue3 实现Event-Bus事件总线 （mitt插件）
Vue3 没有像Vue2那样创建一个Vue实例作为事件传递的对象( 参考。两个属性下面引入的自定义的声明文件。
2023-06-09 16:56:08
2171
2
原创 vue3 Vite + typescript 使用别名引入文件
工程中解析vue文件有两部分，一个是typescript 解析文件，一个是vite打包会去找文件。
2023-06-09 15:44:40
413
原创 Web Workers(前端多线程) 学习笔记
因为浏览器是单线程的，任何大量耗时的 JS 任务都会卡住界面，使浏览器无法响应任何操作，这样的用户体验非常糟糕。
2023-05-31 17:43:57
654
1
原创 js判断数据类型（typeof、instanceof、Object.prototype.toString.call(value)）
在遍历JSON 对象的时候，发现JSON 对象的值是各种类型，如果是数组和JSON 对象，就要继续遍历，问题：怎么知道值是什么类型？
2023-03-04 14:59:21
288
1
原创 CSS3 十六进制透明度
公司使用 sketch 做“高保真”设计，UCD 比较喜欢 “透明”的效果，每次复制 CSS 样式，就会出现 16进制的背景色，然后还有透明度，例如。#00143b 颜色的透明度是 80（十六进制），不透明是 FF, 全透明是00，因此 80的透明度是 相当于全透明的 50%解决办法： 将背景色的 16进制全部改为 十六进制颜色码转换成RGB颜色值；然后再使用 rgba() 函数。缺点：觉得效率太低了，需要每个都复制到工具网站去计算。
2023-02-13 17:23:18
1398
原创 Vue CLI4.0 webpack配置属性——css.sourceMap
Vue CLI4.0 webpack配置属性——css.sourceMap
2023-02-13 09:27:56
736
1
原创 Clipboard 剪贴板学习笔记
Clipboard.read()方法用于复制剪贴板里面的数据，可以是文本数据，也可以是二进制数据（比如图片）。由于用户可能把敏感数据（比如密码）放在剪贴板，允许脚本任意读取会产生安全风险，所以这个 API 的安全限制比较多。ClipboardItem 接口是对剪切板里的内容的抽象，比如我们选中网页上的一段文字，并右击选择复制，Clipboard.write()方法用于将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据。用户使用剪贴板数据，进行粘贴操作时，会触发paste事件。
2023-01-05 10:54:27
1503
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人