Vue
文章平均质量分 52
Vue 相关
十月ooOO
精通 JS/CSS/HTML,做点有用的东西。
展开
-
高德地图 js API 实现拖动变换 Marker 坐标位置
之前已经说过了很多关于高德地图的自定义标记点的方法,这里不再冗述。通过这个功能,我已经实现了一个可以展示标记点信息的工具,如下:这个信息页的展示还有一个编辑器,是这样的:在使用中遇到一个问题,就是在手动定义好位置之后,想修改它的坐标位置。,拖动到哪,就以那的坐标位置作为这个点的位置。原创 2024-07-27 14:36:20 · 758 阅读 · 0 评论 -
vue 如何做一个动态的 BreadCrumb 组件,el-breadcrumb ElementUI
我们需要实现的是,让它自己通过路由去填写这部分内容原理是根据当前路由值,拆分成多个段,然后通过路由 path 去匹配对应的路由名称,再填入到上面的内容中即可。原创 2024-07-17 15:36:40 · 703 阅读 · 0 评论 -
查错示例:vue 遇到的一个动态生成路由的问题,路由名必须唯一,不然相同名字的路由只有最后一条会生效。
当路由中有多个相同名字的路由的时候,这些相同名字的路由只有最后一条生效。原创 2024-06-27 14:34:17 · 486 阅读 · 0 评论 -
实现思路:Vue 子组件高度不固定下实现瀑布流布局
能看到上面瀑布流的实现前提,是需要每个子组件都有明确固定高度。而我有一场景是:子组件的高度不能提前知道,它的高度由组件内部的文本多少来决定,它能显示多高就显示多高。像这种,就需要在渲染过程中去判断最后一个合理的放置位置。原创 2024-06-11 10:39:09 · 1157 阅读 · 0 评论 -
vue 如何制作一个跟随窗口大小变化而变化的组件
像下图中展示的那些统计数件就是跟随窗口变化而变化的,而且是几乎等比缩放的。原创 2024-06-06 11:06:54 · 508 阅读 · 0 评论 -
vue ts 导入 @/assets/ 红色显示的问题解决
在使用的时候这样导入会出现如上的错误。在使用的时候,导入的类型也没有对应的代码提示,说明导入有问题。原创 2024-06-04 09:00:31 · 371 阅读 · 0 评论 -
vue PWA serviceWorker 有新内容时,如何自动刷新内容
vue 自带的 pwa 插件可以很方便管理 serviceWorker 的使用,但会有一个问题。而我需要在检测到新版本的内容之后自动刷新页面载入新内容。具体 ServiceWorker 的响应机制可以看这篇文章,很的很详细。原创 2023-10-19 10:29:51 · 1182 阅读 · 0 评论 -
鼠标划过改变子元素的属性 vue
我想做一个类似词句大爆炸的效果,将一个句子炸成多个词条,然后手动选择需要的内容。结构是这样的wordList->word需要的操作是鼠标左键划过的时候将划过的字词选中。现在不太确定是要把这个事件加到父元素 ( wordList ) 上还是子元素 ( word ) 上。原创 2023-10-11 15:15:54 · 108 阅读 · 0 评论 -
取消 vue 自动将图片转为 base64
默认情况下,vue 会自动将小图片转为 base64 使用,但有时候我们需要它保留原有的文件属性。原创 2023-06-27 17:18:56 · 1671 阅读 · 0 评论 -
七牛云 vue 图片上传简单解说,js 上传文件图片
首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范。七牛云有免费的使用额度,上传是不算流量的,只有资源被访问的时候才产生流量,很合理。对于个人小项目使用来说,很方便,文件系统本身就应该跟业务系统分离。原创 2022-11-26 11:18:08 · 3213 阅读 · 7 评论 -
1.3mb js 文件压缩至 360kb,加快 vue 项目的加载速度,nginx gzip设置
我有个自己的项目,一直在维护,也一直在更新。自从换了阿里云的服务器(1mb 带宽)之后,加载项目老慢了。今天有时间研究了一下如何优化加载速度,分享下。能看到其中有个 1.3m 的 js 文件下载时用了 10s 时间。原创 2022-11-21 16:59:10 · 513 阅读 · 0 评论 -
vue 项目在加载完成之前,显示预置加载动画
如果你是 pwa 应用, vue3 默认都已经是 pwa 应用,就需要在的 pwa 字段中确保是index.html。比如我的配置如下/*** PWA 设置name : '日记' , // 名字 themeColor : "#373737" , // 背景颜色 appleMobileWebAppCapable : true , // 苹果 WebApp 支持 // manifest 设置 manifestOptions : {原创 2022-11-19 10:30:35 · 2374 阅读 · 0 评论 -
Vue 2 如何添加 register-service-worker 以实现缓存请求的目的
现在 vue 3 的模板中是自带的。用这个的好处是,它会自动将项目中的所有文件请求缓存到中,以实现再次打开网站的时候会非常非常快。如果页面中变化,也会自动在后台下载变化的文件,页面的变化在下次刷新页面的时候就会自动生效。原创 2022-11-16 09:53:33 · 3268 阅读 · 1 评论 -
做了个 web 的键盘测试工具,MagicKeyboard2
最近买了个 MagicKeyboard2,买来得测试一下键盘是不是正常,下个软件测试有点多余,就从网上找了个 web 版的测试页面,但它的界面实在是一言难尽。在线地址: https://kylebing.cn/tools/keyboard/就想自己写一个极其仿真的键盘测试界面,下午+晚上 完成。不愧我这扎实的 HTML + CSS 基础。原创 2022-10-29 11:43:35 · 3562 阅读 · 0 评论 -
高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息
这里我们需要获取到上面提前定义好的值。答案全在mapEvent上,来看一下内都有什么:我们需要的是中的内容,它是一个 dom 对象:获取到了它,就能使用 dom 的操作方法对齐进行取值了:像下面这样,我们就取到了它的属性值。原创 2022-10-26 14:45:05 · 10479 阅读 · 5 评论 -
Vue 如何实现登录后,跳转到登录之前要访问的页面
有些时候,需要实现这样的功能:举个例子说:那么如何实现这个需求呢。用 store 来实现在 router 的 方法中判断,在跳转至登录之前记录这个 登录成功后,如果存在 lastVisitPath 就跳转到它原创 2022-07-06 16:50:21 · 7716 阅读 · 0 评论 -
vue 如何依次请求 20 多个 axios 请求,同步请求多个,按次序请求
有一个人员列表, ,每个人员都有多张卡片 + 多个指纹数据因为我们用的是 ,它是异步的,返回每个请求的 对象,而我们需要的是同步功能,就是同一时间,只有一个请求在执行。执行完上面的请求之后,再执行下面的请求。需要使用ES6的 基本的用法是:带 的方法内,使用 来同步执行返回 的方法,例:对比上面的请求,下面这种请求的结果返回顺序是不可控的三、具体实现方法其请求过程是这样的:..............................原创 2022-06-21 18:09:54 · 8095 阅读 · 0 评论 -
lua 的 os.date 时间格式字符串参数说明
【代码】lua 的 os.date 时间格式字符串参数说明。原创 2022-05-16 10:11:04 · 551 阅读 · 0 评论 -
如何发布一个公共的 vue 组件到 npm
如何发布一个公共的 vue 组件到 npm参考文章:https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library/介绍一下如何将一个写好的组件发布到公共的 npm 上,可以让其像其它插件一样下载使用。一、全局安装工具 vue-sfc-rollupnpm i -g vue-sfc-rollup发布一个 vue 组件,需要配置不少东西,并要符合发布 vue 组件的内容格式,这个过程可以通过原创 2022-05-13 16:25:51 · 1637 阅读 · 0 评论 -
如何全局设置element-ui message 的一些参数
如何全局设置element-ui message 的一些参数参考:https://www.cnblogs.com/morango/p/15349415.html比如为了不遮挡内容,我需要修改 message 的默认距离顶端的距离为 offset: 100// ELEMENT UIimport ElementUI from 'element-ui'Vue.use(ElementUI)这里需要注意:全局 ElementUI 引入需要写在前面,以好被后面的 message 覆盖,如果写在下面原创 2022-03-29 10:35:42 · 3361 阅读 · 3 评论 -
Vue 高德地图 js API Loca 如何使用 连接线图层、脉冲连线图层
高德地图 API Loca 如何使用 连接线图层最终实现的效果:“感谢大哥送来的火箭”基础知识官方的连接线例子是一个与我国建交的国家连线其中用到的两个数据源是:建交的连接线数据: https://a.amap.com/Loca/static/static/diplomacy-line.json建交的点数据:https://a.amap.com/Loca/static/static/diplomacy-point.json用到的官方数据、资源各省会数据: https://a.amap.com原创 2022-03-25 10:17:53 · 4091 阅读 · 1 评论 -
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 · 5364 阅读 · 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 · 719 阅读 · 0 评论 -
Vue radio绑定数组中对象的属性,v-model 不更新值,解决办法
Vue radio绑定数组中对象的属性,v-model 不更新值,解决办法有一个项目中,我需要将数组中对象的属性绑定到 el-radio 上数组的结构是这样的dataOrigin: [ {id: 1, deviceType: 'di'}, {id: 2, deviceType: 'do'}, {id: 3, deviceType: 'ai'}, {id: 4, deviceType: 'di'}, {id: 5, deviceType: 'do'}, {id: 6, devi原创 2022-02-25 17:33:27 · 6128 阅读 · 2 评论 -
vue getter 内部如何调用其它 getter
vue getter 内部如何调用其它 getter今天遇到一个很白痴的问题,getter 如何调用其它 getter问题如下,我需要在 DevicePathNameMap 中调用同级的另一个 getter: detailShowingPathArray,我以为只需要 this. 即可,但是这样找不到getters: { // 匹配数字名字 dataName 对应的设备名字 title DevicePathNameMap: state => { let map原创 2022-01-24 10:02:36 · 1670 阅读 · 0 评论 -
Vue如何在 build 的时候打包生成 dist.zip 文件
vue 使用 filemanager-webpack-plugin 打包 dist 为 dist.zip原创 2022-01-12 11:00:15 · 1784 阅读 · 1 评论 -
vue 在页面离开时,丢弃所有未完成的请求 AbortController signal / CancelToken.cancel 取消请求
vue 在页面离开时,丢弃所有未完成的请求 AbortController有些时候,我们切换到一个请求会消耗比较长时间的页面中而如果此时切换到其它页面,这些未完成的请求会影响下个页面的数据载入,也就是说,下面页面中的请求会在前一个页面请求完成后才执行。那么有什么办法取消这些未完成的请求呢?取消 axios 请求的方法官方取消请求的说明: https://github.com/axios/axios#cancellation官方介绍了好三个取消请求的方法,CancelToken 的形式已经被废原创 2022-01-05 17:17:24 · 9742 阅读 · 2 评论 -
Vue 加载 SVG 图片文件
Vue 加载 SVG 图片文件export default { // LOGO logo: require('./logo.svg'), logo_content: require('./logo_content.svg'), logo_content_saved: require('./logo_content_saved.svg'), logo_title: require('./logo_title.svg'), logo_title_saved: r原创 2021-12-25 11:02:17 · 1617 阅读 · 0 评论 -
vue watch 侦听对象内部属性的变化 deep
vue watch 侦听对象内部属性的变化 deep watch: { lowAutoClose: { handler(newValue, oldValue){ this.submitAirAutoOnOffOperation() }, deep: true },}原创 2021-12-21 09:28:16 · 194 阅读 · 0 评论 -
Vue 监听路由变化,然后重载当前页面
Vue 监听路由变化,然后重载当前页面有时候,我们需要通过监听路由中参数的变化来重载当前页面内容,重新执行当前页面的 mounted() 这个生命周期,但如果 location.reload() 是重载了整个项目,那么如何重载当前页面这个vue文件呢一、App.vueApp.vue 中添加如下内容export default { data() { return { isRouterActiveAlive: true } },原创 2021-12-20 09:52:41 · 2153 阅读 · 0 评论 -
`element-ui` form 表单验证所有可能的验证内容,如何自定义表单验证
element-ui form 表单验证所有可能的验证内容,如何自定义表单验证验证的官方说明在 https://github.com/yiminghe/async-validator以下例子中定义了各种形式的验证方法:password: [ // 必填 {required: true, message: '请输入密码', trigger: 'blur'}, // 验证数组 { type: 'arra原创 2021-12-07 09:54:17 · 596 阅读 · 0 评论 -
Vue 中 click 事件如何传递 event
Vue 中 click 事件如何传递 eventVue 中 click 事件如何传递 event,使用中我需要判断用户点击按钮的时候有没有按下 shift 键,我就需要拿到对应的 event 事件,获取其中的 shiftKey 属性,在 vue 的标签中就需要写入 $event, 而不是 event<div class="btn" @click="btnPressed($event)"></btn>btnPressed(event){ console.log(event)原创 2021-10-18 11:38:52 · 6859 阅读 · 0 评论 -
Vue 如何在外部通用方法中使用 element 一些方法,比如提示信息等
Vue 如何在外部通用方法中使用 element 一些方法,比如提示信息等一直搞不明白如何在 Vue 外部的通用方法中使用 Element 的提示信息:比如,我写了一个通用的请求方法,在没有权限的时候使用 ElementUI 中的 Message 提示用户这样使用:直接引用 ElementUIimport ElementUI from 'element-ui'// 使用的时候使用ElementUI.Message({ message: '没有权限,请登录', type: 'e原创 2021-10-13 10:15:28 · 363 阅读 · 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 · 36651 阅读 · 45 评论 -
Electron教程(五)读取本地文件内容, icpMain icpRenderer 之间的交互
Electron教程(5)读取本地文件内容, icpMain icpRenderer 之间的交互读取本地文件的原理: electron 的主进程里可以运行所有node 的功能,包含通过 os 读取系统信息,通过 fs 读取文件和目录。那么如何实现文件的读取和展示呢? 因为渲染进程是无法直接跟系统直接交互的,所以分两个部分:主进程负责读取文件主进程把读到的文件内容 -> 传递给渲染进程,再由渲染进程负责展示知道如何使用这个,几乎所有其它的 node 相关的功能也都知道该如何使用了node原创 2021-07-29 20:35:43 · 12966 阅读 · 1 评论 -
Electron教程(四)使用 Vue Browser 版,创建小工具应用
electron + vue3 使用浏览器版本的 vue3 进行小工具的开发electron + vue 在开发大型网络应用的时候可能比较顺手,但在开发本地小工具这样的程序的时候,就很不方便了。单文件形式的 vue 每次都需要 build 之后才能被 electron 使用,这就需要很长一段时间。如果你需要实现的一个小功能的工具,一个不需要太多大型应用功能的应用。那你就可以抛弃 vuex vueRouter 这些大块,只使用 vue 对于 dom 操作的那部分。这里推荐使用 vue browse原创 2021-07-24 22:53:45 · 3388 阅读 · 4 评论 -
Vue 错误说明: _vue@3.6.2@vuex 提示找不到该包,请下载
Vue 错误说明: _vue@3.6.2@vuex 提示找不到该包,请下载遇到一个很奇特的问题npm run serve 的时候,老是提示这个错误找了半天问题,后来静下心来看的时候,看到对应出错的文件是错误提示信息中的最后一个 drawRect.vue后来打开这个文件才看到 原来的 vuex 已经被替换成了现在的 _vue@3.6.2@vuex至于是在哪个过程中被替换的,就不知道了,项目中的两个文件都是这样的情况。很奇怪。改过来就好了。import { mapState } from 'v原创 2021-07-23 15:59:18 · 1283 阅读 · 0 评论 -
Electron-forege 启动失败: Electron failed to install correctly, please delete node_modules/electron and
Electron-forege 启动失败: Electron failed to install correctly, please delete node_modules/electron and try installing again DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/g原创 2021-07-21 16:41:51 · 506 阅读 · 0 评论 -
错误解决:vue Syntax Error: Error: PostCSS received undefined instead of CSS string
错误解决:vue Syntax Error: Error: PostCSS received undefined instead of CSS string本来项目昨天还好好的,今天打开却发现提示这玩意,启动不起来。WTF?找了半天答案,终于自己试出来了。解决办法如果上次运行是正确的,就不要去动代码,可能是环境的问题。将项目下的 node_modules 文件夹删除,然后重新 npm i ,如果速度慢,可以使用 cnpm i然后就好了 -.-lll...原创 2021-07-21 09:24:35 · 1068 阅读 · 0 评论 -
高德地图 js API Loca 3D动画的使用说明
高德地图 API Loca 动画的说明我们在使用 Loca 制作地图动画时,里面有几个对应的动画效果,有center: 平移pitch: 视角zoom: 缩放rotation: 旋转来看一下代码对应的不同动画效果,就很明确的知道动画是怎样制作的了具体的例子可以查看这里:https://kylebing.cn/tools/riding-map/Loca 的官方说明https://lbs.amap.com/api/loca-v2/introcentercenter: {原创 2021-07-09 23:15:02 · 2764 阅读 · 5 评论