- 博客(1394)
- 资源 (8)
- 收藏
- 关注
原创 Promise.prototype.then().then()学习
文章目录一、问题描述二、介绍 Promise.prototype.then方法介绍then 中的回调函数 返回值三、解析代码一、问题描述最近审核一个同事的代码如下,感觉Promise.all()用法使用有点新奇,与我平时使用不一致,效果应该是没有问题的,不然测试就会测试出来// 防控圈切换场景,支持按防控圈,资源类型过滤统计queryResource (bClear) { const params = { } let _resCamera = [] let _resPolice =
2021-06-11 18:01:06 366
原创 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 748
原创 Vue3 echarts tooltip 无法正常显示
在开发可视化项目的时候,使用的是 Vue2 自定义的组件(只需要传入 echarts options)就可以联动产生效果,但是,在开发项目使用的是 vue3+vite 技术栈,反复比对 options 没有问题,但是就是没有效果。最终,将自定义组件改为 Vue3的模式,就正常了代码中的备注方便以后自己理解
2024-03-17 22:30:51 619
转载 如何使用js实现拖拽效果?
因为设置了拖拽属性的元素就可以被拖拽,结束拖拽的时候获取一下鼠标与页面的距离,减去鼠标与元素中的距离就行了,逻辑为旧有拖拽方式的第二种:盒子的位置 = 元素与页面间的距离 - 元素与盒子的距离。:返回元素与有定位的父类的上左边距,如果父类都没有定位,那么返回相对于页面的上左边距(本示例中页面内只有一个元素,故获取的值是元素相对于页面的距离):鼠标距离触发事件的元素的上左边距(本示例中只有一个元素,故获取的值为鼠标相对于盒子元素的上左边距)// 元素的位置 = 鼠标与页面的距离 - 鼠标与元素的距离。
2023-11-28 11:58:47 759 1
原创 “网格商品” 列表的样式(使用 float 和 grid 布局)
由于每个项目之间的间距是一致的,如果使用margin-right设置间距,那么就要求父容器的宽度 为 n * (width + margin), 但是父容器实际上少了一个 margin的宽度,就必须要换行,导致一行显示的内容少一个。如果使用flex布局,然后justify-content: space-between, 如果在一行数量没有占满,就会导致 项目之间的间距不一致。
2023-11-28 11:17:19 595
原创 基于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 449
转载 前端 axios 通过 get 请求发送 json 数据
建议跟后端沟通,你把json拼在url后面,后端从url的queryString取值。或者使用post请求来传json数据。
2023-10-08 09:41:43 569
原创 vue3 vite sourcemap控制台位置不准确问题
文章目录参考解决办法参考vue3 vite sourcemap控制台报错位置错误问题, 完美解决解决办法
2023-09-27 09:01:05 165
原创 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 685
转载 【转载】TortoiseSVN怎么恢复到以前版本-恢复到以前版本的方法
第七步骤: 将回退的代码存放到一个新的文件夹中,然后将当前SVN回退到最新的版本,然后在新的文件夹中,将历史代码再次提交,作为最新的代码。第六步:返回,点击版本,输入版本号,并点击【确定】。第一步:进到到文件目录,右键点击【空白处】。第二步:点击打开【TortoiseSVN】。第五步:查看您的想要更新的【版本号】。第三步:点击【更新至版本】。第四步:点击【显示日志】。
2023-07-07 13:53:17 3218
原创 六、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 315
原创 三、Vite 文件系统 import.meta.glob
匹配到的文件默认是懒加载的,通过动态导入实现,并会在构建时分离为独立的 chunk类似于webpack的 require.context()转义为// vite 生成的代码 const modules = {
2023-07-06 15:28:35 7541
原创 二、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 764
原创 CSS磨砂玻璃穿透效果 filter: blur(4px);backdrop-filter: blur(4px);
工作中,UCD 设计了一个“磨砂穿透”的效果,本想着画一个磨砂效果,然后在通过透明度穿透,实现“磨砂穿透”的效果,然而,看到。这篇文章,发现可以将这种效果做成一个通用的组件。
2023-07-05 20:48:49 667
原创 Vue3 组件转为HTML DOM节点
工作中,开发地图的时候,其中一个API需要添加HTML代码,考虑到HTML代码很多,如果去拼接HTML字符串很麻烦,而且很容易出错,另外,在给HTML添加事件的时候,很容易绑定到全局中,这样污染了全局,而且也不符合Vue组件开发的思想。解决思路:希望像Vue2那样可以直接创建一个Vue组件实例,然后获取Vue组件实例的DOM,添加到组件中。问题: Vue3 没有Vue.extend() 方法,因此Vue2 的写法不能适用。
2023-07-05 20:09:12 1938
原创 一、Vite css处理(模块module、sass less预处理、获取CSS代码字符串)
如果 css.modules.localsConvention 设置开启了 camelCase 格式变量名转换(例如 localsConvention: ‘camelCaseOnly’),你还可以使用按名导入。
2023-06-17 11:38:24 3298
原创 四、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 424
原创 Vite Vue3项目中unocss/vite插件实现tailwindcss
最近在学习Vite + Vue3项目的最佳实践, 看到一些开源的项目使用到了插件,趁机了解了一下Tailwind 或者 windi 样式库。tailwindcss 库的优势,可以参考Tailwind CSS是什么?有什么优势?视频。
2023-06-14 14:23:50 1538
原创 Vue3 vite vue-router4 动态路由router.addRoute()、import.meta.glob
使用Vite创建项目工程,将Vue3的一个知识点作为一个页面,但是发现随着学习的知识点增多,页面也越来越多,每个页面都要配置Vue-router 的路由信息,很繁琐,因此想能否根据文件夹的目录来配置路由。备注:** 如果新增加的路由与当前位置相匹配,就需要你用 router.push() 或 router.replace() 来手动导航,才能显示该新路由。,猜想vite肯定也提供了类似的功能。,因此,要导入三个动态加载目录的文件。, 下面的代码是不支持的。
2023-06-13 16:18:19 2310
原创 Vue3 vite 项目使用 loglevel库作为前端(浏览器)日志库
工作中,同事在分享项目的时候,说总部大佬(是从Android 转过来的)写的代码有非常多的日志,代码写的很规范,但是带来的问题日志过多,反而突出不了重点,给调试带来了麻烦——要到处去找相关的日志。虽然浏览器的控制台功能很强大,后台开发的人都知道日志的重要性,日志库一般都会有日志级别,比如 log4j,
2023-06-09 17:17:02 1220
原创 Vue3 实现Event-Bus事件总线 (mitt插件)
Vue3 没有像Vue2那样创建一个Vue实例作为事件传递的对象( 参考。两个属性下面引入的自定义的声明文件。
2023-06-09 16:56:08 1985 2
原创 vue3 Vite + typescript 使用别名引入文件
工程中解析vue文件有两部分,一个是typescript 解析文件,一个是vite打包会去找文件。
2023-06-09 15:44:40 376
原创 Web Workers(前端多线程) 学习笔记
因为浏览器是单线程的,任何大量耗时的 JS 任务都会卡住界面,使浏览器无法响应任何操作,这样的用户体验非常糟糕。
2023-05-31 17:43:57 598 1
原创 js判断数据类型(typeof、instanceof、Object.prototype.toString.call(value))
在遍历JSON 对象的时候,发现JSON 对象的值是各种类型,如果是数组和JSON 对象,就要继续遍历,问题:怎么知道值是什么类型?
2023-03-04 14:59:21 274 1
原创 CSS3 十六进制透明度
公司使用 sketch 做“高保真”设计,UCD 比较喜欢 “透明”的效果,每次复制 CSS 样式,就会出现 16进制的背景色,然后还有透明度,例如。#00143b 颜色的透明度是 80(十六进制),不透明是 FF, 全透明是00,因此 80的透明度是 相当于全透明的 50%解决办法: 将背景色的 16进制全部改为 十六进制颜色码转换成RGB颜色值;然后再使用 rgba() 函数。缺点:觉得效率太低了,需要每个都复制到工具网站去计算。
2023-02-13 17:23:18 1323
原创 Vue CLI4.0 webpack配置属性——css.sourceMap
Vue CLI4.0 webpack配置属性——css.sourceMap
2023-02-13 09:27:56 703 1
原创 Clipboard 剪贴板学习笔记
Clipboard.read()方法用于复制剪贴板里面的数据,可以是文本数据,也可以是二进制数据(比如图片)。由于用户可能把敏感数据(比如密码)放在剪贴板,允许脚本任意读取会产生安全风险,所以这个 API 的安全限制比较多。ClipboardItem 接口是对剪切板里的内容的抽象,比如我们选中网页上的一段文字,并右击选择复制,Clipboard.write()方法用于将任意数据写入剪贴板,可以是文本数据,也可以是二进制数据。用户使用剪贴板数据,进行粘贴操作时,会触发paste事件。
2023-01-05 10:54:27 1428
原创 浏览器绑定快捷键KeyboardEvent
对象描述了用户与键盘的交互。每个事件都描述了用户与一个按键(或一个按键和修饰键的组合)的单个交互;事件类型keydown,keypress与keyup用于识别不同的键盘活动类型。属性只读返回一个 Boolean,如果按键事件产生时,Alt(OS X 中是 Option 或⌥)键被按下,则该值为true。只读返回一个 Boolean,如果按键事件发生时 Ctrl 键被按下,则该值为true。只读that istrue只读that istrue"key", 可选,默认为""
2022-09-08 15:35:08 865
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人