- 博客(55)
- 收藏
- 关注
RSS订阅原创 gzip压缩的json文件在谷歌浏览器(chrome)中可以正常解析，但是在safari浏览器乱码
gzip压缩的json文件在谷歌浏览器(chrome)中可以正常解析，但是在safari浏览器乱码
2023-02-09 11:48:53
735
原创 通过NodeJS对接微信客服实现第三方API管理消息
这一步是必须的，因为我们需要企业微信管理员是自己，只有管理员才能开通客服账号，以及后续我们进行第三方配置的时候都需要用到管理员账号个人可以注册企业微信，所以我是一个人的身份注册了一个企业微信刚开始企业微信的样子是这样的，你会发现并没有工作台之类的，这是因为我们暂时还不是企业管理员，没有设置应用，接下来我们要切换到企业管理员界面
3
原创 element plus popover自适应位置
elementui2.x版本的时候popover有自动适应位置的功能，但是到了element plus似乎没有了，而且文档中也没有这个选项然后在github中找到了解决方案参考链接：popover auto placement解决方法：通过:fallback-placements="['bottom', 'top', 'right', 'left']"这种形式给popover加上，然后就会自适应位置了...
2022-05-19 11:15:41
1577
原创 element table父级flex导致表格宽度出问题
这个问题真的很奇怪，table父级使用flex布局之后，在浏览器宽度变化的时候导致table的宽度值不对，似乎是取的window.innerWidth的宽度，找了半天还是在github上找到了答案参考链接：在flex布局下，外部div宽度减小时表格宽度不会随之减小通过下面的方式进行解决main { flex: 1; width: 0}...
2022-05-10 17:06:56
527
原创 vue3中ref获取dom的方式（包含for循环）
如何在Vue3中通过ref获取dom元素，这里说一下我遇到的情况和使用方式情况一：只是单纯的获取某个dom元素这种情况比较简单，直接在js中通过ref定义一个和html中元素上ref相同名字的变量即可例子：<template> <div class="box" ref="boxRef"> box </div></template><script lang="ts" setup>import { onMount.
2022-03-10 12:10:21
6230
9
原创 关于Vue3+ts父组件调用子组件方法
Vue3中通过ref进行元素绑定然后就可以获取到元素，这个不用多说，但是我们需要通过父组件调用子组件的时候还需要进行一定的配置参考：https://juejin.cn/post/7025985645877133348先将子组件方法导出我们需要在子组件中先通过defineExpose方法将父组件需要调用的方法进行导出，如此才能将该方法挂载到子组件实例上defineExpose({ clearAllErrors })通过TS进行定义声明如果使用了ts，我们需要在定义的时候通过InstanceT.
2022-02-24 18:17:20
4983
原创 ts报错元素隐式具有 “any“ 类型...
元素隐式具有 “any” 类型，因为类型为 “string” 的表达式不能用于索引类型 “{…}”这个错误也是挺恶心的我是参考了一下这篇文章：解决 元素隐式具有 “any“ 类型…解决思路首先定义一个新的接口，如下图所示然后让报错的接口继承自信定义的接口接口...
2022-02-16 16:21:18
10983
原创 element-plus按需引入el-table不能滚动的问题
重新开启了新的项目，这次按自己的想法，使用了vite+ts+element-plus的技术方案，但是在使用element-plus的table组件的时候，发现table的滚动失效了这个问题在网上找了半天也没发现有解决方案，element-plus github中有人提过这个问题也没有给出解决方案，看样子只能自己解决了element-plus el-table滚动失效解决方案由于是按钮加载el-table，所以element-plus自动引入的时候并没有引入滚动相关文件el-scrollbar.cs.
2022-02-15 14:23:49
1599
原创 vitejs+ts+vue3 ESlint配置
vitejs+ts+vue3 ESlint配置首先在项目中安装eslintnpm i -D eslint然后配置package.json中的scripts命令"scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "serve": "vite preview", "lint": "eslint --init"},然后运行npm run lint进行
2022-01-22 12:15:12
1144
原创 nuxtjs2.x配置tailwindcss
背景现在tailwindcss比较火，就想着在项目中配置一下，毕竟能节省好多自己写css的时间。tailwindcss中是有nuxt中配置tailwindcss的教程的，跟着做了一下，但是由于自己还是nuxt2.x，而官网教程是针对nuxt3和postcss8的，所以还是有问题的，所以网上找了一下教程，又重新配置了一下参考地址: (超简单！怎样在Vue2中使用TailWind Css)[https://blog.csdn.net/vx_1097122362/article/details/1155
2022-01-07 14:28:26
1723
1
原创 Vue2.x ElementUI form表单中validate传参问题
背景对于form表单自定义校验，其实有的时候我们可以进行复用，从而避免重复代码参考了一下网上的方法，大致有以下两种方法方法1：通过自定义函数传参(推荐)代码示例html代码<template> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > .
2022-01-07 14:26:57
3682
原创 ant-design-vue table多行表头
背景项目中要实现多行表头的表格，但是发现ant design vue并没有提供多行表头的示例，就去网上找了一下，其实最主要的还是columns的写法，在columns中加上children就可以定义子表头了参考地址：【进阶Ant-Design-Vue】你知道table多级表头嵌套展开写法吗？示例<a-table :columns="columns" :data-source="tableData" :pagination="false" :scroll="{ x: 1200
2021-12-21 11:14:24
4151
1
原创 vite-plugin-eslint缓存导致eslint一直报错的问题
解决方案如果你使用了vite-plugin-eslint，那就很可能是vite-plugin-eslint的缓存问题这时我们可以将vite-plugin-eslint的缓存关闭即可背景准备通过vitejs+vue3+ts进行项目开发，开发之前eslint肯定是必须的，所以就跟着网上的一些教程配置了一下eslint一切似乎都很美好，项目可以正常运行，eslint也可以发挥作用但是当我代码运行过程中出现eslint错误之后，不管怎么重新运行都会一直报错，哪怕我把错误已经修复了出现这个问题之后，我
2021-12-02 23:41:46
7633
1
原创 vue3 setup单文件组件中配置inheritAttrs
vue3使用setup单文件组件这种形式的时候，有的属性配置不能使用这时需要进行配合普通的script进行配置参考vue3官方文档：与普通的<script> 一起使用
2021-11-27 21:46:02
6092
1
原创 vue项目中给fullcalendar v5事件添加自定义事件（右键事件）
fullcalendar v5的变化还是很大的，而且出来时间不长，网上关于fullcalendar的问题大多是v3、v4版本的，在这里记录一下vue中使用v5版本添加自定义事件的方法参考地址：Add custom right click context menu in FullCalendar v4这里是通过options对象的方式进行配置需要用到eventDidMount钩子函数进行配置options:{ eventDidMount: arg => { const eventI.
2021-11-18 17:47:54
1947
原创 记vue文件全部声明文件报红问题
是vuter插件导致的问题，可以在setting.json文件中作如下设置"vetur.validation.interpolation": false,
2021-11-18 17:40:05
1324
原创 关于vue动态设置query路由报错问题的解决方案
vue动态编辑删除query路由报错如果是通过$route.query获取的query进行删除之后再进行跳转的时候，vue路由会报重复跳转的错误解决方案将query对象克隆一份deleteType() { const query = this.$route.query const newQuery = JSON.parse(JSON.stringify(query)) if (newQuery.type && newQuery.type === 'edit') {.
2021-11-09 09:53:41
1664
原创 Vue3中自定义指令监听元素尺寸变化
vue对元素的宽高变化看了一下，基本都是用的定时器解决的，刚好看到JS的一个属性方法，可以专门监测元素的尺寸变化CDN地址：https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver实现代码如下directives: { resize: { mounted(el, binding) { // 这里使用debounce防抖处理，防抖的延时时间可以通过自定义指令的参数传过来，如`v-resize:300`表示300m.
2021-10-28 16:07:45
5176
原创 elementui中el-pagination文字自定义
这里是通过全局修改element配置进行修改在main.js中设置如下内容Vue.use(ElementUI, { size: 'small', locale: { el: { pagination: { pagesize: '条/页', total: `共 {total} 条`, goto: '跳转至', pageClassifier: '页' } } }})...
2021-10-26 11:50:40
4296
3
原创 el-table中选择框在分页的时候保持选中状态
el-table分页的时候保持之前的选中项状态需要在el-table上设置row-key属性，并在el--table-column中type='selection'一项设置:reserve-selection="true"<!-- 设置row-key --><el-table :row-key='row => row.id'> <!-- 设置reserve-selection --> <el-table-column type="selection"
2021-10-22 11:33:12
702
原创 vue beforeRouterLeave和elementUI $confirm组合的问题
路由守卫beforeRouterLeave可以在页面跳转前进行提示用户是否离开，从而避免一些用户的误触导致的页面内容未保存而这次通过elementUI的$confirm添加提示的时候发现弹窗一闪而逝，闪了一下就不见了，但是路由还跳转了，页面还处在当前页面…网上找了一圈，终于找到一个解决办法吧地址：$confirm 在 vue-router 中 beforeRouteLeave 调用出现闪烁后消失情况 这个办法暂时能解决这个问题，暂时没找到其他好的方法代码如下：beforeRouteLeave.
2021-10-18 14:53:43
654
原创 前端js实现图片视频文件直接下载而不是打开新页面预览
刚接到一个需求，要求在一个页面进行视频点击下载，而不是点击之后跳转到新页面进行预览之前做过下载图片都是通过转成base64的形式进行下载，但是视频文件太大，这种方式肯定是不行的，后来网上查了一下，可以通过转换成Blob格式进行下载，这种方式可以是可以，但是有一个问题，就是必须等ajax请求完成之后，才会弹出下载框，而且这种方式其实文件已经下载到内存中了，在你点击下载之后就直接可以下载下来了，但是如果文件1G大小还通过这种方式下载的话就太不人性化了后来，才发现，这个问题解决的话需要后端进行处理需要后端设
2021-10-10 22:26:47
3645
1
原创 js获取video的真实宽高
参考：https://blog.csdn.net/ganggelove/article/details/112526292最近要实现一个功能，使用的vue项目，需要获取到video元素的真实宽度，但是通过$refs获取到的宽高并不是真实的宽度，之后再网上查到，可以通过js进行实现实现原理原生video上有一个canplay方法，可以监听视频是否可以开始播放，而当canplay的时候，说明视频已经加载成功，这个时候可以获取到视频的真实宽高了<video id='video'><
2021-09-18 15:30:53
3048
原创 vue单元测试SyntaxError: Unexpected token ‘export‘
贴上错误信息，方便搜索引擎查找类似错误Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. By default, if Jest sees a Babel config, it will use that to transform your
2021-09-05 12:42:55
4456
1
原创 vue3单元测试报错：Cannot use import statement outside a module
这是由于jest本身不支持ES6语法规则，所以需要配置babel参考地址：https://www.jianshu.com/p/458f13dab96b
2021-09-05 00:35:04
2733
原创 vue3+ts+vitejs单元测试报错：‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。
通过vitejs创建vue3项目的时候并没有选择单元测试的选项而看网上的教程可以直接使用命令vue add vue-jest进行安装但是安装完成之后，运行测试命令的时候报错：‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序或批处理文件。网上找了半天都在说是vue-cli或者包丢失，但是验证并没有什么卵用后来终于发现，是项目中vue-cli-service问题解决方法由于vue-cli现在已经改成@vue/cli，所以现在安装vue-cli-service应该如下安装n
2021-09-05 00:02:40
772
原创 vite vue3项目Unrestricted file system access to
这是vite对根目录的访问做了限制参考vite文档：https://cn.vitejs.dev/config/#server-fs-strict可以在vite.config.js中作如下配置server: { fs: { strict: false }}
2021-09-04 16:45:09
3565
1
原创 nuxtjs代码变更后更新缓慢
最近接手的一个NuxtJS项目，在npm run dev启动项以及更改JS文件之后项目更新非常缓慢，最长的时候40~50s解决方案网上找了半天，后来在github中nuxt.js的Issues中找到答案，原来是eslint-loader的原因参考：https://github.com/nuxt/nuxt.js/issues/8244解决方法方法1：如果你的项目用的是nuxtjs2.x版本，那可以先把ESlint关闭方法2：如果你的项目用的是nuxtjs3.x版本，那么可以试一下将esli.
2021-09-01 15:33:41
1159
原创 ant design vue table默认全选
问题对于table，在ant design vue中rowSelection提供了一个方法getCheckboxProps，可以设置一些选择框的默认属性配置但是当我通过getCheckboxProps的defaultChecked属性进行配置的时候，确实可以实现数据的全选，但是全选按钮却没有选中解决方法在请求后端数据返回之后，进行如下操作// 先在data中添加rowSelection selectedRowKeysdata() { return { rowSelecti
2021-08-20 16:43:24
2957
1
原创 ant design vue table报错h is not defined
产生原因使用table时由于columns数据太多，所以将columns中的数据拆分到一个单独的js文件中又因为需要使用customRender，而其中需要使用jsx进行渲染，因此报错解决方法这里最终参考的是github中一个人给出的解决方案地址：https://github.com/vueComponent/ant-design-vue/issues/1183在单独的js文件中进行如下写法import Vue from 'vue'const h = new Vue().$createE
2021-08-19 17:51:36
868
原创 关于Vue中debugger定位失效问题
相信很多人进行项目配置的时候都会这样命名xxx/index.vue可能刚开始这样的命名并没有什么问题，但是当index.vue文件多起来之后，当你debugger的时候可能就会发现，找不到你要定位的文件了，但是我们这样的文件命名确实是符合规范的，所以我们就需要找到一个解决的办法这个问题的答案网上一搜一堆，但是无非就是设置source-map，但是真的管用吗，至少我试过很多次是不管用的直到有一次，偶然发现了一个方法，可以解决这个问题，虽说有点取巧，但是确实是真的解决了方法如下首先，我们先打开要d
2021-06-09 22:19:15
7631
10
原创 vue-cli中按需引入elementUI2.x
由于elementUI2.x的文档很久没有更新了，所以在现在在vue-cli4中按需引入elementUI2.x的时候就出现问题了去网上搜了一下，无非都是一样的答案，但是网上的答案现在还是有点问题的现在记录一下解决的步骤我们安装完成elementUI之后，依然安装babel-plugin-component这个插件$ npm i babel-plugin-component -D然后我们在根目录下的babel.config.js中进行如下设置需要注意的地方是plugins这个地方，不.
2021-02-26 17:49:37
199
原创 ElementUI中select组件中的icon图标自定义
也是在网上查了很多，但是没有查到什么有用的信息，想要放弃的时候看到了一个国外的人的提问，下方有人回复答案https://stackoverflow.com/questions/64143585/change-icon-in-of-element-ui-select
2020-10-14 23:09:58
18362
12
原创 vue中父组件传递动态初始值给子组件时的问题
先贴上报错信息方便他人查找:[Vue warn]: Error in render: “TypeError: Cannot read property ‘0’ of undefined” found in当我看到这个问题的时候真的是无从下手，这是什么错？虽然报错了但是页面却也正常的渲染出来了，什么鬼？~~~后来在网上查了之后才明白，原来是父组件给子组件传递的初始值是异步获取的，也就是...
2019-03-28 15:54:34
1102
原创 vue中使用animate.css进行路由切换
animate.css的动画方案丰富无比，足以满足我们的需要，今天将一下animate.css在vue中的使用方法记录一下，以免下次再使用又得上网上找半天，嘎嘎…参考博客 Vue.js - Transition过渡动画的使用6（配合vue-router、vue-navigation使用）首先我们先进行安装$ npm i -S animate.css在main.js中进行引入...
2019-03-14 16:35:14
1852
原创 vue.extend构造器
先上一个参考链接，觉得帮助很大: Vue 2.0学习笔记：Vue.extend构造器的延伸然后拿vue官网的话解释vue.extend：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。什么意思，我的理解其实就是创建一个自己的类，可以通过类的实例化动态创建dom元素接下来以Loading实例演示一下用法首先，我们创建一个Loading文件夹，并在其中创建ind...
2019-03-09 21:29:53
479
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人