Vue3
文章平均质量分 54
十月ooOO
精通 JS/CSS/HTML,做点有用的东西。
展开
-
高德地图 js API 实现拖动变换 Marker 坐标位置
之前已经说过了很多关于高德地图的自定义标记点的方法,这里不再冗述。通过这个功能,我已经实现了一个可以展示标记点信息的工具,如下:这个信息页的展示还有一个编辑器,是这样的:在使用中遇到一个问题,就是在手动定义好位置之后,想修改它的坐标位置。,拖动到哪,就以那的坐标位置作为这个点的位置。原创 2024-07-27 14:36:20 · 765 阅读 · 0 评论 -
ts 下使用 interactjs 的时候,事件类型该如何定义 InteractEvent
interactjs 是一个很好用的给元素添加拖动事件的插件。vite+ts+vue3 项目中用到了 interactjs 这个库,但在定义方法参数的时候,不知道该如何定义它的 event 类型了,像这样:这个方法中的 event 到底是什么类型。原创 2024-07-26 14:43:32 · 277 阅读 · 0 评论 -
vue2 项目改造成 vue3 项目时出现错误 TypeError: Cannot read properties of undefined (reading ‘prototyp ElementUI
在将 vue2 项目改造成 vue3 + vite + ts 的时候出现这种问题,原创 2024-07-23 11:08:13 · 251 阅读 · 0 评论 -
解决 elementUI 组件在 WebStorm 中显示为未知标签的问题
把它改成大写就可以了。原创 2024-07-22 14:08:28 · 411 阅读 · 0 评论 -
vue 如何做一个动态的 BreadCrumb 组件,el-breadcrumb ElementUI
我们需要实现的是,让它自己通过路由去填写这部分内容原理是根据当前路由值,拆分成多个段,然后通过路由 path 去匹配对应的路由名称,再填入到上面的内容中即可。原创 2024-07-17 15:36:40 · 707 阅读 · 0 评论 -
查错示例:vue 遇到的一个动态生成路由的问题,路由名必须唯一,不然相同名字的路由只有最后一条会生效。
当路由中有多个相同名字的路由的时候,这些相同名字的路由只有最后一条生效。原创 2024-06-27 14:34:17 · 488 阅读 · 0 评论 -
实现思路:Vue 子组件高度不固定下实现瀑布流布局
能看到上面瀑布流的实现前提,是需要每个子组件都有明确固定高度。而我有一场景是:子组件的高度不能提前知道,它的高度由组件内部的文本多少来决定,它能显示多高就显示多高。像这种,就需要在渲染过程中去判断最后一个合理的放置位置。原创 2024-06-11 10:39:09 · 1166 阅读 · 0 评论 -
vue ts 导入 @/assets/ 红色显示的问题解决
在使用的时候这样导入会出现如上的错误。在使用的时候,导入的类型也没有对应的代码提示,说明导入有问题。原创 2024-06-04 09:00:31 · 378 阅读 · 0 评论 -
Vue基础知识:vue3 对于 ref 值的类型定义
意思是 vue3 变量由 vue 来控制,上面的 name 变量值并不是原始的字符串。从 vue2 到 vue3 之后,所有变量值都需要添加。上面这个完整的定义其实是这样的。平常不在变量后面声明它的类型。方法本身就返回值类型就是。而是被套了一层类型为。原创 2024-05-31 10:58:20 · 546 阅读 · 0 评论 -
Vue ts 如何给 props 中的变量指定特定类型,比如 Interface 类的
我有一个这样的变量值类型。原创 2024-04-09 10:26:57 · 534 阅读 · 0 评论 -
Web 后台项目,权限如何定义、设置、使用:菜单权限、按钮权限 ts element-ui-Plus
做一个后台管理项目,里面需要用到权限管理。这里说一下权限定义的大概,代码不多,主要讲原理和如何实现它。原创 2024-04-03 11:33:54 · 1962 阅读 · 0 评论 -
jspdf.min.js?v=4760a237‘ does not provide an export named ‘default‘
【代码】jspdf.min.js?原创 2024-04-01 14:18:21 · 263 阅读 · 0 评论 -
ts js vue 验证文件 MD5 值 spark-md5
如何在前端中验证要上传的文件的 md5 值。原创 2024-03-22 16:15:18 · 917 阅读 · 0 评论 -
ts enum elementUI 表格列表中如何方便的标识不同类型的内容,颜色区分 enum ts + vue3
我们需要提前给这些类型指定不同的 class,也就是 element 中的 type 名。"未受理" = 1,"处理中","处理完成(待评价)","处理完成(关闭)","取消","流转中",[EnumOrderStatus['未受理'], "warning"],[EnumOrderStatus['处理中'], "primary"],[EnumOrderStatus['处理完成(待评价)'], "success"],原创 2024-03-22 10:19:22 · 608 阅读 · 0 评论 -
echart trigger 为 axis 的时候不显示 tooltip 解决办法
在项目中使用echart显示了一个曲线图:但当把图表的 trigger 设置成axis的时候,鼠标扫过并不显示具体的数值,如上图所示。但 trigger = item 的时候是正常的。原创 2024-03-19 17:34:15 · 538 阅读 · 0 评论 -
pinia 给 state 指定变量类型
自从用以来,我一直有一个很大的疑问,就是pinia中的state变量类型该从哪定义,如何定义它?因为我在使用未定义类型的state变量的时候一直会有一个提示,提示说不知道这个变量的类型是什么,或者使用的对象变量里没有这个属性值,如下:也确实是这样,我只给 currentDiary 定义了是个对象 {} 并没有指定它的内部属性值,所以它自然不知道里面有什么内容。原创 2024-01-04 15:58:57 · 1355 阅读 · 0 评论 -
SVG 文件的引入方式之一:以 URL 的方式引入 SVG 文件,vue2、vue3+Vite vite-svg-loader
vue2 使用 require() 引入 svg 使用vue3 + ts + vite 使用 vite-svg-loader 插件引入svg 使用并最终实现代码提示一样使用图标文件。原创 2024-01-03 12:05:39 · 8309 阅读 · 0 评论 -
Vue3 的 emit 该怎么写, vue2 对比
这是个新手问题,从 vue2 转到 vue3 之后,一时间不知道该怎么用它了。原创 2023-12-31 14:16:58 · 594 阅读 · 0 评论 -
vite import.meta.glob() 如何导入多个目录下的资源
那么如果我的目录是这样的,而我需要将这个目录下所有.vue都加载进来,如何实现呢?原创 2023-11-21 17:32:16 · 1159 阅读 · 0 评论 -
Vue3 vite build 之后不显示页面内容,只显示空白,也没有报错如何解决
添加 base,意思是 build 之后的外部资源都从当前目录的相对路径获取。我不知道是什么原理哈,反正是管用,之前在没有使用。中关闭这个选项的,所以差不多的事应该。这样在 build 之后就能正常显示了。原创 2023-04-11 15:37:30 · 9601 阅读 · 2 评论 -
Vue3 基础知识笔记
Vue3 基础知识笔记。原创 2023-04-11 14:24:14 · 93 阅读 · 0 评论 -
v-model 自定义组件的方式 vue2 跟 vue3 不同
想创建一个textarea组件,自己处理一些快捷键操作。结果试了半天不行,后来才意识到自己环境是vue3,网上多数vue2的操作都不适用。原创 2023-03-06 10:22:17 · 91 阅读 · 0 评论 -
1.3mb js 文件压缩至 360kb,加快 vue 项目的加载速度,nginx gzip设置
我有个自己的项目,一直在维护,也一直在更新。自从换了阿里云的服务器(1mb 带宽)之后,加载项目老慢了。今天有时间研究了一下如何优化加载速度,分享下。能看到其中有个 1.3m 的 js 文件下载时用了 10s 时间。原创 2022-11-21 16:59:10 · 513 阅读 · 0 评论 -
Vue Elements 可用的省市县数据
数据: https://github.com/KyleBing/province-json-for-elementElement Cascader 使用实例原创 2022-09-19 11:48:02 · 328 阅读 · 0 评论 -
Vue3 PWA 如何配置
在看如何配置之前需要先知道什么是 PWA具体参阅:看完就会了vue pwa 官方配置说明。原创 2022-09-07 17:43:03 · 1784 阅读 · 0 评论 -
Safari 背景为绿色,设置 Safari 访问页面时的背景颜色 theme-color
最近遇到一个很奇怪的问题,safari 访问网页的时候,背景不能通过 body 的 background 指定了。不知道是 iOS 升级导致的问题还是怎么着,之前一直好好的,现在就不行了。原创 2022-08-11 22:58:49 · 2555 阅读 · 1 评论 -
如何判断一个数组中的元素包含一个对象的所有属性值
有下面这么一个对象模板,和基于这个对象模板产出的数组现在的状态是:现在需要实现功能是,根据这个对象模板,判断数组中实现这个判断功能:原创 2022-07-05 11:25:45 · 342 阅读 · 0 评论 -
浏览器中如何使用 module export import: Uncaught SyntaxError: Cannot use import statement outside a module 问题
我在 html 页面中引入了 vue出现这样的错误提示是因为,你在 html 引入的 js 中使用了 import 语法,而默认情况下,浏览器是不识别这个的,比如在 html 页面中直接引入 vue 进行使用,其中 vue 的 js 文件里又引入了外部的一些 js。在 script 标签中添加 即可这样就能正常使用了...原创 2022-06-09 10:50:28 · 1162 阅读 · 2 评论 -
大屏项目,显示到电视上后,丢失部分内容
大屏项目,显示到电视上后,丢失部分内容环境介绍电视分辨率是 3840x2160 的,电脑 HDMI 线连接电视,将电视作为唯一的显示输出。项目是大屏项目,作了基于 1920x1080 的缩放处理。现象现场将项目显示到电视上之后,有部分小组件不显示了,但在普通显示器上显示正常。这部分小部件是存在的,只是不显示,点击还有其对应的点击效果。解决办法最后是因为分辨率太高了,也没有作缩放处理,正常4K在用在电脑上之后,都会对显示器进行设置,设置成缩放 150% 或 200%。...原创 2022-05-18 16:02:55 · 454 阅读 · 0 评论 -
vue3 browser能直接使用的文件从哪获取
vue3 browser能直接使用的文件从哪获取有个项目中我使用了官方的推荐 cdn 地址,结果呢,今天打开看的时候,这个文件国内无法加载,直接想骂娘,一个 CDN 地址,竟然国内无法访问??!所以我决定不再使用线上地址,自己下载下来引用吧<script src="https://unpkg.com/vue@next"></script>官方竟然也让你自己下,WTF其实只要你在其它项目中有 vue3 的库,就可以直接从那里复制过来使用,它对应的文件名是 global.js原创 2022-04-14 11:51:58 · 849 阅读 · 0 评论 -
vue3 的 emits 是什么 runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Extraneous non-emits event listener
vue3 的 emits 是什么在使用 vue3 的时候出来一堆警告的东西,一直没在乎它,今天看了下,原来是 vue3 对比 vue2 新增的特性警告提示:runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Extraneous non-emits event listeners (delete) were passed to component but could not be automatically inherited because compone原创 2022-03-31 15:25:18 · 2870 阅读 · 0 评论 -
Vue 开发阶段从不同 IP 获取数据 devServer 设置
Vue 开发阶段从不同 IP 获取数据 devServer 设置有的时候,前端开发过程中,后台分块开发,在不同后台开发者手中,就需要从不同位置获取数据。比如:接口地址后台/api/device/192.168.0.208:8888/api/login/192.168.0.148/api/camera192.168.0.208:8083那么现在该如何从不同位置获取数据呢。解决办法只需要在 vue.config.js 中的 devServer 设置一下代理就原创 2022-03-22 16:20:34 · 5365 阅读 · 0 评论 -
做一个旋转的 css loading 动画,css 扇形
做一个旋转的 css loading 动画,css 扇形上效果图上代码:<template> <div class="loading-circle"> <div class="lv1"></div> <div class="lv2"></div> <div class="lv3"></div> </div></templa原创 2022-03-19 10:22:17 · 720 阅读 · 0 评论 -
使用 interact.js进行dom拖动
使用 interact.js 进行 dom 拖动interact.js 是一个非常好用的可以任意拖动元素的库GitHub: https://github.com/taye/interact.js官方站点: https://interactjs.io/安装,引用注意: interactjs 跟 interact.js 是两个不同的库,这里用的是 interactjs# npmnpm i interactjs# yarnyarn add interactjsvue 中这样引入i原创 2022-03-18 14:45:16 · 2166 阅读 · 0 评论 -
vue transition 如何搭配 animate.css 使用
vue transition 如何搭配 animate.css 使用之前一直没细看过 vue 对于 transition 的说明,今天看了才知道。安装 animate.css# npmnpm i animate.css# yarnyarn add animate.css在 main.js 中 import animate.cssimport 'animate.css'这样,在项目里面就可以直接使用 animate.css 中的样式了transtion + animate.csst原创 2022-03-18 11:55:01 · 752 阅读 · 0 评论 -
Vue 展示巨量数据,vue-virtual-scroller 使用说明 vue3 vue2
Vue 展示巨量数据,vue-virtual-scroller 使用说明 vue3 vue2一、遇到的问题最近在做的一个小工具中需要解决一个展示巨量数据列表的问题,数据有 8万 多条。刚开始我是直接让它渲染的,结果用了60秒之多,我以为是数据处理耗时多,经过排查,发现是 dom 渲染用时长,数据处理其实只用了不到 100ms,如下图:二、解决方案 vue-virtual-scroller所以目前主要需要解决的就是如何能流畅展示这么多数据的问题,搜了下,搜到 vue-virtual-scrolle原创 2021-07-31 19:50:41 · 36706 阅读 · 45 评论